Angular - Template statements

---

---

What are Template Statements?

Template statements are used to interact with users through events in the HTML document. They allow the developer to call the components method in response to the users action. Also, it allows the developer to write simple logic in the template itself with multiple statements separated by colon (;). Let's learn more about the template statement in this chapter.

Syntax

Template statement is similar to JavaScript expression with the below exceptions.

• Compound assignment operators: The template statement does not support compound assignment operators (+= and -=). Compared to the template expression, the statement supports the normal assignment operator (=).

• The new keyword: Template does not allow the creation of new objects. All objects should be created in the component class. An object created in the component will be available in the template.

• Increment and decrement operators: Template does not allow side effects. Since the increment and decrement operators do the side effects, they are excluded.

• Bitwise operator: Bitwise operators (| and &) are not supported.

• Pipe operator: Template statement does not support pipe (|) operator.

How to use Template Statements in the Template

Template statements can be written inside the double quotes and set as the value of components or elements event property as shown below −

<button (click)="<statements>">Click here</button>

Here,

• (click) represent the click event of the button. It uses event binding concept, which is explained in the Event binding chapter.

• <statement> can be any template statement as specified in the previous section.

Template Statement Context

Similar to template expression, template statement has three contexts, which are:

1. Components property/method: Component's property/method is the property/method set in the components instance. For example, a user object (user) in the component can be used in the template as follows,

<button (click)="showUser(user)">Show user</button)

Here, the context of user property and showUser() method is components instance.

2. Template input variable: Template input variables are input to the template assigned through directives. For example, ngFor directive sends the index and current item of the loop to the template as shown below −

<ul>
   <li *ngFor="let user of users" (click)="showUser(user)">{{user.name}}</li>
</ul>

Here, the context of user property is template input variable.

3. Template reference variable: Template reference variable is basically a representation of HTML elements, components and directives in the given template as shown below −

<input #user /> <span>{{ user.value }}</span>
<button (click)="showUser(user.value)">Show User</button>

Here, the context of user & user.value is template reference variable.

The precedence of context in case of name collision is as follow,

• Template variable

• Variable in the directives context

• Components member variable and method

The angular team recommends using complex logic in the components method and calling it through a template statement instead of trying to write the logic in the template itself using a template statement.

Example

Let us consider a simple scenario of show/hide a section through user's action.

Step 1: Create a new application using angular CLI as shown below −

$ ng new my-app

Step 2: Create a component, BlockWithShowHide using angular CLI as shown below −

$ ng generate component BlockWithShowHide
CREATE src/app/block-with-show-hide/block-with-show-hide.component.css (0 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.html (35 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.spec.ts (639 bytes)
CREATE src/app/block-with-show-hide/block-with-show-hide.component.ts (255 bytes)

Step 3: Next, open the component file, src/app/block-with-show-hide/block-with-show-hide.component.ts and add a variable, hideStatus to represent the show / hide status

hideStatus: boolean = false;

Step 4: Next, add two method, show() and hide() to change the value of hideStatus variable with respect to the users action.

show() {
   this.hideStatus = false;
}

hide() {
   this.hideStatus = true;
}

Step 5: Next, open the components template file, src/app/block-with-show-hide/block-with-show-hide.component.html and a block with two buttons,

<div>
   <div>
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button>Hide the section</button> 
   <button>Show the section</button>
</div>

Step 6: Next, add click event to the button and the corresponding method as shown below −

<div>
   <div [class.hide]="hideStatus">
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button (click)="hide()">Hide the section</button> 
   <button (click)="show()">Show the section</button>
</div>

Step 7: Next, add a class property binding, class.hide with value hideStatus in the block to be shown / hidden.

<div>
   <div [class.hide]="hideStatus">
      <p>Hi, I am simple section created for the testing purpose<p>
   </div>
   <button (click)="hide()">Hide the section</button> 
   <button (click)="show()">Show the section</button>
</div>

Here,

• class.hide represents the hide CSS class and it will be set if its value hideStatus is true.

Step 8: The complete listing of the component is as follows,

import { Component } from '@angular/core';

@Component({
   selector: 'app-block-with-show-hide',
   templateUrl: './block-with-show-hide.component.html',
   styleUrls: ['./block-with-show-hide.component.css']
})
export class BlockWithShowHideComponent {
   hideStatus: boolean = false;
   
   show() {
      this.hideStatus = false;
   }
   
   hide() {
      this.hideStatus = true;
   }
}

Step 9: Next, add hide CSS class in the css file, src/app/block-with-show-hide/block-with-show-hide.component.css

.hide {
   display: none;
}

Step 10: Next, open the app components template file, src/app/app.component.html and add our component as shown below −

<app-block-with-show-hide />

Step 11: Finally, run the application and check whether the block is shown/hidden based on the users action.

Summary

Template statement enables the application to interact with users in a safe and effective method without sacrificing the flexibility in coding and rich user experience of the application.