Templates In Angular

Introduction

 

In this article, we are going to discuss about the basics of templates in Angular . 

 

Overview

 

We are going to discuss the below points:

• Templates basics
• Types of Templates
• Elements of Templates
• Implementation of Event  

What is Template

 

Templates in Angular represents a view whose role is to display data and change the data whenever an event occurs. It's default language for templates is HTML. 

 

Why Template

 

Templates separate view layer from the rest of the framework so we can change the view layer without breaking the application.

 

How to create template

 

There are two ways of defining templates,

1. Inline Template
2. External Template

First we are going to discuss about Inline template. So lets get started.

 

Inline Template

 

We can create template inline into component class itself using template property of @Component decorator. 

 

Open HiComponent.ts file and add the below line of code into @Component decorator,

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

@Component({
  selector: 'app-hi',
  template: `
  <h1> Welcome </h1>
  <h2> Name: {{ Name }}</h2>
`,
  styleUrls: ['./hi.component.css']
})
export class HiComponent implements OnInit {
  Name : string = "XYZ";
  constructor() { }

  ngOnInit(): void {
  }
}

Line 5-8: We can even write HTML code inside components using template property. Use backtick character (`) for multi-line strings.

 

Now run the application and you will see the below output screen,

 

External Template

 

By default, Angular CLI uses the external template. It binds template with a component using templateUrl option. TemplateUrl is used in External format where as in case of

intline Template we use template instead of templateurl.

 

Now open Hi.component,html and add the below line of code:

<h1>Hello</h1>
<h2>Name : {{Name}}</h2>

Observe the output screen and you will see the below output on the screen:

 

Elements of Templates

1. HTML
2. Interpolation
3. Template Expressions
4. Template Statements 

Let's start with the explanation of each one of the template elements  

 

HTML

 

Angular uses HTML as a template language. 

 

Interpolation

 

Interpolation is one of the forms of data binding where we can access a component’s data in a template. For interpolation, we use double curly braces {{ }}. 

 

Template Expressions

 

The text inside {{ }} is called as template expression.

 

Ex,

{{Expression}}

Angular first evaluates the expression and returns the result as a string. The scope of a template expression is a component instance. That means, if we write {{ Name }}, Name should be the property of the component to which this template is bound to.

 

Template Statements

 

Template Statements are the statements which respond to a user event.

(event) = {{Statement}}

Ex : lets create an click event - Add changename() method inside hi.component.ts file as below,

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

@Component({
  selector: 'app-hi',
  templateUrl: `./hi.component.html`,
  styleUrls: ['./hi.component.css']
})
export class HiComponent implements OnInit {
  Name : string = "XYZ";
  changeName() {
    this.Name = "ABC";
}
  constructor() { }
  ngOnInit(): void {
  }
}

Now open hi.component.html and add the below line of code inside it,

<h1>Hello</h1>
<h2>Name : {{Name}}</h2>
<p (click)="changeName()">Click here to change</p>

Here, changeName() method is bound to click event which will be invoked on click at run time. This is called event binding

 

Now observe the output screen in the browser,

 

Output after clicking. When user clicks on the paragraph, course name will be changed to 'ABC'

 

Summary

 

In this article, we have discussed about templates basics, types of templates, elements of templates and implementation of the events. Hope you like the article. Until next time- Happy Reading  Cheers