MCQ

Angular Template

In Angular, template is a part of HTML. Use special syntax within templates to create many of Angular's features.

Each Angular template in your application is a chunk of HTML to be included as part of the page displayed by the browser. An Angular HTML template renders a view, or user interface, in the browser like regular HTML, but with much more functionality.

When you generate an Angular application with the Angular CLI, the app.component.html file is the default template containing the placeholder HTML.

Template syntax guides show you how to control UX/UI by coordinating data between classes and templates.

Most template syntax guides have dedicated working example applications that demonstrate the individual theme of each guide. Check out the comprehensive Template Syntax live code/download example to see them all work together in one application.

Empower your HTML

Extend your application's HTML vocabulary with specialized Angular syntax in your templates. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with functions such as built-in template functions, variables, event listening, and data binding.

Almost all HTML syntax is valid template syntax. However, because an Angular template is part of an overall webpage and not the entire page, you do not need to include elements such as <html>, <body>, or <base>. You can focus specifically on the part of the page you are developing.

Angular does not support the <script> element in templates to eliminate the risk of script injection attacks. Angular ignores the <script> tag and outputs a warning to the browser console.

List of heroes

You define the application logic - what it does to support the view inside the class. The class interacts with the view through the API of properties and methods.

For example, HeroListComponent has a hero property that holds an array of heroes. When the user selects a hero from that list, its SelectHero() method sets a SelectedHero property. Components inherit hero from a service, which is a TypeScript parameter property on the constructor. The service is provided to the component through a dependency injection mechanism.

src/app/hero-list.component.ts (class)
content_copyexport class HeroListComponent implements OnInit {
  heroes: Hero[] = [];
  selectedHero: Hero | undefined;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Angular creates, updates, and destroys components as the user moves through the application. Your application can perform actions every moment in this lifecycle through optional lifecycle hooks, such as ngOnInit().

Component Metadata

The @Component decorator identifies the class immediately below it as a component class and specifies its metadata. In the example code below, you can see that HeroListComponent is just a class with no special Angular notation or syntax. It is not a component unless you mark it as one with the @Component decorator.

The metadata for a component tells Angular where to find the key building blocks for creating and rendering the component and its view. Specifically, it associates a template with the component, either directly with inline code or by reference. Together, the component and its template describe a view.

In addition to including or indicating templates, @Component configures metadata, for example, how the component can be referenced in HTML and what services it requires.

src/app/hero-list.component.ts (metadata)
content_copy@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

This example shows some of the most useful @Component configuration options:

Selector: A CSS selector that tells Angular to create and insert an instance of this component where it finds the corresponding tag in the template HTML. For example, if an application's HTML contains <app-hero-list></app-hero-list> , Angular inserts an instance of the HeroListComponent view between those tags.

TemplateUrl: The module-relative address of this component's HTML template. Alternatively, you can provide the HTML template inline as a value to the template property. This template defines the host view of the component.

Providers: An array of providers for the services that the component requires. The example tells Angular how to provide a HeroService instance that the component's constructor uses to get a list of heroes to display.

Templates and ideas

You define a component's view with its associative template. A template is a form of HTML that tells Angular how to render a component.

Views are usually organized hierarchically, allowing you to modify or show and hide entire UI sections or pages as a single unit. The template immediately associated with a component defines the host view of that component. Components 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, but it can also include views from components defined in different NgModules.

Template syntax

A template looks like regular HTML, except that it also contains Angular template syntax, which transforms HTML based on your application's logic and application state and DOM data. Your template can use data binding to coordinate application and DOM data, pipes to transform the data before it is displayed, and directives to implement the application logic that is being displayed.

For example, here's a template for the HeroListComponent of the tutorial.

src/app/hero-list.component.html

content_copy<h2>Hero List</h2>

<p><i>Select a hero from the list to see details.</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 specific HTML elements such as <h2> and <p>, and includes the Angular template-syntax elements, *ngFor, {{hero.name}}, (click), [hero], and <app-hero Contains - Details are also included. >. Template-syntax elements tell Angular how to render HTML on 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 by responding to user input. See more about data binding below.

The <app-hero-detail> tag in the example is an element that represents a new component, HeroDetailComponent. HeroDetailComponent (code not shown) defines the hero-detail child view of the HeroListComponent. Notice how such custom components match up with the original HTML in the same layout.

Data Binding

Without the framework, you would be responsible for pushing data values to HTML controls and converting user responses into actions and value updates. Writing this kind of push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-end JavaScript programmer can attest.

Angular supports two-way data binding, a mechanism for coordinating parts of a template with parts of a component. See Add Binding Markup to Template HTML to see how to add both sides in Angular.

Each form has a direction: from the DOM, from the DOM, or both

This example of the HeroListComponent template uses three of these forms.

src/app/hero-list.component.html (binding)

content_copy<li>{{hero.name}}</li>
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

{{hero.name}} Interpolation Displays the hero.name property value of the component within the <li> element.

The [Hero] property binding passes the value of SelectedHero from the parent HeroListComponent to the Hero property of the child HeroDetailComponent.

When the user clicks on a hero's name, the (click) event calls the Binding component's SelectHero method.

Two-way data binding (mainly used in template-driven forms) combines property and event binding in a single notation. Here's an example from the HeroDetailComponent template that uses two-way data binding with the ngModel directive.

src/app/hero-detail.component.html (ngModel)
content_copy<input type="text" id="hero-name" [(ngModel)]="hero.name">

In two-way binding, data flows from the property value component to the input box as with property binding. User changes also flow back into the component, resetting the property to the latest value, as is the case with event binding.

Angular processes all data bindings once for each JavaScript event cycle through all child components from the root of the application component tree.

Data binding plays an important role in communication between a template and its component and is also important for communication between parent and child components.

Pipes

Angular pipes let you declare display-value changes in your template HTML. @Pipe A class with a decorator defines a function that transforms input values into output values displayed in a view.

Angular defines various pipes, such as the date pipe and currency pipe; See the Pipes API list for a complete list. You can also define new pipes.

To specify a value change in HTML templates, use the pipe operator (|).

You can chain pipes, sending the output of one pipe function to be transformed by another pipe function. A pipe can also take arguments that control how it performs its transformation. For example, you can pass the desired format to the data pipe.

content_copy<!-- Default format: output 'Jun 15, 2015'-->
 <p>Today is {{today | date}}</p>

<!-- fullDate format: output 'Monday, June 15, 2015'-->
<p>The date is {{today | date:'fullDate'}}</p>

 <!-- shortTime format: output '9:43 AM'-->
 <p>The time is {{today | date:'shortTime'}}</p>

Directives

Angular templates are dynamic. When Angular renders them, it alters the DOM according to the instructions given by the directive. A directive is a class with the @Directive() decorator.

A component is technically a directive. However, components are so specialized and central to Angular applications that Angular defines the @Component() decorator, extending the @Directive() decorator with template-oriented features.

In addition to components, there are two other types of directives: structural and characteristic. Angular defines several directives of both types, and you can define your own using the @Directive() decorator.

For components, the metadata for the directive associates the decorated class with a selector element that you use to insert it into the HTML. In templates, directives typically appear as attributes within an element tag, either by name or as the target or binding of an assignment.

Structural Instructions

Structural directives alter the layout by adding, removing, and changing elements in the DOM. The example template uses two built-in structural directives to add application logic to how the view is rendered.

src/app/hero-list.component.html (structural)
content_copy<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

*ngFor is an iterative; it tells Angular to stamp out one <li> per hero in the heroes list.
*ngIf is a conditional; it includes the HeroDetail component only if a selected hero exists.

Attribute directives

Attribute directives alter the appearance or behaviour of an existing element. In templates, they look like regular HTML attributes, hence the name.

The ngModel directive, which implements two-way data binding, is an example of an attribute directive. NgModel modifies the behaviour of an existing element (typically <input>) by setting its display value property and responding to change events.

src/app/hero-detail.component.html (ngModel)
content_copy<input type="text" id="hero-name" [(ngModel)]="hero.name">

Angular has more pre-defined directives that alter the layout structure (for example, ngSwitch) or modify aspects of DOM elements and components (for example, ngStyle and ngClass).

Template statements

Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users by displaying dynamic content or submitting forms.

In the following example, the template statement appears in quotes to the right of the = symbol as deleteHero() (event) = "statement".

src/app/app.component.html
content_copy<button(click)="deleteHero()">delete hero</button>

When the user clicks on the deleteHero button, Angular calls the deleteHero() method in the component class.

Use template statements with elements, components, or directives to respond to events.

Syntax

Like template expressions, template statements use a language that looks like JavaScript. However, the parser for template statements differs from the parser for template expressions. In addition, the template statement parser specifically supports both basic assignment, =, and chaining expressions with semicolons;

The following JavaScript and template expression syntaxes are not allowed:

New increment and decrement operators, ++ and --
operator assignment, such as += and -=
the bitwise operators, such as | and &

The pipe operator

Statements have a context-a particular part of the application to which the statement belongs.

Statements can refer only to what's in the statement context, which is typically the component instance. For example, deleteHero() of (click)="deleteHero()" is a method of the component in the following snippet.

src/app/app.component.html

The statement context can also refer to properties of the template's own context. In the following example, the component's event handling method, onSave() takes the template's own $event object as an argument. In the next two lines, the deleteHero() method takes a template input variable, hero, and onSubmit() takes a template context variable, #heroForm.

src/app/app.component.html

content_copy<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>

In this example, the $event object is the reference template for hero and #heroForm.

Template reference names take precedence over component reference names. hero is the template input variable in the preceding deleteHero(hero), not the hero property of the component.

Statement best practices

Conciseness

Use method calls or basic property assignments to keep template statements minimal.

Work with the context

A reference to a template statement can be an instance of a component class or a template. Because of this, template statements cannot refer to anything in the global namespace, such as window or document. For example, template statements cannot call console.log() or math.max().

Next TopicAngular Card

← prev next →