Yogesh Chauhan's Blog

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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
The 7 Security Objectives of Any Organization for IT and Network SecurityMiscellaneousHow get_template_part helps write reusable code in WordPress?WordPressAll possible ways you can Insert Data in PostgresPostgresSQL GROUP BY StatementSQL/MySQLWordPress plugin development: How to fix a SQL injection?WordPressThe Types of DatabasesMiscellaneous