Introduction to components and templates Part 2: Templates and views
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


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

Create a responsive pricing table using simple HTML and CSSCSSHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQLWordPress: How to print ACF array field values?WordPressHow Do You Make a Private VPN?MiscSelf-Driving and Intelligent NetworksMiscHow to merge arrays in JavaScript?JavaScript