Liaison de données, partie 5 — Liaison de style

La liaison de données peut être déroutante lorsque vous démarrez dans Angular. Décomposons-le ! Cet article couvre la liaison de style unidirectionnelle.

Dans l'article d'aujourd'hui, nous examinerons la liaison de style dans Angular et comment vous pouvez facilement lier les styles CSS à vos modèles. Il s'agit de l'un des articles de la série de liaison de données que nous avons examinés récemment. assumé. Voici quelques prérequis que vous devez avoir avant de commencer à utiliser Angular 12 et suivez la démonstration de cet article :

• VS Code comme environnement de développement intégré
• Node version 11.0 installée sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• La dernière version d'Angular (version 12)

// exécuter la commande dans un terminal
ng version

Confirmez que vous utilisez la version 12, et mettez à jour vers la 12 si ce n'est pas le cas. Liaison ?

Similaire à la liaison de propriétéla liaison de style est utilisée pour spécifier le style en ligne des éléments de modèle dans votre composant. Vous pouvez styliser n'importe quel élément de modèle en déplacement en utilisant cette approche de la manière la plus évolutive. C'est parce que vous pouvez définir la valeur de style à l'intérieur du composant. Cela vous permet également de créer un style en ligne de manière dynamique. Vous pouvez également mettre des conditions sur les règles de style que vous écrivez. La liaison de style a été créée pour vous donner plus de puissance lors de la conception d'un composant dans le fichier modèle.

La syntaxe de la liaison de style ressemble à ceci :

Ce que nous construisons

Nous allons utiliser la CLI angulaire pour générer une nouvelle application de test où nous pouvons tester la liaison de style et montrer comment vous pouvez facilement l'utiliser dans votre flux de travail aujourd'hui.

Ouvrez votre VS. Codez à l'emplacement de votre choix, ouvrez le terminal et exécutez cette commande :

ng new styleapp

Assurez-vous de répondre aux invites comme ceci :

 ? Souhaitez-vous ajouter un routage angulaire ? Non
? Quel format de feuille de style souhaitez-vous utiliser ? CSS

Votre nouveau projet est maintenant généré. Naviguez dedans comme ceci :

cd styleapp
ng servir

Maintenant, accédez au dossier src et à l'intérieur du fichier app component.html, copiez les styles dans le fichier app.component.css, puis remplacez le contenu de l'application par le bloc de code ci-dessous :

<div class="toolbar" role="banner"[19659030]>
  <span>Bienvenue</span>
    <div class="spacer"></div >
    <a aria-label="Angular sur twitter" cible=" _blank" rel="noopener" href="https:// twitter.com/angular" title="Twitter">
    </a>
</div>
<div class="content" role="main ">

  <div class="card Highlight-card card-small">
<svg id="fusée" alt="Rocket Ship" xmlns="http://www.w3.org/2000/svg" largeur=[19659030]"101.678" hauteur="101.678" viewBox="0 0 101,678 101,678">
      <g id="Group_83" data-name="Groupe 83 " transform="translate(-141 -696)">
        <circle id="Ellipse_8" data-name="Ellipse 8 " cx="50.839" cy="50.839"  r="50.839" transform="traduire(141 696)"  fill="#dd0031"/>
      </g>
    </svg>
L'application <span>{{ title }} est en cours d'exécution !</span>
<svg id="fusée-fusée" alt="Rocket Ship Smoke" xmlns="http://www.w3.org/2000/svg" largeur ="516.119" hauteur="1083.632" viewBox= "0 0 516.119 1083.632">
    </svg>
</div>

  <h2>Ressources</h2>
  <p>Voici quelques liens pour vous aider vous commencez :</p>
<div class="card-container">
    <a class="carte" cible="_blank " rel="noopener" href=#>
      <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg>
<span>Bonjour</span>
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg> </a>
<a class="carte" cible="_blank " rel="noopener" href=#>
      <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg>
<span>Bonjour</span>
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg>
    </a>
<a class="carte" cible="_blank " rel="noopener" href=#>
      <svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg>
<span>Bonjour</span>
<svg class="material-icons" xmlns="http: //www.w3.org/2000/svg" largeur="24" hauteur=[19659030]"24" viewBox="0 0 24 24"> </svg>
    </a>
</div>
</div>

Si vous exécutez la commande ci-dessous dans votre terminal, l'application devrait maintenant ressembler à ceci :

 ng serve

Style en ligne dans Angular

Normalement dans les modèles angulaires, comme dans n'importe quel fichier HTML, vous pouvez utiliser un style en ligne pour vos éléments. Utilisons l'élément h2 qui affiche Resources, par exemple, pour changer le style et l'agrandir. Tout ce que vous avez à faire est d'ajouter ce style en ligne à l'intérieur de la balise h2 comme ceci :

<h2 style="font-size: 100px">Ressources</h2>

Maintenant, si vous actualisez l'application, vous verrez que la police est maintenant plus grande. Vous pouvez même ajouter des règles supplémentaires à un seul élément comme ceci :

<h2 style="font-size: 100px; color :  bleuet;">Ressources</h2>

Maintenant, la police et les couleurs de cet élément sont stylisées selon ces deux règles.

Utilisation de la liaison de style dans Angular[19659004]Rappelez-vous maintenant notre syntaxe ci-dessus pour la liaison de style :

Appliquons cela au même élément d'en-tête que nous avons utilisé ci-dessus.

 Ressources</h2>

Cela renvoie exactement la même chose que le style en ligne normal.

C'est exactement ainsi que la reliure de style est effectuée. Vous pouvez voir à quel point il est similaire à la liaison de propriété. Il sert le même objectif que le style en ligne normal, mais offre encore plus de puissance, de fonctionnalités et de flexibilité. approches en cas de chameau (fontSize). Angular a rendu très facile pour tout le monde, peu importe leurs antécédents en matière de style, de choisir la reliure de style. Essayons-le :

<h2 [style.font-size]="'100px'" >Ressources</h2>
<h2 [style.fontSize]="'100px'">Ressources[19659038]</h2>

Vous voyez qu'ils donnent exactement le même résultat, donc peu importe l'approche que vous souhaitez adopter. . La principale différence est que vous pouvez lier des valeurs de données à l'aide de la liaison de style. En utilisant notre exemple simple, accédez au fichier app.component.ts et remplacez le contenu par le bloc de code ci-dessous :

import { Component } from '@angular /core';
@Composant({
  sélecteur : 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  titre = 'styleapp';
  règles = 'font-size : 100px ; couleur: bleuet bleu;';
  règle = '100px';
}

Maintenant dans le fichier HTML, modifiez les propriétés de valeur dans les en-têtes en règles comme celle-ci :

<h2 style="rule"> Ressources</h2>
<h2 [style.font-size]="règle">Ressources</h2>
<h2 [style.fontSize]="règle">Ressources</h2>

Vous verrez qu'une erreur se produit sur le style en ligne normal – il n'est pas possible de se lier au style en ligne normal. Cependant, avec la reliure de style, cela fonctionne bien. La possibilité pour vous de modifier dynamiquement la valeur des règles de style dans le modèle est l'une des principales raisons pour lesquelles la liaison de style existe.

Ajout de conditions

Vous commencez maintenant à remarquer que les possibilités sont infinies avec ce que vous pouvez faire en utilisant la reliure de style. Ajoutons des conditions aux valeurs que nous modifions dynamiquement. Dans votre fichier app.component.ts, ajoutez une nouvelle variable appelée check :

check = true

Dans le fichier modèle, remplacez l'une des balises d'en-tête par :

<h2 [style.fontSize]="check ? '100px'  : '200px'">Ressources</h2>

Fondamentalement, cela dit que si la valeur de contrôle est vraie, que la police soit de 100 pixels, et si elle est fausse, qu'elle soit de 200. Il s'agit d'un cas d'utilisation simple montrant comment nous pouvons utiliser la puissance de la liaison de style dans notre flux de travail aujourd'hui.

Conclusion

Dans le post d'aujourd'hui, nous avons examiné la liaison de style dans Angular, nous avons appris en quoi cela ressemble au style en ligne et les différences également. Nous avons vu comment nous pouvons faire plus avec nos styles en ligne en utilisant la puissance de la reliure de style. Restez à l'écoute pour plus de contenu de liaison de données. Bon piratage !