Angular - Templates

Previous
Quiz
Next

What is an Angular Template?

Template is a small part of an Angular application's user interface(UI). It is written in HTML and its use is to generate the view of a component to be rendered in the browser. Since the purpose of an angular template is to produce only a chunk of HTML and not a complete HTML document, it does not support a few HTML elements, which are <html>, <body> and <base>. The <script> tag is not supported intentionally to prevent script injection in the final angular application.

Relation between Template and Component

Angular Component controls how a view should be displayed on the browser screen. It consists of a TypeScript class and CSS style along with an HTML template. Templates can be found inside the metadata of a Component defined using the template property or linked using the templateURL property. We can conclude that the Component generates the view with the help of Template.

relation between component and template

Ways to Define Templates in Angular

There are two ways in which we can define Angular Templates −

  • Inline: We can create a template using the template property of the @Component decorator directly in the component class file.

  • External: It is the default way of creating a template. It uses the templateUrl property to link a template to a Component.

The Angular Views

Angular provides a rich set of features to create a user interface of the application. A portion of the user interface in an angular application is called View. Angular Views are basically a chunk of HTML/DOM structure represented immediately in the memory during the execution of an angular application and are rendered into the final HTML markup.

Each component in an Angular application has an associated view, known as a component view, which is created from the template associate with the component. This template and component instance have dynamic interaction between them. The template receives data from the component and sends data back to the component as well.

Features of Angular Template

In addition to HTML, The Angular template supports additional features to create dynamic content and to provide rich interaction with components. These additional features are −

  • Text interpolation
  • Text transformation through angular pipes
  • Template Statements
  • Data Binding
  • Directives
  • Template Variables

Text Interpolation

Text interpolation is the usage of a component's data in its template using the template expression. Let us consider that a component has a name as one of its properties.

export class HomeComponent {
   name: string = 'John'
}

Then, name can be used in its template as shown below −

Hello {{ name }}

Please note that the double curly brace is used to specify the template expression.

Text Transformation through Pipes

Text transformation can be done in the template using pipe symbol (|). Angular template provides a unique feature called Angular pipes, basically a javascript function, which accepts input along with modifiers through arguments and transforms the input data from one format to another and renders it. Angular has many built-in pipes for date, currency, etc., and also provides an option to create new, customized pipes.

Let us consider a simple component, CurrentTimeComponent to show the current time along with the date.

export class CurrentTimeComponent {
   currentDate : date = new Date()
}
<div>
   The current date and time is {{ currentDate | date:'short' }}
</div>

Here, the date is the pipe function (datePipe) and short is its argument. This will show the current date with time in a simple format as shown below

<div _ngcontent-ng-c323970836="">
   The current date and time is 7/29/23, 3:35 PM
</div>

Template Statement

Template statements are used to interact with users through events in the HTML document. They are similar to JavaScript expressions with few exceptions and few additions.

Let us consider a simple scenario of show/hide a section through user's action. The component will have a hide() method to hide and another method show() to show the section. The component's template will have two buttons to fire the show and hide action. The click event of the buttons will be set with show/hide method through template statement.

export class MySectionComponent {
   hideStatus: boolean = false;
   
   show() {
      this.hideStatus = false;
   }
   
   hide() {
      this.hideStatus = true;
   }
}

Here, hideStatus is a boolean property of the component used to set/remove the CSS class, hide in the section element. show() and hide() are two method to execute the action of setting / remove the css class from the section element.

.hide {
   display: none;
}
<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>

Here, hide() and show() are template statements used to set the action for click event of the buttons. [class.hide]="hideStatus" is class binding concept available in angular template, which we will learn in upcoming chapters.

Data Binding

Binding is the process of connecting a target in the template and an expression or statement based on model of the component to which the template belongs. Text interpolation is the simplest form for binding and angular provides many types of binding. They are as follows,

  • Text interpolation: Text interpolation is the process of connecting model of a components instance to the text portion of components template

  • Attribute binding: Attribute binding is the process of connecting model of a components instance to the attribute of a (target) HTML element in the components template

  • Class and style binding: Class and style binding is the process of connecting model of a components instance to the class and style attributes of a (target) HTML element in the components template

  • Property binding: Property binding is the process of connecting model of a components instance to the property of a (target) HTML element / other component in the components template. Angular exposes the attributes of HTML element as properties with attribute names converted to CamelCase. This will help to connect all attributes of the HTML element through property binding.

  • Event binding: Event binding is the process of connecting the model of a components instance method to the event of a (target) HTML element / (another) component.

  • Two way data binding: Two way data binding is a combination of property and event binding to sync data between parent and child component.

Directives

Angular provides an excellent feature, Directive to add additional behavior to any existing HTML elements or components in a generic way. In addition to creating new directives, angular provides a default set of directives to provide additional functionality like condition (ngIf) and loops (ngFor) (which are not available in the angular tempaltes) to the HTML elements and component. We will learn the complete set of built-in directive in the later chapter.

A simple example of using ngIf directive to show or hide a target element is as follows,

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

@Component({
   selector: 'app-my-section',
   templateUrl: './my-section.component.html',
   styleUrls: ['./my-section.component.css']
})
export class MySectionComponent {
   showSection: boolean = true;
}

Here, showSection is a variable in the component having truthy value.

<div *ngIf="showSection">
   I will be shown based on the `showSection` property in the component's
   instance.
</div>

Here, showSection is the condition (template expression) used by ngIf to decide whether to render the div element. If the condition succeeds, it will render the div element; otherwise, it will skip the rendering of the element.

If the showSection value is changed to false, then the section will not be shown.

Template Variables

The Template Variable is basically used to reference any one of the below items in the template.

  • HTML element
  • Directive
  • Component
  • Template inside template (ng-template)
  • Web component

Let us create a reference to a input element and span element and show the value entered in the input element to the span element.

<input #source /> <span #target></span>

<div style="padding-top: 5px;">
   <button (click)="target.innerText = source.value;">Show</button>
</div>

Here,

  • source is the template variable referring to the input element.

  • target is the template variable referring to the target span element.

  • When the user clicks the button, the click event will fire and run the statement specified inside the event and set the data entered by user into the span element.

Summary

Templates in angular provide a lot of options to generate UI fragments quite effectively. It supports great interaction with component instances to sync the data. It prevents the script injection and improves the predictability of the template output by avoiding the side effects in the template.

Multiple Choice Questions on Angular Template

In this section, test your understanding of the angular template by giving correct answers to the questions given below −

Answer : C

Explanation

In Angular, we use template to generate the view of a component, which will be rendered in the browser.

Q. 2 - Which HTML elements are not supported in Angular templates?

A - <html>

B - <body>

C - <script>

D - All of the Above

Answer : D

Explanation

Since the purpose of an angular template is to produce only a chunk of HTML and not a complete HTML document, it does not support <html>, <body>, <base> and <script> tags.

Answer : A

Explanation

The *ngIf directive is used to conditionally include or exclude an HTML element based on an expression. If the expression evaluates to true, the element is added to the DOM; otherwise, it is removed.

Print Page
Previous
Next
Advertisements