YogeshChauhan . com

Introduction to components and templates Part 4: Pipes and Directives

in Angular on May 10, 2020

Previous Articles:

Introduction To Components And Templates Part 1: Component Metadata

Introduction To Components And Templates Part 2: Templates And Views

Introduction To Components And Templates Part 3: Data Binding

Introduction to components and templates Part 4


Angular pipes let you declare display-value transformations in your template HTML.

A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view.

Angular defines various pipes, such as the date pipe and currency pipe. 

You can also define new pipes.

To specify a value transformation in an HTML template, use the pipe operator (|).

{{interpolated_value | pipe_name}}

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 date pipe.

<!-- 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>


Angular templates are dynamic.

When Angular renders them, it transforms the DOM according to the instructions given by directives.

A directive is a class with a @Directive() decorator.

A component is technically a directive.

However, components are so distinctive and central to Angular applications that Angular defines the @Component() decorator, which extends the @Directive() decorator with template-oriented features.

In addition to components, there are two other kinds of directives:

1. structural and

2. attribute.

Angular defines a number of directives of both kinds, and you can define your own using the @Directive() decorator.

Just as for components, the metadata for a directive associates the decorated class with a selector element that you use to insert it into HTML.

In templates, directives typically appear within an element tag as attributes, either by name or as the target of an assignment or a binding.

Structural directives

Structural directives alter layout by adding, removing, and replacing elements in the DOM.

The example template uses two built-in structural directives to add application logic to how the view is rendered.

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

In the example above, 

*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 behavior 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 behavior of an existing element (typically input tag) by setting its display value property and responding to change events.

<input [(ngModel)]="hero.name">

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

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

Steps to Secure a VPNMiscSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressHow to add onclick event to html elements dynamically using JavaScript?JavaScriptHow to remove special characters (dash, asterisk etc) from any string in PHP?PHPHow to Make CSS Lists Bullets Smaller?CSSHow to create a Horizontal Scroll on button click using JavaScript?JavaScript