YogeshChauhan . com

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>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">

<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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Create a currency (dollar) to coins convertor in ReactReactHow to get Current Year, Month and Date in JavaScript?JavaScriptHow to send and receive query strings via links in Angular 9?AngularHow to make HTML form interactive and using CSS?CSS6 Different Functions to Sort Arrays in PHPPHPHow to change style of nth-child using jQuery?jQuery