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>
  <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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What are components in Angular?AngularWordPress: How to loop through a repeater field in ACF?WordPressHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLLearn to create your skill bar using CSSCSSLearn to make a responsive gallery using CSS Grid and without media queriesCSSControl rendering using CSS content-visibility propertyCSS