Lesson 5 – Data binding and variables

In this next section we actually get down to creating our application in a more fleshed out version rather than just creating a “hello world!”

Remember that my goal is a tutorial and Q&A website so Bucky’s steps are in line with mine – he wants to create a video file list and so do I so, for the moment, I’ll just be following his lead. As I get further into the project I might begin to deviate from his strict code as I implement features that I need that are different from his needs.

So back to the code.

In this video Bucky introduces us to variables. Instead of simply specifying text in the component template (@component ({template: “xxx”});) we’re going to be setting this to a variable defined elsewhere (specifically in the component class that we created in lesson 3 in the app.component.ts file). In the component class we’re going to add a variable name followed by an initializer (I’m using the text “Virtual Diploma” as this is the name of my expected, final product) like so:

export class AppComponent {
    heading = “Virtual Diploma”;
}// AppComponent;

Now, a couple of points here where I deviate from Bucky. First of all, I didn’t like the convention


Why? Because if you have a whole bunch of these (and you will) then your components get all mixed up with your other code files when the file list is sorted (which Visual Studio does automatically and so does WebStorm by the look of the video). So, instead I’m going to prefix my component files with “component”, like so:


That way all of the component files will be grouped together. The other place where I do things differently is that I always add a comment to my closing brace which corresponds to the command of the opening brace. Notice how I’ve added:


to my closing brace? That way if the opening brace and the closing brace encapsulate code that is more than a screenful then I don’t have to scroll up to see what the closing brace is closing. It is also useful for detecting extraneous braces, both of which happen quite frequently.

Anyway, to continue.

The variable that we’ve created in the component class can now be used in the component template. Where we had:

    selector: ‘my-app’,
    templateUrl: ‘<h1>Virtual Diploma</h1>’,
})// Component;

we replace it with:

    selector: ‘my-app’,
    templateUrl: ‘<h1>{{ heading }}</h1>’,
})// Component;

Whenever variables are used in a template they’re surrounded by two sets of braces nested together as shown above. I’ve opted to include a space before and after (forget what I said about spaces inside parentheses, here – this is different and I think it makes it more readable) but from my experience it doesn’t seem to matter. You can leave these out if you like.

Now, in this situation, where the variable is used only once this will suffice, however, there will be situations where you want to use the same variables in different parts of your program or globally. In order to do this I’m going to set up a separate global class in which I’ll put my title as a static variable or constant (“static variable” is a contradiction because once a value is static, it’s not variable anymore).

So, I’ll create another class and I’m going to deviate from Bucky again, here. I’m going to call my file config.settings.ts (Bucky calls his config.service.ts). I’m going to call my class Config, too and, in it I’m just going to put my constant for the header (called main_header). It uses the keyword static, has a type definition and  looks like this:

export class Config {
    static main_heading: string = “Virtual Diploma”;
}// Config;

Very simple. Now I can use this class in my components.app.ts file. I’ll set my class variable for heading in the AppComponent class to this value and then, when the page is called the template will bind to this value:

export class AppComponent {
    heading = Config.main_heading;
}// AppComponent;

In order for the components.app.ts file to get access to this constant I’ll need to add an imports directive to my file, just like the one I added to include the Component class from the A2 library:

import {Config} from “./config.settings”;

Now, when I need to change the title (which I will have used all over the place and when someone presents me with a cease and desist order for copyright infringement – I don’t know if there’s already a “Virtual Diploma” out there but I wouldn’t be surprised – for example, then I don’t have to change it everywhere in my program – I just change it here and it will be reflected everywhere.


























Leave a Reply

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