menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular: Event Binding

folder Projet: angularApp
Event binding est la liaison entre le déclenchement d'une événement (click,dbclick,input ,change...) et la valeur d'un attribut de la component
<button (click)="varaible1=true">True</button>
ou
<button on-click="varaible1=true">True</button>

<input (change) = "fonction($event.target.value)">
$event.target.value:récupère la valeur de l'input
$:permet l'accés à l'objet DOM

Input Event

Input event est déclenché lorsque la valeur d'un input est encours de changement

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
nom = 'Valeur par défaut';
doSomething(vnom:string) {
this.nom = vnom;
}
}


app.component.html

<!-- 1.changer directement la valeur de l'attribut nom-->
<input [value]="nom" (input)="nom=$any($event.target).value">

<!-- 2.appeler une méthode on passant la valeur de l'input -->
<input [value]="nom" (input)="doSomething($any($event.target).value)">
<!--Afficher la valeur de l'attribut nom-->
{{nom}}


change Event

Input event est déclenché lorsque la valeur d'un input est changé et l'input devient blur

click Event

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isActive = true;
profile="Admin";
message="";
doSomething()
{
this.message="Hello "+this.profile+" your account is "+this.isActive;
}
}

app.component.html


<!--Modifier directement la valeur d'un attribut-->
<button (click)="isActive=true">True</button>
<button (click)="isActive=false">False</button>
<p *ngIf="isActive">
Ok is Active
</p>
<p *ngIf="!isActive">
No Not Active
</p>

<button (click)="profile='Client'">Client</button>
<button (click)="profile='Admin'">Admin</button>
{{profile}}

<!--Appeler une fonction de la component-->
<button (click)="doSomething()">Connect</button>
{{message}}