DEV Community

loading...

Angular Template Syntax

bipon68 profile image Bipon Biswas ・3 min read

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

Alt Text

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

Alt Text

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

  • Bipon
  • Arif
  • Mahfuz

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

Alt Text

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:

Alt Text

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:

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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

Alt Text

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:

Alt Text

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

Alt Text

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:

Alt Text

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

Alt Text

Output

Alt Text

Reference
Also more
Template Syntax

Discussion

pic
Editor guide