- 00:00:01 in the last video of this series if you
- 00:00:03 watched it I shocked you with how
- 00:00:05 complex it is to get this application to
- 00:00:07 run but now as you saw how it is and
- 00:00:11 that in the end we only use a couple of
- 00:00:14 these many files to do so namely the app
- 00:00:17 module the index.html the main TS and
- 00:00:20 the app component here since we only use
- 00:00:22 these files well I think we're now in
- 00:00:26 the spot that we can work on our
- 00:00:28 application and actually make it a bit
- 00:00:30 nicer or display more than just a Puerco
- 00:00:36 is i want to install bootstrap just to
- 00:00:39 get some styling and what this Eli
- 00:00:42 installing bootstrap is really easy I
- 00:00:44 can just download it with NPM install –
- 00:00:47 – save bootstrap we installed no chests
- 00:00:50 so we may use the NPM package manager or
- 00:00:53 the node package manager for this and
- 00:00:54 this will add bootstrap as a dependency
- 00:00:57 to this project with the save flag I'm
- 00:01:00 basically telling it that I want this
- 00:01:02 dependency to have both in the
- 00:01:03 development environment as well as the
- 00:01:06 production environment now with
- 00:01:09 bootstrap install here you can see it
- 00:01:12 was added in the package dot jason here
- 00:01:15 with that installed i have to tell this
- 00:01:18 eli that i want to use it to style my
- 00:01:21 application i can do so by going to the
- 00:01:24 angular CLI jason file which allows me
- 00:01:26 to configure my project fruity CLI and
- 00:01:29 here we get this Styles array here we
- 00:01:32 can add all the files we want to use as
- 00:01:35 global styles which means add them to
- 00:01:37 the index.html file because we want to
- 00:01:39 use them all or everywhere in the
- 00:01:41 application now besides Styles dot CSS
- 00:01:45 here we also want to use bootstrap so
- 00:01:49 let's simply reference it it was added
- 00:01:51 to the node modules folder and I'm using
- 00:01:54 two dots at the beginning because we
- 00:01:56 have to see this relative from the
- 00:01:58 index.html file on and indeed node
- 00:02:02 modules folder we have a new bootstrap
- 00:02:04 folder where we have a dist folder CSS
- 00:02:08 bootstrap CSS you can of course look
- 00:02:11 this up by simply having a look at your
- 00:02:13 node modules folder
- 00:02:14 and here at the bootstrap folder where
- 00:02:20 you will find exactly what I'm
- 00:02:21 referencing here this bootstrap CSS file
- 00:02:24 so this is how we add bootstrap to this
- 00:02:28 project and with that it will
- 00:02:31 automatically use it as soon as we start
- 00:02:33 at the ng serve process here with ctrl C
- 00:02:36 and then restart it and now we will have
- 00:02:38 the budget of styling available well
- 00:02:41 that's nice but I also want to add some
- 00:02:42 new components and so on we'll do this
- 00:02:46 next in case you forgot what you want to
- 00:02:49 build we want to build an application
- 00:02:51 where we have a collection and a market
- 00:02:53 where we can then add things from the
- 00:02:55 market to our collection so I will at
- 00:02:57 least need these two components a
- 00:03:00 collection and a market now to create a
- 00:03:02 new component you get a couple of
- 00:03:05 options you could simply create a new
- 00:03:07 file on your own just try to keep this
- 00:03:10 naming convention of named component TS
- 00:03:13 you can also use this Eli it in this Eli
- 00:03:17 it's as easy as running ng then generate
- 00:03:20 or just G as a shortcut and then
- 00:03:23 component or just C as a number shortcut
- 00:03:26 and then I wrote the name of the
- 00:03:28 component you want to generate for
- 00:03:30 example here I want to create a market
- 00:03:33 component and I could now hit enter and
- 00:03:37 what this will do is it will create a
- 00:03:41 new folder in the app folder which holds
- 00:03:43 all the market component related files
- 00:03:45 now I can get rid of the spec file here
- 00:03:48 at the testing file and also of the CSS
- 00:03:50 file and also get rid of these style
- 00:03:53 URLs in the app component es file then
- 00:03:55 this created a new component and of
- 00:03:58 course you can also create these files
- 00:04:00 by hand there's nothing wrong with that
- 00:04:02 if you do create them by hand just think
- 00:04:06 about adding them to your app module
- 00:04:08 though here the CLI deters automatically
- 00:04:11 it will not happen automatically if you
- 00:04:14 create the files on your own so make
- 00:04:16 sure to add market component here to the
- 00:04:19 declarations array and also add the
- 00:04:21 import to it at the top on the import
- 00:04:25 statement it's important that in
- 00:04:27 typescript here
- 00:04:28 we don't add the file extension so we
- 00:04:31 only import market dot component and not
- 00:04:33 market dot component dot TS with that
- 00:04:37 setup we are able to now use this
- 00:04:39 component and we can use it by using its
- 00:04:42 selector which was set to app market of
- 00:04:44 course you can override this in our app
- 00:04:47 component HTML file so here I'll simply
- 00:04:51 add app market and save this which will
- 00:04:54 trigger a recompilation since the serve
- 00:04:57 command is still running and then on the
- 00:05:00 page we see app works and market works
- 00:05:02 exactly what I want this is how easy you
- 00:05:06 add a new component in your application
- 00:05:09 now of course this is not very beautiful
- 00:05:10 and not really close to what the
- 00:05:13 application looked like I showed you at
- 00:05:16 the beginning so let's fine-tune this a
- 00:05:18 little bit the first step is I'll go to
- 00:05:21 my style.css file and add some global
- 00:05:24 styles here just some padding to get us
- 00:05:27 a little bit more in the middle of the
- 00:05:28 page and not set it directly on the edge
- 00:05:31 thereafter I want to go to my app
- 00:05:34 component HTML file and work on that
- 00:05:37 here I'll quickly remove everything here
- 00:05:40 and add a container this plug-in i'm
- 00:05:43 using here which allows me to do this
- 00:05:44 trick here is called emmett and with
- 00:05:46 that i can just type the class name with
- 00:05:49 a dot at the beginning and then hit tab
- 00:05:51 as a side note nothing too specific just
- 00:05:54 a feature of my IDE so this is a normal
- 00:05:56 container class here using the bootstrap
- 00:05:59 framework and in here
- 00:06:01 I want to load my app market component
- 00:06:05 as before now of course I also want to
- 00:06:07 work on this app market component so in
- 00:06:10 this market component here I want to
- 00:06:13 create a row with a nested bootstrap
- 00:06:15 column class let's say like this to make
- 00:06:17 it equal an all screen sizes not really
- 00:06:21 creating a great mobile first
- 00:06:23 application here and then I want to
- 00:06:25 create a list group so an order list
- 00:06:29 with the list group class and in here a
- 00:06:34 list item whoops
- 00:06:36 also with the list group item class and
- 00:06:39 this will later on become the item where
- 00:06:42 I then well am able to click on add to
- 00:06:46 collections on right now it looks like
- 00:06:48 this a little bit nicer but not really
- 00:06:50 like the application at the beginning so
- 00:06:53 let's fight unit a little more in this
- 00:06:56 list item here what I want to have is I
- 00:06:58 want to have a span with the batch class
- 00:07:01 which should give me the type of the
- 00:07:03 item later on sold something like photo
- 00:07:05 I also want to have a button with the
- 00:07:09 but classes button and button success to
- 00:07:12 have a green button which then says add
- 00:07:15 to collection and finally the name of
- 00:07:19 the item so this could be anything now
- 00:07:23 if I save this we should be much closer
- 00:07:25 to what we saw before yeah definitely
- 00:07:28 looks better we might throw in an
- 00:07:30 additional whitespace here behind the
- 00:07:33 button or after the button just to get
- 00:07:36 us a little bit further to the right
- 00:07:37 here but yeah looks great of course this
- 00:07:40 is a static content here nothing dynamic
- 00:07:43 about it the button doesn't do anything
- 00:07:45 and as you clearly saw I'm not getting
- 00:07:48 this data from anywhere well we'll fix
- 00:07:50 this in the next videos for now I'm
- 00:07:52 happy with the current state of course I
- 00:07:55 also want to work on my upper component
- 00:07:59 this collection I do have two components
- 00:08:01 in the end so I'll create this component
- 00:08:04 to with ng GZ for generate component and
- 00:08:08 then collection and here since I won't
- 00:08:11 use these styles anyway I can add the –
- 00:08:16 – inline Styles flag or simply – is and
- 00:08:21 thence back false do not generate this
- 00:08:24 testing file and to not generate this
- 00:08:26 CSS file so with that you see I only got
- 00:08:30 the two files I need and then here you
- 00:08:33 see I now get these Styles array but no
- 00:08:35 styles added so I can leave that there
- 00:08:37 so how should my collection look like
- 00:08:41 pretty much the same as the market so
- 00:08:44 I'm just going to copy and paste this
- 00:08:45 code in there but of course here I don't
- 00:08:48 want to add to collection instead I want
- 00:08:51 to have a class of button danger to make
- 00:08:53 it read with a text saying
- 00:08:56 remove from collection like this this
- 00:09:01 now gives me my collection and I can
- 00:09:05 quickly add this here let's say below
- 00:09:07 the market app collection like this and
- 00:09:10 if we now let this serve and again keep
- 00:09:13 in mind you have to add this to your
- 00:09:15 declarations every year in app module
- 00:09:17 collection component as well as the
- 00:09:19 import make this or make sure to have
- 00:09:22 this if you create that you file on your
- 00:09:24 own so with this in place you now see
- 00:09:27 the market and the collection of course
- 00:09:30 we don't have routing yet this will be
- 00:09:32 added in a later video but we got our
- 00:09:34 two components the next step is to have
- 00:09:37 some data to work with and let these
- 00:09:40 components communicate with each other
