Coding

CREATING A COMPONENT – Angular 2.0 Final – Getting Started

  • 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