Bindings in Angular 2 [Types of Bindings and Example]

Types of Bindings –

Interpolation (evaluates expressions)-

· {{4+6}}

· {{user.name}}

Null Guard –

· {{user?.name}}

Input Binding –

·

Output Binding –

·

Two Way Binding –

·

Stayed Informed – Angular 2 documentations and examples

The below example help us to learn the Annular 2 binding and where we use in real project.

home.component.html :-

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
    <h5>Angular 2 for loop typescript example - *ngFor</h5>
</div>
<div class="ibox-title">
    <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" /> <strong>Resut- {{values}}</strong>
</div>
<div class="ibox-content">
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name </th>
                    <th>SiteUrl </th>
                    <th>Actions </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of userlist; let i = index" class="tbl-row-border">
                    <td>{{user.Id}}</td>
                    <td>{{user.name}}</td>
                    <td><a href="{{user.site}}" target="_blank">{{user.site}}</a></td>
                    <td><a (click)="addUser(user)">A</a>|<a (click)="updateUser(user)">E</a>|<a (click)="deleteUser(user)">D</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</div>
</div>

home.component.ts :-

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    //styleUrls: ['./home.component.css'],
    styles: ['.tbl-row-border { border: 1px solid red;}']
})

export class HomeComponent {
    userlist: Users[];

    constructor() {
        this.userlist = [{ Id: '1001', name: 'Anil SIngh', site: 'http://www.code-sample.com' },
        { Id: '1002', name: 'Alok', site: 'http://www.code-view.com' },
        { Id: '1003', name: 'Reena', site: 'http://www.code-sample.xyz' },
        { Id: '1004', name: 'Dilip', site: 'http://www.codefari.com' },
        ];
    }

    values = '';
    onKeyUp(event: any) {
        this.values = event.target.value;
    };

    addUser(user) {
        alert(JSON.stringify(user));
    };

    updateUser(user) {
        alert(JSON.stringify(user));
    };

    deleteUser(user) {
        alert(JSON.stringify(user));
    };
}

export class Users {
    Id: String;
    name: String;
    site: String;
}

app.module.ts :-

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { MenuComponent } from './components/menu/menu.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent        
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

Result -

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2