Utilisez @Input() dans Angular

1. la directive @Input() dans Angular
2. Étapes à suivre pour utiliser @Input() dans les applications Angular

Cet article concerne Angular @Input(), une fonction utilisée dans Angular pour prendre l’entrée de l’utilisateur, puis l’utiliser pour le traitement dans le programme. Il est également possible d’utiliser cette fonction pour lire un fichier et obtenir des données d’une API externe.

la directive @Input() dans Angular

La directive @Input(), comme son nom l’indique, est utilisée pour les champs de saisie. @Input() est idéal pour capturer les entrées de l’utilisateur dans les champs de formulaire et les zones de texte.

Lorsque l’utilisateur saisit des informations, il met automatiquement à jour la valeur du champ ou de la zone de texte. Il accepte également les valeurs d’autres entrées et ngModelOptions pour mettre à jour automatiquement sa valeur.

La directive @Input() a trois attributs : type, name et value.

• L’attribut type précise le type de champ de saisie à créer.
• L’attribut name spécifie l’identifiant du champ de saisie et sera utilisé comme son nom dans le code JavaScript.
• L’attribut valeur est requis si vous créez un champ de saisie de texte sans valeur par défaut définie.

Vous trouverez ci-dessous une liste des types valides pour un champ de saisie :

• Text
• Password
• Email Address
• Number
• Date Picker (Date)
• Time Picker (Time)
• Range Slider (Range)
• Checkbox (Checkbox)

Pour utiliser @Input(), vous devez l’ajouter en tant que directive sur l’élément HTML souhaité.

@Input() est utilisé pour transmettre des données du composant parent au composant enfant, tandis que @Output() est utilisé pour transmettre des données du composant enfant au composant parent. Un exemple typique de @Input() consiste à demander l’âge de l’utilisateur.

Le code suivant affichera une invite demandant l’âge de l’utilisateur, puis le renverra à la fonction appelante, qui l’affectera à une variable appelée age.

var age = Input("Please enter your age");

Étapes à suivre pour utiliser @Input() dans les applications Angular

Il y a trois étapes pour utiliser @Input() dans les applications Angular :

Code TypeScript :

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    isFocusStyle = false;
    type = 'INFO';
    onFocus() {
        this.isFocusStyle = true;
        this.type = 'INFO';
    }
    onEnter() {
        this.isFocusStyle = false;
        const input = document.querySelector('input');
    }
}

Code HTML:

<h1>Example of Angular Input</h1>
<div class="input-wrapper" [ngClass]="{'focus-style': isFocusStyle}">
    <input type="test" placeholder=" Write " (focus)="onFocus()">
</div>

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