Modèles en angulaire

Dans Angular, un modèle est un plan pour un fragment d'une interface utilisateur (UI). Les modèles sont écrits en HTML et une syntaxe spéciale peut être utilisée dans un modèle pour s'appuyer sur de nombreuses fonctionnalités d'Angular.

Angular étend la syntaxe HTML de vos modèles avec des fonctionnalités supplémentaires.
Par exemple, la syntaxe de liaison de données d'Angular permet de définir dynamiquement les propriétés du modèle d'objet de document (DOM).

Presque toute la syntaxe HTML est une syntaxe de modèle valide. Cependant, comme un modèle Angular n'est qu'un fragment de l'interface utilisateur, il n'inclut pas d'éléments tels que <html>, <body> ou <base>.

Remarque : - Pour éliminer le risque d'attaques par injection de script, Angular ne prend pas en charge l'élément <script> dans les modèles. Angular ignore la balise <script> et envoie un avertissement à la console du navigateur. Pour plus d'informations, consultez la page Sécurité.

Affichage de la valeur avec interpolation

L'interpolation fait référence à l'incorporation d'expressions dans un texte balisé. Par défaut, l'interpolation utilise les doubles accolades {{ et }} comme délimiteurs.

Exemple:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

Exemple:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

Les instructions de modèle sont des méthodes ou des propriétés que vous pouvez utiliser dans votre code HTML pour répondre aux événements utilisateur. Avec les instructions de modèle, votre application peut engager les utilisateurs par le biais d'actions telles que l'affichage de contenu dynamique ou la soumission de formulaires.

Exemple:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

Comme les expressions de modèle, les instructions de modèle utilisent un langage qui ressemble à JavaScript. Cependant, l'analyseur des instructions de modèle diffère de l'analyseur des expressions de modèle. De plus, l'analyseur d'instructions de modèle prend spécifiquement en charge les affectations de base (=) et les expressions de chaînage avec des points-virgules (;).

La syntaxe d'expression JavaScript et de modèle suivante n'est pas autorisée :

1. Nouveau
2. Opérateurs d'incrémentation et de décrémentation, ++ et —
3. Affectations d'opérateurs, telles que += et -=
4. Les opérateurs au niveau du bit, tels que | et &
5. L'opérateur de tuyauterie