Rendu conditionnel avec @if
Affichez du contenu sous condition avec @if et @else.
Rendu conditionnel avec @if est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Flux de contrôle intégré
Les modèles Angular modernes comprennent des blocs de flux de contrôle intégré écrits avec le symbole arobase. Ils remplacent les anciennes directives structurelles et ne nécessitent aucun import.
Le bloc if
Le bloc at-if affiche le contenu selon une condition. Vous écrivez un symbole arobase suivi du mot if, de la condition entre parenthèses et du contenu entre accolades.
// template:
// @if (loggedIn) {
// <p>Welcome back!</p>
// }Remplacer ngIf
Il remplace l'ancienne directive structurelle *ngIf. La nouvelle syntaxe fait partie du langage des modèles et ne nécessite donc aucun import.
Lire un signal dans la condition
La condition peut être n'importe quelle expression, notamment un appel de signal.
// @if (count() > 0) {
// <p>You have items</p>
// }Le bloc else
Un bloc at-else fournit un contenu de remplacement lorsque la condition est fausse. Il suit immédiatement l'accolade fermante du bloc if.
// @if (user) {
// <p>Hello {{ user.name }}</p>
// } @else {
// <p>Please log in</p>
// }Chaînes else if
Vous pouvez enchaîner les conditions avec at-else if, puis terminer par un at-else.
// @if (score >= 90) { <p>A</p> }
// @else if (score >= 80) { <p>B</p> }
// @else { <p>C</p> }Mémoriser le résultat de la condition
Le bloc at-if peut associer le résultat de la condition à une variable locale avec le mot-clé as, ce qui est utile pour affiner les valeurs non nulles.
// @if (user(); as u) {
// <p>{{ u.name }}</p>
// }Pourquoi cette nouvelle syntaxe
Le flux de contrôle intégré est plus lisible, vérifié par rapport aux types et plus efficace que les directives structurelles. Il évite la microsyntaxe et l'astérisque des anciennes directives.
Aucun élément conteneur nécessaire
Contrairement aux anciennes approches, le bloc at-if ne nécessite ni élément englobant ni ng-template. Les accolades délimitent elles-mêmes le contenu conditionnel.
Imbriquer des blocs
Les blocs de flux de contrôle peuvent être imbriqués librement. Un at-if peut contenir un autre at-if, un at-for, et ainsi de suite.
Associer des liaisons
Dans un bloc at-if, vous utilisez l'intégralité du langage des modèles : l'interpolation, les liaisons de propriétés et les liaisons d'événements fonctionnent normalement.
Vérification rapide : conditions
La nouvelle syntaxe conditionnelle.
Récapitulatif : conditions
Vous avez appris le bloc at-if pour l'affichage conditionnel, avec at-else et at-else if pour les alternatives, ainsi que le mot-clé as pour capturer le résultat. Il remplace *ngIf et ne nécessite aucun import. Ensuite : parcourir une collection avec at-for.
Questions Fréquemment Posées
La leçon « Rendu conditionnel avec @if » est-elle gratuite ?
Oui — le texte complet de « Rendu conditionnel avec @if » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Rendu conditionnel avec @if » ?
Affichez du contenu sous condition avec @if et @else. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Rendu conditionnel avec @if » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Rendu conditionnel avec @if
- Boucles avec @for
- Sélection avec @switch
- Chargement différé avec @defer