Templates In Angular

Templates In Angular

Introduction

For this post, we will look at the basics of templates in angular.

Overview

We will examine the following points:

  • Templates fundamentals
  • Template Types
  • components of Templates
  • The updation for the Event

What exactly is Template

Templates in Angular are views that are used to display information and modify the information whenever it occurs. The default language to display templates is HTML.

To get in-depth knowledge of the template in angular, fetch with AngularJS Training in Chennai to get a deep understanding of template in angular.

Why Template

Templates distinguish their view layers from all the other framework components, so we can alter views without breaking applications.

How do you make the template?

Two methods of defining templates.

  1. Inline Template
  2. External Template

In the beginning, we’re going to look at the Inline template. Inline template. So let’s start with the angular template example.

Inline Template

It is possible to create a template within the component class by using the template property of the decorator @Component.

Note: If you want to become a dynamic website developer, take AngularJS Online Course at FITA Academy and become an expert in dynamic website creation.

Start the HiComponent.ts file, then add the following line of code into the decorator for @Component.

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 8: We can also write HTML code within components by using the templates property. Backtick characters () for strings with multiple lines.

Then run the program and you’ll be able to see the output screen below,

Templates In Angular

External Template

As a default feature, Angular CLI uses the external template. It connects the template to components by using the templateUrl feature. TemplateUrl is utilized in External format, whereas it is used in the case of intline Template is used as an intline Template instead of a URL for the template.

Now , open Hi.component,HTML and add the following lines of code

  1. Hello!
  2. Name : ame|Name: ame}

Watch the output screen, and there will be the following results on screen

Templates In Angular

Elements in Templates

Let’s begin with a description of each of the elements in the template

HTML

Angular utilizes HTML as an example language.

Interpolation

Interpolation is among the types of data binding that allows us to access the data of a component within the form of a template. To interpolate, we employ double curly braces|•|and}.

Template Expressions

The text is called|”” is referred to|”” is known} as a template expression.

Ex,

  1. {{Expression}}  

Angular first examines the expression before returning the results as strings. The meaning of an expression template is that it’s a component instance. So {{ Name }} should be the property of the component that this template is bound.

Template Statements

Template Statements refer to statements that respond to user events.

  1. (event) =

Ex : Let’s make an event for clicking – add Changename() method to the hi.component.ts file in the following manner,

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 insert the following line of code within it,

  1. Hello!
  2. Name : ame|Name: ame}
  3. Click here to switch

This ChangeName() method will be linked to click event that will be invoked upon click at the time of execution. This is referred to as event binding.

Watch the output screen of the browser.

Templates In Angular

Output after clicking. If the user clicks on the paragraph, the name of the course will change to “ABC.”

Templates In Angular

Summary

In the article, we’ve reviewed the basic templates, types of templates, angular template examples, and the execution of events. We hope you enjoyed this article. If you want the best training in AngularJS versions, AngularJS Training in Coimbatore provides the best options.

Leave a Reply

Your email address will not be published. Required fields are marked *