- 00:00:00 hi everyone welcome back and the last
- 00:00:03 video we left when we well kind of had
- 00:00:07 our list we had the first item we had
- 00:00:08 the general styling now and this is the
- 00:00:11 next value I want to make this an actual
- 00:00:14 list and I want you at the moment not
- 00:00:18 replaced dummy data but I want to create
- 00:00:21 a special type for the data we output
- 00:00:24 here and we'll start with this in this
- 00:00:26 with you so at the moment if you have a
- 00:00:29 look at our Weber item I'm outputting
- 00:00:31 well hard killing a text here that
- 00:00:34 certainly isn't the believer I want and
- 00:00:36 I'll start with creating a new file
- 00:00:40 which will hold a special class I'm
- 00:00:43 going to create which will define my
- 00:00:45 Weber item so I will just call this
- 00:00:49 Weber dot TS now our description here
- 00:00:53 because this is just a class just a
- 00:00:55 typescript class which kind of defines
- 00:00:58 the type Weber item which I will use
- 00:01:00 throughout this app then I will
- 00:01:03 therefore your let me zoom in a bit
- 00:01:06 export a class and I will call this just
- 00:01:10 Weber item for sake of completeness or
- 00:01:15 to stay consistent I will call this file
- 00:01:18 weather item TS and now let's see how
- 00:01:23 this class should look like if we have a
- 00:01:26 look at our weather item component we
- 00:01:28 see that each Weber item seems to have a
- 00:01:31 city name it seems to have some kind of
- 00:01:35 weather description here and it seems to
- 00:01:38 have a temperature these are three
- 00:01:40 things we see here therefore in my class
- 00:01:44 I will know I will add a constructor and
- 00:01:51 inside this constructor argument list
- 00:01:55 here I will specify the three properties
- 00:01:59 this class will have and by doing this
- 00:02:03 here in the constructor I of course also
- 00:02:05 provide this constructor so that I can
- 00:02:07 easily create new items with the new
- 00:02:09 operator we will see this in a second so
- 00:02:12 what I will do here
- 00:02:13 is I want to have a public property city
- 00:02:20 name I also and this will be a string I
- 00:02:24 also want to have a public property
- 00:02:28 that's called a description this will
- 00:02:31 also be a string and I will have have a
- 00:02:34 public temperature and let's make this a
- 00:02:37 number so this is my weather item class
- 00:02:41 here and then in my weather item
- 00:02:43 component what I will do is I will for
- 00:02:47 the moment add a constructor here too
- 00:02:50 and all I do here is I will create some
- 00:02:53 dummy data so I will create here or add
- 00:02:56 a property which will call whoever item
- 00:03:00 this will be the weather item displayed
- 00:03:02 in this Webber item component and this
- 00:03:05 is not a dummy thing I will need this
- 00:03:07 later
- 00:03:08 I will only fill it with Demi data in a
- 00:03:10 constructor in a second and this weather
- 00:03:12 item property will of course be of type
- 00:03:14 weather item this is the classic just
- 00:03:17 created or the type which has created
- 00:03:19 and you can see it here at the top that
- 00:03:22 the import Weber item was added and this
- 00:03:25 is how you generally create your own
- 00:03:26 types in typescript you can do this fire
- 00:03:30 interfaces like you probably saw in my
- 00:03:33 first English you series I have here on
- 00:03:36 the channel
- 00:03:36 or you just create new classes which of
- 00:03:38 course are then types because you can
- 00:03:40 create instances of these classes and
- 00:03:43 we're going to create such a instance
- 00:03:46 here in the constructor whereas okay my
- 00:03:48 web item will be a new Weber item so I'm
- 00:03:53 creating a new instance of this class
- 00:03:55 because if you remember maybe what you
- 00:03:58 heard about object orientated
- 00:04:00 programming classes are like blueprints
- 00:04:03 what did you find here in this file is
- 00:04:06 the blueprint how each instance of this
- 00:04:10 class should look like which properties
- 00:04:13 or methods
- 00:04:13 it should have in this case only these
- 00:04:15 three properties so here I'm going to
- 00:04:18 create a new instance of the new keyword
- 00:04:20 here and I will well let's say gives us
- 00:04:24 the name of London and I want to have
- 00:04:27 description which says rainy and I think
- 00:04:31 that kind of fits you London and then
- 00:04:35 let's say we want to have 32 degrees
- 00:04:38 Celsius let's say the Celsius by default
- 00:04:41 but you may of course use Fahrenheit
- 00:04:42 whatever you like now in my template
- 00:04:46 here I'll enter template expression 2 or
- 00:04:53 I add this expression here to output
- 00:04:55 data now we haven't had a look at this
- 00:04:58 in this series I of course had my first
- 00:05:02 thing let you series what I'm doing here
- 00:05:05 is I'm using string interpolation by
- 00:05:09 using double curly braces here in my
- 00:05:12 normal HTML code and this allows me to
- 00:05:15 enter any expression between these curly
- 00:05:19 braces this might be any shower close to
- 00:05:22 any JavaScript expression I might want
- 00:05:25 to write here so I can write JavaScript
- 00:05:28 code here just be sure not to add a line
- 00:05:31 break that won't work but in this case
- 00:05:34 all I will do is I will write whether
- 00:05:37 item too well output is property
- 00:05:41 basically now of course this is a class
- 00:05:44 this is an object so I will access the
- 00:05:47 city name property of this object and
- 00:05:53 this is all how I do it I I would put
- 00:05:55 this information by using the double
- 00:05:58 curly braces and then just entering the
- 00:06:00 property name and in this case s is an
- 00:06:04 object the property name of that object
- 00:06:07 which I want to refer but if I had like
- 00:06:09 a property my numbered which is equal to
- 00:06:14 2 I could just output my number here of
- 00:06:19 course but we don't have to here so
- 00:06:22 whoever items city name is going to be
- 00:06:24 let me save this and as you see the rest
- 00:06:31 here did not update because I have not
- 00:06:33 taken care about this year but the
- 00:06:35 Webber ID of city name London is right
- 00:06:38 here so this works
- 00:06:40 now a string interpolation is one form
- 00:06:43 of data binding and we're going to see a
- 00:06:46 lot more forms of data binding
- 00:06:48 throughout the next videos but data
- 00:06:52 binding is essentially a key thing in
- 00:06:54 angular 2 which allows us to manipulate
- 00:06:56 our templates and to let components work
- 00:06:59 together to have data flow for
- 00:07:02 application and finally to render it to
- 00:07:05 the screen of course so this is my city
- 00:07:09 name I'll add an average string
- 00:07:11 interpolation here and this time I will
- 00:07:14 refer to the description of my Weber
- 00:07:16 item and then here of course I will
- 00:07:19 replace the number with weather item dot
- 00:07:24 temperature now here remember that
- 00:07:29 temperature is a number and I'm
- 00:07:31 outputting it here is a string which
- 00:07:32 will work fine because JavaScript is
- 00:07:34 able to well cast this number to a
- 00:07:38 string so this won't be a problem here
- 00:07:40 and after look here it already updated
- 00:07:43 you can see it added now say it's rainy
- 00:07:45 instead of clouds and well all this
- 00:07:48 works just to make this little bit more
- 00:07:51 realistic let's make this four degrees
- 00:07:53 and looks good so this is how we add our
- 00:08:00 own types add our own class and output
- 00:08:03 data dynamic data kind of with data
- 00:08:07 binding string interpolation in this
- 00:08:09 case in the next video we will actually
- 00:08:14 make this a list and make sure that we
- 00:08:16 got multiple entries here see you there
- 00:08:19 bye
