Angular: Event Binding
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
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
attribut1:boolean=false;
}
app.component.html
<button (click)="attribut1=true">True</button>
<div *ngIf="!attribut1">
Is false
</div>
<div *ngIf="attribut1">
Is True
</div>
Reférence dom $event
app.component.html
<input (keyup) = "fonction($event)">
attribut1={{attribut1}}
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
attribut1:string="";
fonction(v:any)
{
this.attribut1=v.target.value;
}
}
Key event filtering
Permet d'appler l'exécution d'une fonction lorsque plusieur events sont délenchées
app.component.html
<input
(keyup.enter)="attribut1=$any($event.target).value"
(keyup.escape)="$any($event.target).value='';
attribut1=''">
attribut1={{attribut1}}
<!--
$any:cast ($event.target) to anyType
-->
Input Event
Input event est déclenché lorsque la valeur d'un input est encours de changementapp.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}}