This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Component Fundamentals Exercise" Lesson
[00:00:00]
>> So one thing that I did in the interim is I went ahead and checked in the code that I'd been working on live coding. So if you go back to the repo, you'll see this 01 component fundamentals branch. And so if you want to get caught back up to where I am, I definitely recommend you can do get fetch all on the command line and pull that down.
[00:00:27] So I'll just show you real quick. You'll get that get fetch -- all It'll go and upload the branches so obviously because I had that branch it was already on my computer, but if you don't, it'll pull that branch down and then you can then, so I'm just gonna hop onto master.
[00:00:54] Oops, here you can go just get checked out. 01, component fundamentals, there we go. And so this is pretty much right where I left off before we went on break and so what I'd like to do is I wanna do a quick coding challenge. So I wanna give everybody an opportunity to reinforce What they have seen in the previous module.
[00:01:27] So it's going to be fairly simple, and I'll explain it to everyone and then we'll just do a quick break, maybe ten minutes to the coding challenge, and then we'll come back and we'll get into forums. So, in our home component we spent quite a bit of time iterating over this course lessons displaying it in the DOM.
[00:01:54] We also created some additional properties. We display that via binding and then using event binding we then from our template, when we selected a lesson, then we pass that back into the component and then using this JSON pipe over here, we were able to dump it in. So what this looks like is if we hop back here, you can see these lessons.
[00:02:21] And let me just refresh. There we go. And as I select it down here, if there's no lesson selected, then you get a prompt. So what I would like everybody to do real quick is to if you open up the courses component. And the courses component.html, so, courses component.ts, coursescomponenthtml.
[00:02:52] We are going to essentially flesh or build this out. So, in our courses component, we have a single course. What I would recommend, you do just to make sure that ng4 is working is you could, add another course in here. So I'm just going to go 2 just go JavaScript The Really Really Hard Parts.
[00:03:31] And Worship Will Sentence. We'll set percent complete to 50. I mean, so this is completely arbitrary. But, I'm just adding another one in here. And so take the courses array using ng4 in the courses component.html, I would like for you to loop over and display the courses in a course list and then when you select a course, then what you can do is just dump it out in this course details caught over here.
[00:04:18] So if you get stuck, everything you need to know to complete this challenge is over in home component.ts and home component.html. So the idea is to display the courses In a course list using ng4 and then, add an event handler to the courses component, that when you select it, it creates a selected course and then you just display that.
[00:04:55] So what I'm going to do, is I'm going to just add a couple quick notes here for people to follow along. Challenge step one Display courses In, Using ng4. Step two, add event handler to select course. And then step three Display raw JSON of selected course. All right, so three steps.
[00:05:49] I think that using home component home component.ts, this is probably 10 minutes worth of work. And what I'm going to do is, I will also just push this up real quick, git status. Okay, so I've modified one course, so git add, Challenge description. All right. So, this has been pushed up.
[00:06:27] So if you wanna pull this branch back down, you can get the challenge here of what we want to do recommend that you reference home component.ts home component.html