Lesson 8 – Passing data to components

In this lesson we’re going to look at how to pass the array of lessons that we created in the last lesson into the LessonComponent so that they can be used in the template markup and, thus, shown to the screen. In order to do this we use a technique known as “Attribute Binding” which, to quote Bucky, is how to send data from one component to another.

In the main component html, I’m going to add a new tag called lessons in which I’ll add a new property. The property name is encased in brackets. The value of this property is going to be the name of name of the class variable you want to use – in our case it’s going to be the lessons variable that I included in my AppComponent class which, if you’ll recall, is an array of lessons. So it will look like this:

<h1>{{ heading }}</h1>
<lessons [lessons]=”lessons”></lessons>

To avoid confusion I think I’ll rename my tag from lessons to course (if you’re following along with the video, this is the equivalent to Bucky’s playlist). To do that I’ll change it here in the HTML and also in the selector in component.lesson.ts.

Now here I found a problem. Bucky claims that you can set the name of the property in the tag to whatever you like but I found that doing so breaks the code. Initially, I tried to change the property name from “lessons” to “lesson_list” as this seemed more mnemonic, like so:

<course [lesson_list]=”lessons”></course>

But I found that this doesn’t work. The name of the property has to be the same as the name of the variable that you’re using so it must be:

<course [lessons]=”lessons”></course>

If anyone can tell me I’m wrong I’d love to hear it – please leave a comment in the comments section, below.

I think I’m also going to change the name of my LessonComponent to CourseComponent (and, respectively, its filename to component.course.ts and its corresponding HTML file to component.course.html) so that this distinction between courses and lessons is made more clear. Don’t forget to change the name in the import statement in the app component, too, as well as the directive statement in the AppComponent @Component statement (called a “decorator”).

While I’m at it, why don’t we just go ahead and change the decorator’s selector name from my-app to something more meaningful? I’ll call it “virtual-diploma” so that we know that this is the main app tag (corresponding with the name of the application). I’ll change it in the decorator in component.app.ts as well as in the main index.html file where it is used as an HTML tag.

Now, why am I doing all of this name changing? Apart from the fact that these names become jumbled as the application becomes more complex (in a strict development environment it’s wise to carefully consider the names before using them), repetition is the key to learning. By changing these names it forces me to go back over what I’ve already created to make sure I understand what correlates with what.

Anyway, to continue.

In my HTML file for the course (component.course.html) I’m going to create my list of the lessons in the course. It’s a simple table, just like Bucky’s, with the ID, the title and the description. ID will become arbitrary when auto-increment is implemented so I’ll probably add another ID field that is a populated incremental number of the lesson index (first lesson is “1”, second is “2” and so on) but for the moment I’ll just use the ID as entered in the array.

So, it’s a simple table like Bucky’s (without the Bootstrap – I’ll deal with that in a separate series) and looks like this:

<table>
    <thead>
        <tr>
            <td>ID</td>
            <td>Title</td>
            <td>Description</td>
        </tr>
    </thead>
    <tbody>
        …
    </tbody>
</table>

The part where the ellipsis appears is going to be where I put a loop in order to iterate over all of my array items and give each one its own row. So, in the <tr> tag I’m going to add a new property – a predefined A2 property called *ngFor which acts like a for statement in other languages. The value of this is going to be an item identifier and the array that we’re getting the values from. I’m going to use my favorite “item” for each line item. The resulting table row tag is going to look like this:

<tr *ngFor=”#item of lessons”>

Note the hash character (#) in front of my item variable – this is the syntax for declaring the for variable in A2 (and may be used in other places as well – I don’t know). Now, for each of those items I’m going to list the ID (the lesson ID), title and description in table cells, corresponding with the table header that I wrote earlier. Each property will be prefixed with the item variable followed by a period followed by the property name. As I’m outputting variables I’m going to use the same data binding syntax that I used with the application header (i.e. two nested sets of braces):

<tr *ngFor=”#item of lessons”>
     <td>{{ item.lesson_id }}</td>
     <td>{{ item.title }}</td>
     <td>{{ item.description }}</td>
</tr>

Now, when I restart my application I see each of the data items listed in the array created in the component.app.ts class listed as separate items in my table.

 

 

 

 

 

 

 

 

 

 

Leave a Reply

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