- 00:00:00 welcome back to the next part of this
- 00:00:03 weather app series we're nearing the end
- 00:00:06 of the series and reason course is that
- 00:00:09 this application already works really
- 00:00:12 great however there are a couple of
- 00:00:14 things I want to fix what I want to add
- 00:00:17 let's put it that way for one I will get
- 00:00:20 rid of this dummy data as we are now
- 00:00:22 able to add our own data second I want
- 00:00:26 to have a sidebar which allows us to
- 00:00:28 store separate profiles containing
- 00:00:33 different cities which we then can load
- 00:00:34 Q well changed cities we see here
- 00:00:38 because once I got rid of the dummy data
- 00:00:40 here this will be empty by default and
- 00:00:42 only be full of the data we add here but
- 00:00:45 in a real application you might want to
- 00:00:46 save that and one step is to save it on
- 00:00:49 the front and a different profiles
- 00:00:50 however on a real app of course you
- 00:00:53 would synched it with some kind of
- 00:00:54 server where these profiles would be
- 00:00:56 stored too so I will first start by
- 00:00:58 getting rid of this dummy data and those
- 00:01:01 of course happens at the Beverly ETS
- 00:01:03 file where I just delete the two new
- 00:01:05 Webber items which are added by default
- 00:01:08 so that we only have an empty array left
- 00:01:11 so that's one thing and now if we have a
- 00:01:14 look at the application
- 00:01:15 I can still add Berlin and this looks
- 00:01:19 good but as I said it would be great to
- 00:01:21 save it in a kind of profile on the left
- 00:01:24 here maybe I also have a default profile
- 00:01:26 at startup of the application which you
- 00:01:28 could always note so in order to do this
- 00:01:31 I will create a new file here and I'm
- 00:01:35 doesn't the root development folder I
- 00:01:37 will call this fall profile oops
- 00:01:41 create a new fall profile dot yes and
- 00:01:45 this much just you find the profile
- 00:01:47 class I want to have profile now I want
- 00:01:54 my profile class to have
- 00:01:58 our name so each profile should have a
- 00:02:01 name profile name which is of course a
- 00:02:03 string and also each profile should have
- 00:02:06 an array of cities which will be an
- 00:02:09 array of strings so this will not be an
- 00:02:13 array of Weber items but because we
- 00:02:16 won't store the complete fetch to ever
- 00:02:19 item here but instead I will just store
- 00:02:22 the city names strings here which will
- 00:02:25 be searched for in the API
- 00:02:28 once I load a profile because of course
- 00:02:30 I always want to have the most recent
- 00:02:31 Weber data therefore I'm not saving the
- 00:02:33 Weber data but just the city names which
- 00:02:35 I want to search on the open Weber metal
- 00:02:38 open weather map comm API so with this
- 00:02:41 I'm able to store a list of cities
- 00:02:44 basically that's all and that's the
- 00:02:46 profile class I'll use next I want to
- 00:02:49 create this sidebar component which will
- 00:02:52 hold all these profiles so also in the
- 00:02:55 dev folder I will treat a new file
- 00:02:56 called site oops
- 00:03:00 cold site bar component TS and of course
- 00:03:06 this will start by being exported so an
- 00:03:08 exported class called sidebar sidebar
- 00:03:12 component and I will add the component
- 00:03:16 decorator of course this will receive a
- 00:03:20 selector of my sidebar and of course
- 00:03:26 also a template now what should be
- 00:03:29 inside this template well I want to have
- 00:03:32 let's say a heading which says save
- 00:03:35 profile something like this and then I
- 00:03:40 will have a button which allows me to
- 00:03:42 save a new fault profile so safe list
- 00:03:45 profile should save to current list of
- 00:03:48 weather items so of the you ever items
- 00:03:51 we will have down here for example
- 00:03:53 Berlin will save the current list as a
- 00:03:55 new profile so this button therefore
- 00:03:59 it's a click listener which should fire
- 00:04:02 the or target the unsaved new method
- 00:04:05 which I will have to create in the body
- 00:04:06 of this component of course so this
- 00:04:09 allows me to create
- 00:04:10 new profile next I will add an article
- 00:04:14 so default html5 element here which
- 00:04:18 should basically hold my different
- 00:04:21 profiles or hold one profile I will
- 00:04:23 later on loop through all these profiles
- 00:04:25 of course each article will have its a
- 00:04:29 heading age 4 with the name of the
- 00:04:32 profile profile name and the city name
- 00:04:37 city or the name of all cities excuse me
- 00:04:40 might be multiple cities like New York
- 00:04:43 London I also want to add a button in
- 00:04:47 let's say top right corner which allows
- 00:04:49 me to delete a profile therefore I will
- 00:04:52 use just a X so the X character and I
- 00:04:58 will give this a class of delete which I
- 00:04:59 will have to write my own my own to give
- 00:05:02 this a styling I want to have and I will
- 00:05:04 add a click listener here to which
- 00:05:07 should be on the lead profile profile
- 00:05:11 and I want to get the event the click
- 00:05:14 event passed into this method so that I
- 00:05:16 can stop propagation later on so that it
- 00:05:19 doesn't bubble up any more though but I
- 00:05:21 can stop it so that is only the click
- 00:05:24 event on this profile is recognized
- 00:05:26 so let's have a look at this and let's
- 00:05:29 see home ok how this looks in our view
- 00:05:31 in our template in order to see this I
- 00:05:34 will of course have to embed my sight
- 00:05:36 bar here in the app component so I will
- 00:05:38 do this right below my header my sidebar
- 00:05:42 and also of course I need to add here my
- 00:05:45 director Cerie so a sidebar component
- 00:05:48 and of course as always make sure to add
- 00:05:51 the import to the sidebar component now
- 00:05:54 if we reload the page well we can see
- 00:05:58 this doesn't look too pretty to be
- 00:05:59 honest so that definitely needs some
- 00:06:01 styling now in the source code of this
- 00:06:04 project and you can find us on github
- 00:06:06 I will provide this sidebar dot s CSS
- 00:06:10 file which has all the styling I need to
- 00:06:14 make this look better so you may just
- 00:06:17 toss this into your project then or
- 00:06:21 positive window right now and then let
- 00:06:25 it go again and pause now and resume and
- 00:06:30 pause to type it whatever you prefer but
- 00:06:35 as I said you will find it like it hub
- 00:06:37 repository now in order to apply these
- 00:06:39 styles to this component though I will
- 00:06:42 need to add something to this component
- 00:06:45 decorator the style URLs metadata which
- 00:06:49 allows me to specify an array of strings
- 00:06:54 referring to paths in my project which
- 00:06:57 holds CSS files so I only want to add
- 00:07:02 specify one string here and this will be
- 00:07:04 the path to my sidebar dot CSS file this
- 00:07:08 will live in the source CSS folder and
- 00:07:10 then sidebar dot CSS since this is the
- 00:07:14 folder where all my a CSS files will get
- 00:07:17 compiled to and remember that when
- 00:07:21 accessing style or template URL sangla –
- 00:07:24 you always have to think from the root
- 00:07:27 folder the project folder on and not
- 00:07:31 from the file where you're currently in
- 00:07:33 so source slashed CSS refers to this
- 00:07:37 folder even though this def folder were
- 00:07:41 a side part of component lesson has no
- 00:07:44 source folder in it this has to be seen
- 00:07:47 from the project route on very important
- 00:07:50 now the style is imported here well only
- 00:07:54 be applied to this component that's
- 00:07:56 important to only this component will
- 00:07:59 receive the styles and after if you have
- 00:08:01 a look inside part of a CSS file you see
- 00:08:05 that host selector and this means the
- 00:08:09 whole body but only of that component
- 00:08:12 should receive these styles here and
- 00:08:16 that is a good way to make sure that
- 00:08:19 you're not over writing or interfering
- 00:08:22 with some other styling your application
- 00:08:24 but instead only apply your styles where
- 00:08:26 you want them to be applied to go a
- 00:08:29 little bit deeper into that that uses
- 00:08:31 you encapsulation a concept
- 00:08:34 introduce Bangala – which kind of in a
- 00:08:38 default setting at least resembles –
- 00:08:41 shadow Dom specification which is not
- 00:08:44 supportable browsers and shadow Dom
- 00:08:46 would mean that each element in your Dom
- 00:08:49 might have will a shadow Dom a separate
- 00:08:53 Dom behind it with its own styles and so
- 00:08:56 on and as I said this is not support
- 00:08:58 about browsers but angular to emulate
- 00:09:02 stays by default such that it through a
- 00:09:05 clever trick by appending an attribute
- 00:09:08 to your element and then adding this
- 00:09:10 attribute to all the styles which should
- 00:09:12 only be applied to this element side
- 00:09:15 note so by using this technique it
- 00:09:17 emulates these component or element
- 00:09:21 specific styles and make sure that if
- 00:09:24 you style for example the age the
- 00:09:27 element here only the h3 element in this
- 00:09:30 component that receives the style and at
- 00:09:33 all and not all HV elements in your
- 00:09:35 application if you want to learn more
- 00:09:38 about you encapsulation you will find a
- 00:09:40 link in the description below so what is
- 00:09:43 if I now reload this looks much nicer
- 00:09:49 but to make it look really nice I will