This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Challenge 4" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Lukas Ruebbelke: So we are going to create a widgets service class, with a widgets collection, then we are going to decorate it with injectable. Inject this into the widgets component and consume the widgets collection. Now here is the bonus time. Let's say for instance, you had a property, maybe like a number, or something of that sort, that you wanted to transform.
[00:00:36] So let's say you had a dollar amount. And let's say you could buy these for $100, and you had a coupon service. So you wanna run this through and generate a new price. So, the bonus is to create a second helper service that you can inject into your widget service, and perform some calculations.
[00:00:58] So this might be a good helper service that you can pass in. I will give you some tools for success because I heart each and every one of you. If you are looking for inspiration on how to do this. Obviously, we have the experiments service with some stuff in it that might be a good place to look.
[00:01:26]
>> Lukas Ruebbelke: Also, you get bonus points if you program to an interface. And then from here you can see how this is going down. So, everything you need to succeed I have blazed the trail before you and I anxiously await your arrival.
>> Speaker 2: What is the difference between component and a view and then, when is it recommended to use dynamic component loader?
[00:02:01]
>> Lukas Ruebbelke: So I believe that view is a metadata specific to view specific things such as the template and styling. I personally have never used the view, and I think it was fairly prevalent at kind of the beginning, Alpha1, 2 and 3. But currently, I just see components. So actually template URL and styles did not belong, or it actually was not in the component metadata, if I'm not mistaken.
[00:02:26] So you had to define them separately and then somewhere along the lines, they actually kind of merged those together. So I never use view, I always use component. If somebody knows of a good reason to use view in conjunction with component. I'd be interested to hear that but everything that I use.
[00:02:46] Do you know a reason?
>> Scott: Yeah, they use the view specifically for the templates at first but now they kind of they join it with the component. But they still kept the view around because they realized that with the introduction of universal Angular 2. That they can actually use the view decorator for other environments that Angular 2 my run in.
[00:03:10] For instance like native script. You could set a view like, I want this view to render when I'm in a browser. But I want this view to render when I'm in native script, or I want this view to render when I'm here. So it's just a different way to render different types of views in different environment, at least that's the plan.
[00:03:23] And I believe, but yeah, you don't actually need it right now. But the plan is to have it that way, so you could share your application but have different views for different environments.
>> Lukas Ruebbelke: So, good answer. There are some things that are conspiring and being developed with Angular 2.
[00:03:44] That we have a sense of, but they're not mature enough yet for us to kind of dig into. One of them, actually I wanted to do a day workshop on universal Angular, cuz I think it's a game changer. But, it's not quite ready to talk about. But, there's definitely some interesting kind of dynamic rendering things that'll happen, when that comes down the pipeline.
[00:04:07] So actually, Scott, great point that gives us some options to determine how we actually want to render our component based on certain situation. Now, as for the dynamic component loader, I have only had one use case well I've only used it in one place. So the answer is you will use dynamic component letter anytime you need to dynamically load a component into your parent component.
[00:04:36] Thus it's called dynamic component loader.
>> Lukas Ruebbelke: The I think it varies from situation to situation with Angler 1 it was quite a bit easier. I actually have a blog post on a blog where I talk about loading dynamic templates. And where that gets interesting is if you want to actually compose a template on the fly.
[00:05:03] So for instance, let's say you have a data object that has a type on it and based on the type you wanna render it a bunch of different ways. So let's say you have like a media object and it's a photo, video and like just text. Cuz you might say if it's image then I wanna render it's kind of the stylistically is an image or if it's a video I actually want to render the video.
[00:05:26] Or if it's a text, I wanna make it look like a piece of not pad. So these highly stylized kind of directives. And based on that I was able to do simply say what type is it and then pull in the inline template and do dollar compile. Passing the HTML I wanted to compile and to test that to a scope object.
[00:05:48] With Angular 2, we don't have access to the compiler at that level. So this is where the dynamic component loader comes in. And the use case that I have for that is if you want to or need to dynamically generate forms on the fly. I actually have a plunk for this, if enough people ask I will show maybe tomorrow.
[00:06:10] But getting, especially for line of business applications where you get a json schema of a data object and you want to build a form dynamically around that. This is where this becomes, very interesting as you can just basically loop over those fields and say. Let's add an input component and then have that render itself how ever it needs to be.
[00:06:34] It's a little bit limited in regards to what you can do with Angular 1 because we don't have access to the compiler the way that we do. But any time that you need to dynamically add components to a parent component. So I think in that case they've done a pretty good job of naming it dynamic component loader.
[00:06:56] Any more questions? Yes, Scott?
>> Scott: I want to add to that. So, one use case that I've seen and tried before, with dynamic component loader was. So pretty much when you're in a situation where you just don't know what the DOM is gonna look like at call time.
[00:07:12] You just don't know until call time, so a good example of that is data visualization. You just don't know where this bar is gonna go or where this line is gonna draw. And you don't know until it's called. So that's a good example of when you want to use a dynamic component loader.
[00:07:28] Because you just don't know, it's not available there. So that's one example, so you can think of stuff like that. Other than that, I haven't really thought of a.
>> Lukas Ruebbelke: Even dashboards, actually now that I think about it. Now that we've got our creative juices flowing. Thanks Scott, you're inspiring me.
[00:07:42] For instance, a dashboard where you have the shell ,and then you have individual teams building out components. And then based on let's say, a user that you log in as. Then you may see certain kind of components rendered based on who you are. Any preferences that you've set, what your access level is.
[00:08:03] Then you simply at load time you just won't know until you know who this person is and you've had a chance to check there account and their preference, etc. And then you can lay that dashboard out. So, a good example of this would be like a Fintech kind of a dashboard.
[00:08:20] You can imagine where it's like, I wanna see like my stats for my financial holdings. And dynamically rendering that on the fly and allowing or developers creating a system to dynamically render that for their clients. So definitely a few use cases, and I think any kind of dynamic behavior, I really hope to see that particular feature kind of mature.
[00:08:46] And I'd love to actually have more access to the kind of lower level component to do things. With Angular 1 I could actually say, this is the string I want to render, but I could actually compile that into anything I want. So I could say, I want this header with this body with this footer.
[00:09:03] And so you dynamically now can post templates. And that I think would be really interesting. Right now, for instance, if you wanted to dynamically choose a template, kind of on the fly, you don't have access to that right now. So