Porperty binding

{% raw %}
<h2>{{title}}</h2>{% endraw %}
<h2 [textContent]="title" ></h2>
<img [src]="{{ imageUrl }}" />
<img [src]="imageUrl" >
1
2
3
4
5
export class AppComponent{
    title = "test";
    imageUrl = "img.jpg";
}
1
2
3
4

Artibute binding

<tr>
    <td [attr.colspan]="colSpan"></td>
</tr>
1
2
3
export class AppComponent{
    colSpan = 2;
}
1
2
3

Class Binding

<button class="btn btn-primary" [class.active]="isActive" ></button>
1
export class AppComponent{
    isActive = true;
}
1
2
3

Style Binding

<button class="btn btn-primary" [style.backgroundColor]="isActive?'blue':'white'" ></button>
1
export class AppComponent{
    isActive = true;
}
1
2
3

Event Binding

<button (click)="onClick()">Save</button>
1
export class AppComponent{
    onClick($event){
        $event.stopPropagation();
        console.log("Button was clicked", $event);
    }
}
1
2
3
4
5
6

Event Filtering

<input type="text" (keyup.enter)="onKeyUp($event)">
1
export class AppComponent{
    onKeyUp($event){
        console.log($event.target.value);
    }
}
1
2
3
4
5

Template Variables

<input #email type="text" (keyup.enter)="onKeyUp(email)">
1
export class AppComponent{
   onKeyUp(email){
        console.log(email);
    }
}
1
2
3
4
5

Two Way Binding

<input type="text" [(ngModel)]="email" (keyup.enter)="onKeyUp()">
1
export class AppComponent{
    email = "example.com";
    onKeyUp() {
        console.log(this.email);
    }
}
1
2
3
4
5
6

In app.module.ts,

import { FormsModule } from '@angular/forms';
@NgModule({
    //...
    imports:[
        BrowserModule,
        FormsModule // <===
    ],
    //...
})

1
2
3
4
5
6
7
8
9
10

Pipes

{% raw %}
{{``course.title | uppercase | lowercase}}
{{ course.students | number }} <br>
{{course.rating |number:'2.1-2' }}<br> <!-- (.=decimal point x-x= min to max) -->
{{course.price | currency:'AUD':true:'3.2-2'}}<br><!-- true=dollar sign, x.x-x decimal point adjust -->
{{course.releaseDate |date:shortdate}}<br>
{% endraw %}
1
2
3
4
5
6
7
export class AppComponent{
    course = {
        title: "The Complete Angular Course",
        rating: 4.9745,
        students: 30123,
        price: 190.95,
        releaseDate: new Date)(2016, 3, 1)
    }
}
1
2
3
4
5
6
7
8
9

other Deafult Datepipes

Custom Pipes

{% raw %}
{{text| summary}}
{% endraw %}
1
2
3

add new file in app folder summary.pipe.ts

import {Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'summary'
})
export class SummaryPipe implements PipeTransform{
    transform(value: any, limit?: number){
          if (!value)
            return null;
        let actualLimit = (limit)? limit: 50;
        value.substr(0,actualLimit) + '...';
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

register in app Module

@NgModule({
    declarations:[
        //...
        SummaryPipe
    ]
})
1
2
3
4
5
6
References:

The Complete Angular Course: Beginner to Advance - By Mosh

Last Updated: 1/14/2019, 12:15:15 AM