Angular Template Syntax
Tags: angular, template, syntax
Published: 2020-11-30 07:51:39

---
title: Angular Template Syntax
published: true
description: Angular template syntax to bind view content to properties of your component class
tags: angular, template, syntax
//cover_image: https://direct_url_to_image.jpg
---

**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](https://dev-to-uploads.s3.amazonaws.com/i/njtjdce7y7g2e6gk6m1r.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/re3svbtn7jwbnzfjz2ym.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/x7d5vcg96gyq2ej728ho.PNG)

**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](https://dev-to-uploads.s3.amazonaws.com/i/z66gxcdyf2m3mp1edhgv.PNG)

**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](https://dev-to-uploads.s3.amazonaws.com/i/utqgswulvbive63kng0q.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1mom7za01ga6539tjovf.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m4kpnjphfdb5nop9y8up.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qbq9c7fybc9rc3dxdh3f.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iom6a9hivactu5dv93kr.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/zw30hh0mpxn9z7qki395.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0schb8dlvas75glgekhy.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/i/n2p30phknd49ovaoms6e.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mtjj5ikctpm74ck0nbij.PNG)

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xs9ukxd3cg03dkcftoc9.png)


**Reference**
[Also more](https://medium.com/angular-in-depth/angular-mastery-template-syntax-194bffe2ad6f)
[Template Syntax](https://angular.io/guide/template-syntax)