This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Challenge 5: Solution" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

Lukas walks through the solution to Challenge 5. Lukas takes questions from students.

Get Unlimited Access Now

Transcript from the "Challenge 5: Solution" Lesson

>> Lukas Ruebbelke: Really the goal here is to take this collection and move it to a service. So I'm just going to copy this. And I am going to put the widget service into the shared folder. Widget Service
>> Lukas Ruebbelke: Sure, why not. All right, class, import decorate.
>> Lukas Ruebbelke: That's crazy, just going to paste this in since we're here.

>> Lukas Ruebbelke: Then,
>> Lukas Ruebbelke: You can see here that I decorated it, and did the imports all in one fell swoop. And so here, this is it, with the class it's the container that hold the collection, and then let's go to. Actually let's do this and stick with convention. [BLANK AUDIO] WidgetService and then, let's hop in to our app module.

>> Lukas Ruebbelke: Yikes, so I just imported it and we'll go to providers. I've created it, I've exposed it and I'm going to consume it, so in our widgets component, over here.
>> Lukas Ruebbelke: I'm going to just take this and delete it. Because we're going to get it from the service.

[00:01:56] Now, let's consume it, private, which is service. Through the search assignment is now available to, for consumption, and the rest of the class. So we'll go with this style widgets, equals this.widgetsService.widgets. And now, in theory, that when I go back to the page, let me refresh this.
>> Lukas Ruebbelke: No provider for Caffeine service?

[00:02:43] What happened here? That's right, you sabotaged me. Let's go back to my app module, bear with me, I was wondering why that was grayed out.
>> Lukas Ruebbelke: We'll go here.
>> Lukas Ruebbelke: Well, let's go to widgets, you can see that it's still happening. But let's prove that it is indeed coming from our service

>> Lukas Ruebbelke: Let me just close some of this down, we're starting to get a little bit messy.
>> Lukas Ruebbelke: Yellow!
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: Create, expose, consume.
>> Lukas Ruebbelke: Any questions about this? Are we seeing how a service is a class? The component is, for the most part, a class.

[00:03:54] And we're kind of doing at this point, a lot of the same things over and over. So this is kind of the beauty of convention, is once you understand properties, methods, the shape, then it applies across the board.
>> Speaker 2: Could you quick go back to the widgets component, just where you assigned it.

>> Speaker 2: Widgets service dot
>> Lukas Ruebbelke: Now if I do need to go back to any one of these files for somebody to witness, at least one of the ways to do it, then let me know. Now the other part of this, and so kind of I get into interfaces, the first time, around services, cuz that's where it's starting to pass data around, and it's kinda nice to know what it is.

[00:04:45] So in the shared folder I'm going to click on Typescript file and we'll just go widget.model.ts. Export interface Widget, ID is a number I think, name is a string and description. And then what you can do is well, but sometimes you want to have properties that do not necessarily have to be fulfilled, they're optional.

[00:05:25] And so, you could for instance have a widget, that just has an ID and a name. So what you're gonna do is you're gonna mark these certain properties as optional, and it would still satisfy the interface. This is what we're saying is, a widget has to have an id, but we'd like it to have a name and a description as well.

[00:05:45] And so from here, let's go and,
>> Lukas Ruebbelke: Export this as well, so, export {widget}. And so we're just going to, from Widget model. And then what we can do is interestingly enough, when we go to the widget component, it won't come from arrow wall. But I still want to expose it, is we know that this is going to be a widget.

[00:06:17] So we go here
>> Lukas Ruebbelke: But what do we know about widgets? That it's an actual array of widget objects, and so you can do this two ways. And I don't think one is better than the other, is you can go, like this. So this is using generic notation, or, and if I say something stupid here about this, feel free to jump in clarify, so this is kind of the generic notation.

[00:06:51] You'll see this a lot when you're dealing with observables, and you may not know what's coming down the pipeline, or, this is kind of what I prefer Is using this version. As far as I know they are exactly the same, they do the exact same thing, it's just six of one half a dozen of another.

[00:07:06] But now we're saying this is an array of widget objects. And so if we start to reference something else, or put something else in there that's not a widget, then we will hear all about it. In fact let's see what happens here, this widgets.push let's go
>> Lukas Ruebbelke: I don't know test hello foo equals bar.

>> Lukas Ruebbelke: So you can see here it's already saying like, whoa, whoa, whoa, whoa, whoa. Like this isn't a widget, like, stop. So this is really handy when you kind of know, like this was expecting this one thing, and this unfortunately did not satisfy this. Although I think if you go

>> Lukas Ruebbelke: So this is pretty neat. It's telling me exactly what I have to have. ID, description and name. So this is kind of one of the benefits of using typing within TypeScript