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.

 

 

 

 

 

 

 

 

 

 

Surviving unemployment

I’m out of work.

But this isn’t to say that my life is over, in fact, quite the opposite. I see it as an opportunity to reinvent myself and to take the steps to create a more fulfilling and rewarding life for myself, just as I did when I was forced to deal with divorce.

Following is a few things that I’ve learned being on the unemployment queues. Unemployment can be a debilitating situation if you’re not careful – your self-esteem can go way down and, if you’ve been out of work for a while you can begin to wonder if you’ll ever get a job again.

But it needn’t be an unpleasant experience. In fact, if you go about your situation methodically and stay in control of your life you can find the situation manageable and even rewarding. Here are a few tricks for staying on top on the unemployment queue.

  1. Remember, you are not on vacation. You have a new job now, and your job is to find a job which, in itself, can be a full-time occupation. It’s common to take a few days off to re-adjust to your situation and a few days of mourning is forgivable and even appropriate. So, when you know that unemployment is imminent (you may have been let go, your company may be downsizing and you’ve been laid off or, like I often experience as a contractor, your contact may have been terminated or completed) designate a few days to unwind and contemplate your options. Make sure you write these down – mark the days in your calendar that you’re going to take as vacation time (no more than a week and, ideally only a couple of days) and then, go back to work!
  2. Come up with a plan for what you’re going to do next. This may be a good time for a career change or, perhaps (particularly in my occupation) to learn about the next generation of innovations in your particular field. Try to study something that will keep you ahead of the curve and will ensure some job security in your next position, perhaps a branch of your field that will make you a specialist. Research what is in demand and try to target those. Write these down so that you have something to measure your progress against and review it with every move you make. Not only will this help you keep track of your progress but it will also give you a sense of satisfaction. One of the biggest mistakes the unemployed make is to wade through life on a day to day basis, wallowing in regret and self-pity. Take control of your life and the experience can not only be tolerable but even rewarding.
  3. Make sure you keep an active social life. 90% of jobs that are filled are never advertised. Join a club (or several clubs) – I recommend Toastmasters International as it is a professional organization that can offer many opportunities. Attend job fairs and never hesitate to go out with the boys or the girls for a night out. Just make sure you watch your pennies. A good friend will recognize your situation and will not make undue financial demands on you and your friends may even be able to network on your behalf. Just make sure that you thank them for their support and are willing to support them should they ever be in the same situation. That’s one of the many things that make friends friends – they support each other.
  4. Watch your pennies! If you haven’t already done so list your income (probably from unemployment), your expendable assets, and your financial commitments (rent, electricity etc.). Make sure that you can live within your means until such time as you’re back on the job. Document your every expense – if something is going to drive you into abject poverty, don’t do it unless it’s completely unavoidable.
  5. Make your bed. Literally. Again, you’re not on vacation so set your alarm clock like you would if you were still working, take a shower, get dressed (dress for the job you want – iron a shirt if that’s what you used to do) and make a daily schedule for yourself. It should involve trolling the want ads and applying for positions, a certain amount of time for study and, yes, cleaning your house. Make your bed, make sure the dishes don’t pile up in the sink and keep your living space tidy. This will not only give you a sense of accomplishment but will also remind you that you’re not on vacation and will help to prevent you from falling into despair – your job is to find a job. Write the schedule down and check it off as you complete each task.
  6. Take a lunch break. Set your hours – eight of them per day. It is vital that you consider yourself still employed and adopting a standard work schedule is the most important part. If your occupation requires an eight-to-five schedule with an hour for lunch then continue to do that. Set lunch for a certain time and make sure that you clean up after yourself.
  7. Keep the TV off and the phone on. If you’re using a computer to find work (and you should – job sites and email are essential tools for finding employment) then keep the games in the toybox. Again, and I can’t stress this highly enough, you are not on vacation so “vacationy” type things are off-limits during work hours. Answer every phone call – even collections calls and you will probably get plenty of those. Work leads can come from the most unlikely sources and avoiding the phone is avoiding an opportunity. Collection calls can be demeaning but don’t take it personally. The person on the other end is simply doing their job and if you calmly and rationally explain that you’re out of work then most collection agencies will understand and may even be able to offer suggestions to get you back on your feet. If they don’t and are pushy (as many are) then, at the very least, you have not shunned a potential opportunity.
  8. Take weekends and standard work holidays off (Christmas, Memorial Day, Labor Day, 4th of July etc. – or whatever holidays apply to your country) If you follow the rules as mentioned then you will deserve them just like any other working stiff and you will be able to enjoy them more knowing that you’ve done your best to get work.

But most of all, stay optimistic. When opportunity knocks most people are out the back taking out the trash but, when one door closes another one opens and, if not, open one yourself.

These few simple tricks help keep me sane while out of work and, like I said, as a contractor I face this situation often. It works for me and I hope that it will work for you 🙂

 

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.

 

 

 

 

 

 

 

 

Lesson 6 – Creating our first component

In this video we’re expanding on the knowledge that we’ve already received in the previous lessons. In this section, again following Bucky’s lead, I’m going to create a class that contains the video titles. At some point in the future I’ll expand on this class to include the testing portion and, most likely, read the values from a database because I’ll also want to create an administration CMS (Content Management System) that will allow me to create other lessons without having to hard-code them in the A2 program.

Besides making the program more dynamic, it also allows for a separation of concerns, where the code is separate from the data and is also separate from the markup, which I love and Bucky mentions, later.

I’m going to start by creating a new class which I’ll call videos and will put into a file called data.video.ts. Again, I’m putting the type of class at the front of the name in case I have other “data” type classes so that they’ll all be listed together. Like Bucky, I will include an ID, a video code, a title and a description. These will be my eventual fields in the database. But, here again, I’m going to deviate a little bit. My eventual application will include several courses with several sets of videos and assessments. Therefore, I’m going to have two ID fields: one for the the lesson (instead of “video”) and one for the course. I’ll name these lesson_id and course_id, respectively.

These simply get listed in the class, name followed by colon followed by type, but since none of the values get filled in Bucky opts to leave it at that. In keeping with my methodology, I’m going to explicitly set them to null (meaning “no value”). I’m also going to set an access modifier on them all – eventually, I won’t want them to be publicly accessed but for the moment I’m going to set them all to public.

The resulting class looks like this (including a constructor):

export class Video {

public lesson_id: number = null;
public course_id: number = null;
public title: string = null;
public video_code: string = null;
public description: string = null;

constructor (lesson_id: number, course_id: number, title: string, video_code: string, description: string) {

this.lesson_id = lesson_id;
this.course_id = course_id;
this.title = title;
this.video_code = video_code;
this.description = description;

}// Constructor;

}// Video;

Now, having created the class, I’m going to need a component to display that information, and the information is for our lessons, so I’ll create a new component file called “component.lessons.ts”. This will include the information needed to display each of the lessons (and, eventually, the videos and quiz questions).

This component, of course, needs the A2 core library so I’ll include the import statement (like I did in the app component) and will include a @component statement. It will have a selector which I’ll call lessons. At this point, however, we introduce something new: the concept of code and markup separation which I alluded to earlier. Rather than having all of our markup code in the template property (which could easily get out of hand) I’m going to use the templateUrl property, instead.

This property allows us to include a URL instead of a template string which will let me put the HTML in a separate file. Also, Bucky points out that in order for this to work you need to have a full path so I’m going to capitalize on this feature and I’m going to create a new folder under my app folder which I’m going to call markup. This way I can keep my JavaScript files separate from my TypeScript files separate from my HTML files. Like Bucky I’m going to use the same filename but with an HTML extension: app/markup/component.lessons.html.

Of course I’ll need to export the class by giving it a name (like I did with the component.app.ts file) and I’ll call my class LessonComponent.

export class LessonComponent {}

It’s empty but that’s fine for now. I’ll populate it in the next lesson.