Liaison de données unique dans Angular 2+

1. le composant à la vue
2. Étapes pour utiliser la liaison de données à usage unique dans Angular 2+

Dans Angular 2+, la liaison de données ponctuelle ne met à jour la vue qu’en cas de modification du modèle ou de toute propriété d’entrée. Ce type de liaison de données réduit les mises à jour inutiles de la vue, ce qui améliore les performances et réduit le travail de votre ordinateur.

La nature unidirectionnelle de la liaison de données unidirectionnelle est évidente. Vous pouvez uniquement lier des données d’un composant ou d’une vue à un autre.

le composant à la vue

Plusieurs stratégies de liaison de données utilisent une liaison de données unidirectionnelle pour connecter les données d’un composant à une vue.

Liaison de propriété

Cette technique vous permet de lier la propriété d’un élément HTML à une propriété d’objet dans le modèle. Cela implique de modifier la valeur de la propriété d’un composant et d’envelopper cette valeur dans un élément HTML dans la même vue.

Pour basculer la fonctionnalité et l’échange de données entre les membres, nous utilisons Property Binding.

Liaison d’attribut

Avec cette technique, nous pouvons lier l’attribut d’un élément HTML à une propriété d’objet dans le modèle et spécifier quelle valeur d’attribut est mise à jour lorsqu’un changement se produit.

Liaison de classe

Cette technique lie les éléments DOM aux classes AngularJS et permet de les mettre à jour avec les données du modèle.

Liaison d’interpolation

La méthode d’interpolation permet à l’utilisateur d’attacher une valeur à un élément de l’interface utilisateur. L’interpolation lie les données dans un processus à sens unique, de sorte que les données circulent des composants vers les éléments HTML d’une seule manière.

Étapes pour utiliser la liaison de données à usage unique dans Angular 2+

Cette section vous montrera comment utiliser la liaison de données unidirectionnelle dans Angular 2+.

Exemple (TypeScript) :

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    demo = 'Write something here'
}

Exemple (HTML) :

<h1>Example of Angular One way Data Binding</h1>
<textarea id="hello" name="demo" class="form-control" (change)="demo = $event.target.value"></textarea>
{{demo}}

Cliquez ici pour vérifier la démonstration en direct du code comme mentionné ci-dessus.