Scribd
Upload
167 views

Angular Templates Cheat Sheet PDF

This document discusses templates in Angular, including showing/hiding elements conditionally, using pipes to transform data, creating custom pipes, dynamically applying classes and styles, using the Elvis operator, and inserting content into templates from outside components using content projection. Templates allow displaying and manipulating data in Angular applications through built-in and custom features like conditionals, pipes, classes, styles, and content projection.

Uploaded by

Asim Riaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
167 views

Angular Templates Cheat Sheet PDF

This document discusses templates in Angular, including showing/hiding elements conditionally, using pipes to transform data, creating custom pipes, dynamically applying classes and styles, using the Elvis operator, and inserting content into templates from outside components using content projection. Templates allow displaying and manipulating data in Angular applications through built-in and custom features like conditionals, pipes, classes, styles, and content projection.

Uploaded by

Asim Riaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Templates

By: Mosh Hamedani

Showing / hiding elements


<div [hidden]=courses.length == 0></div>

<div *ngIf=courses.length > 0></div>


<div [ngSwitch]=viewMode>
<template [ngSwitchWhen]=map ngSwitchDefault>

</template>
<template [ngSwitchWhen]=list>

</template>
</div>

Pipes
{{ course.title | uppercase }} -> ANGULAR COURSE
{{ course.students | number }} -> 1,234
{{ course.rating | number:2.2-2 }} -> 04.97
{{ course.price | currency:USD:true }} -> $99.95
{{ course.releaseDate | date:MMM yyyy }} -> Mar 2016
{{ course | json }}

Templates

By: Mosh Hamedani

Creating Custom Pipes


import {Pipe, PipeTransform} from angular2/core;

@Pipe({ name: summary })


export class SummaryPipe implements PipeTransform {
transform(value: string, args: string[]) {
}
}

In the host component


@Component({
pipes: [SummaryPipe]
})

Applying multiple classes dynamically


<i [ngClass]={
active: isActive,
disabled: isDisabled
}></i>

Templates
Applying multiple styles dynamically
<button
[ngStyle]={
backgroundColor: canSave ? blue: gray,
color: canSave ? white : black
}></button>

Elvis operator
{{ task.assignee?.role?.name }}

Inserting content from the outside


<ng-content></ng-content>

Multiple content placeholders


<ng-content select=.heading></ng-content>
<ng-content select=.body></ng-content>

By: Mosh Hamedani

You might also like