This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 4" Lesson
[00:00:00]
>> Lukas Ruebbelke: Let's do a challenge. What I am going to show you though, cuz there is some styling or we're going to be building out some stuff to start to look like the item's feature. So I went ahead and created a snippet, or rather a gist, at this link that you can use to save on some of your typing.
[00:00:23] So, we're using Material Design Lite for some of the styling. So if you just paste this in, as well as the initial structure for the HTML. You could pull this from items and then paste it in and pull it out. I just went ahead and did this for you.
[00:00:42] As well as I've started a widgets, essentially a collection, that you can use to seed your widget's component. So, with that in mind.
>> Lukas Ruebbelke: Let's go back here, and let's talk about this challenge. So what I like to do, is create a widgets collection in the widgets component.
[00:01:03] And you can just copy that snippet from the gist and just paste that in. Also, create a selectedWidget property in the widgets component. Then what I would like for you to do is display the widget's collection in the template using ngFor. Then use event binding to set a selected widget.
[00:01:29] From there, display the widgets property using property binding and interpolation binding. So, something off of that object, use property binding and interpolation binding to display that. So I'll give you a hint, name would be good for interpolation binding. There's an image property. This would be a good place to use property binding.
[00:01:52] And then use nglf to show an element or an alternate message if no widget is selected.
>> Lukas Ruebbelke: Any questions?
>> Speaker 2: Question from Kaitlin. As far as styling, are you using any Angular UI frameworks like PrimeNG, for example?
>> Lukas Ruebbelke: So, in terms of styling, I am a huge fan of Material Design.
[00:02:21] And when I'm in Angular 1, I just use Angular Material.
>> Lukas Ruebbelke: Angular Material 2 has gotten much better and there's still some components occasionally I'll run into that just hasn't been developed. For whatever reason, the select component is, nobody wants to touch that. And so for basic styling I would generally use like Material Design Lite, but I really do like Angular Material too, and I use that quite often.
[00:02:54] But even as of two, three months ago there was maybe five, six components. And so, their building up a lot more. But I'm really excited to see where that'll be in a year from now.