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.
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 BindingIntroduction To Components And Templates Part 4: Pipes And Directives
Credit: Angular.io
basics components Templates view controller
