Lesson 7 – Nested Components

At this point we have a pretty good framework. The next step is to include the LessonComponent into the main AppComponent. The reasoning for this should be pretty obvious but let’s spell it out. When the application is run there’s only the one component included in our main index.html file and that is the my-app component (designated by the <my-app></my-app> tags). Of course I’ll change the name of this to something more meaningful later on but that’s where we are, now.

In order for the LessonComponent to be included I have to add it somewhere. So, in order to do this, I’m going to import the LessonComponent into my AppComponent by adding

import {Video} from “./data.video”;
import {LessonComponent} from “./component.lesson”;

to the components.app.ts file. I’m also adding the Video class component as I’ll need it, later. In addition, to actually include it in the AppComponent, in the AppComponent @Component definition as a new property definition called directives.

@Component ({
    selector: ‘my-app’,
    templateUrl: ‘app/markup/component.app.html’,
    directives: [LessonComponent]
})// Component;

Sharp eyes will also noticed that I’ve spun off the markup into its own HTML file which I’ve put under the markup folder and called component.app.html, in order to stay consistent. It should also be noted, as Bucky points out, that the bindings are still legitimate in the templates so the component.app.html file still includes the heading variable surrounded by two pairs of braces.

Also note that directives are encapsulated by braces, essentially making them an array. Now I’m going to set up my list of videos and I’m going to do that by extending my AppComponent class. I’ll add a new variable which I’ll call lessons which will be an array of the video class that I created earlier. Actually, I’ve gone ahead and changed the Video class to a Lesson class and have renamed the file accordingly (data.lesson.ts). Again, I’m going to initialize it to null – values will be set in the constructor.

lessons: Array<Lesson> = null;

I’ll also add code to the AppComponent constructor to populate this array. For the moment I’m just going to include the first two of Bucky’s tutorials and I’m going to hard code them. Later I’ll change them to read from another source (a database).

    constructor () {
        this.lessons = [
            new Lesson (1, 1, “Lesson 1”, “hXfigUyeHaY”, “First lesson in Bucky’s Angular 2 for Beginners series”),
            new Lesson (2, 1, “Lesson 2”, “vc9n0j6-D2U”, “Second lesson in Bucky’s Angular 2 for Beginners series”)
        ]/* this.videos */;
    }// constructor;

This creates an array and each item in the array is one of the Lesson class objects. I’ve manually numbered them – the first parameter is the lesson number (lesson_id) and the second is the course number (course_id). Because they’re all part of the same course and it’s currently the only one I have they are both course number 1. Later on when I have code to add new lessons these IDs will be populated automatically by the database in an auto-increment field but, for the moment, I’ve just added them manually.

 

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *