Angular 2 Property & Event Binding


Angular 2 Property & Event Binding

Angular 2 Property & Event Binding are used to communicate data from views to Component and from component to views part.

Angular Event Binding

Angular Event Binding used to pass data from views to Angular component. for example suppose we want to show one pop up dialog on click of particular button.

We can use () bracket to bind any event.

Example

  1. app.html
  2. app.component.ts

app.html

<div style=”text-align:center”>
         <button (click)=”clickMe()”  type=”button”>Click Me!</button>
</div>

app.component.ts

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

@Component({
  selector:'app-root',
  templateUrl:'./app.html'
})

export class AppComponent {
   public clickMe(){
    console.log("Click me...");
   }
}

Angular 2 Property

When we want to get any data dynamic, based on some type of logic defined in our component class then we can use Angular property binding.

Property binding can be defined either by wrapping the attribute in [brackets] or by interpolation.

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

@Component({
selector: 'my-app',
template: `
   <img [src]="imageUrl">`
})

export class AppComponent { 

    imageUrl = 'https://angular.io/resources/images/logos/angular2/angular.png';

}

Angular 2 Property With interpolation

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

@Component({
selector: 'my-app',
template: `
   <img src="{{imageUrl}}">`
})

export class AppComponent { 

    imageUrl = 'https://angular.io/resources/images/logos/angular2/angular.png';

}






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229