Angular Template Syntax

Angular Template Syntax

Objective: In this article, you will use the Angular template syntax to bind view content to properties of your component class.

Pre-requisite Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

Setup

1. On your local machine, open Visual Studio Code.
2. Go to the File menu and select the Open Folder option.
3. Create a new project for this exercise and select this folder.
4. Create a new project command: ng new angular-medium
5. Create a new project: open terminal by Ctrl + backtic(`) key then run ng new angular-medium command

Add Properties to the AppComponent Class

1. Within the app folder, open the app.component.ts file.
2. Within the AppComponent class, add a new property of type number named count with a value of 2:

export class AppComponent {  
    public count : number = 2;  
}

3. Within the AppComponent class, add a new property of type boolean named indicator with a value of true:

export class AppComponent {  
    public count : number = 2;  
    public indicator : boolean = true;  
}

4. Within the AppComponent class, add a new property of type string[] named nameList with the following values:

• Bipon
• Arif
• Mahfuz

export class AppComponent {  
    public count : number = 2;  
    public indicator : boolean = true;  
    public nameList : string[] = ['Bipon', 'Arif', 'Mahfuz'];  
}

5. Within the AppComponent class, add a new property of type string named title with a value of Template Binding:

export class AppComponent {  
    public count : number = 2;  
    public indicator : boolean = true;  
    public nameList: string[] = ['Bipon', 'Arif', 'Mahfuz'];  
    public title : string = 'Template Binding';  
}

Add the Forms Module

1. Within the app folder, open the app.module.ts file.
2. Add an import statement to the top of your file that imports the FormsModule module from the @angular/forms package:

import {FormsModule} from '@angular/forms';

3. Update the NgModule decorator by adding the FormsModule module to the values in the import array property of the NgModule decorator:

@NgModule({  
    imports:      [   
        BrowserModule,  
        FormsModule  
    ],  
    declarations: [   
        AppComponent  
    ],  
    bootstrap: [ AppComponent ]  
})  
export class AppModule { }

Use the Angular Template Syntax

1. Within the app/views folder, open the app.component.html file.
2. Delete the existing HTML content.
3. Add a new h2 element to the HTML content:

<h2></h2>

4. Within the h2 element, add a binding to the title property of the component class:

<h2>{{title}}</h2>

5. Add a new form element to the HTML content:

<h2>{{title}}</h2>  
<form>  
</form>

6. Within the form element, add a new fieldset element:

<form>  
    <fieldset>  
    </fieldset>  
</form>

7. Within the fieldset element, add a new legend element with the content Indicator:

<fieldset>  
    <legend>Indicator</legend>  
</fieldset>

8. Within the fieldset element, add a new input element with the type checkbox:

<fieldset>  
    <legend>Indicator</legend>  
    <input type="checkbox" />  
</fieldset>

9. Update the checkbox input element to bind it’s model to the indicator property:

<input type="checkbox" [(ngModel)]="indicator" />

10. Within the form element, add another new fieldset element:

<fieldset>  
        <legend>Count</legend>  
        <input type="range" min="0" max="5" step="1" [(ngModel)]="count" />  
    </fieldset>

11. Within the ol element, add a li element:

<fieldset>  
    <legend>Messages</legend>  
    <ol>  
          <li>  
          </li>  
    </ol>  
</fieldset>

12. Update the li element to use the ngFor looping syntax to create a for loop over the nameList property using a name variable for each item:

<li *ngFor="let name of nameList">  
</li>

13. Update the content of the li element by binding it to the name variable within the loop:

<li *ngFor="let name of nameList">  
    {{name}}  
</li>

14. Also added few fieldset element. Finally your HTML content in app.component.html should now look like this:

<h2>{{title}}</h2>  
<form>  
    <fieldset>  
        <legend>Indicator</legend>  
        <input type="checkbox" [(ngModel)]="indicator" />  
    </fieldset>  
    <fieldset>  
        <legend>Count</legend>  
        <input type="range" min="0" max="5" step="1" [(ngModel)]="count" />  
    </fieldset>  
    <fieldset>  
        <legend>Name List</legend>  
        <ol>  
            <li *ngFor="let name of nameList">  
                {{name}}  
            </li>  
        </ol>  
    </fieldset>  
    <fieldset>  
        <legend>Results</legend>  
        <ul>  
            <li><strong>Indicator:</strong> {{indicator}}</li>  
            <li><strong>Count:</strong> {{count}}</li>  
            <li><strong>Title:</strong> {{title}}</li>  
            <li><strong>Name List:</strong> {{nameList}}</li>  
        </ul>  
    </fieldset>  
</form>

Output:

Angular Template Syntax Example

Reference

Also more

Template syntax