Coding

Angular 2 Full App Tutorial – Weather App – #4 Custom Classes & String Interpolation

  • 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