Yogesh Chauhan's Blog

Introduction to components and templates Part 2: Templates and views

in Angular on May 9, 2020

Previous Article:

Introduction To Components And Templates Part 1: Component Metadata

Introduction to components and templates Part 2

We define a component’s view with its companion template.

A template is a form of HTML that tells Angular how to render the component.

Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit.

The template immediately associated with a component defines that component’s host view.

The component can also define a view hierarchy, which contains embedded views, hosted by other components.

Angular Component and Templates View Hierarchy
Angular Component and Templates View Hierarchy

A view hierarchy can include views from components in the same NgModule.

A view hierarchy can (and often does) include views from components as well. Those views are defined in different NgModules.

Template syntax

A template looks like regular HTML, except that it also contains Angular template syntax.

Template alters the HTML based on your app’s logic and the state of app and DOM data.

Template can use data binding to coordinate the app and DOM data, pipes to transform data before it is displayed, and directives to apply app logic to what gets displayed.

For example, here is a template for the Tutorial’s HeroListComponent.


// src/app/hero-list.component.html

<h2>Hero List</h2>

<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>

<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

This template uses typical HTML elements like h2 and p .

It also includes Angular template-syntax elements, *ngFor, {{hero.name}}, (click), [hero], and <app-hero-detail>.

What do those elements do?

=> The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.

=> The *ngFor directive tells Angular to iterate over a list.

=> {{hero.name}}, (click), and [hero] bind program data to and from the DOM, responding to user input. 

=> The <app-hero-detail> tag in the example is an element that represents a new component, HeroDetailComponent.

HeroDetailComponent defines the hero-detail child view of HeroDetailComponent. 

Next articles:

Introduction To Components And Templates Part 3: Data Binding

Introduction To Components And Templates Part 4: Pipes And Directives

Credit: Angular.io


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to add a ribbon on top of a container using CSS?CSSHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPapply_filters function in WordPressWordPressHow to disable scrolling on html body on menu click using JavaScript?JavaScriptHow does AdSense calculate page loading time?JavaScriptCurrencyPipe in Angular 9 with ExamplesAngular