web-dev-qa-db-fra.com

Utiliser variable dans la balise style dans un modèle angulaire?

Je travaille sur l’application angulaire 5, et j’ai le devoir d’appliquer des balises CSS dynamiques dans le style dans le modèle ..__J'ai essayé quelques solutions, mais elles ne fonctionnent pas.

app.component.ts

customCss : any;

constructor(){}

ngOnInit(){
   this.customCss['color'] = "red";
}

app.component.html

<div>
   <span class="custom_css">This is angular 5 application</span>
</div>

<style>
   .custom_css{
      color: {{customCss.color}};
   }
</style>

Lorsque j'inspecte la classe custom_css dans un navigateur, elle affiche avec style 

.custom_css{
   color: {{customCss.color}};
}

Toute aide est appréciée.

javascripthtmlcssangularangular5
10
Lakhvir Singh

Vous pouvez utiliser la directive [ngStyle]:

<span [ngStyle]="{'color': 'red'}">
 This is angular 5 application
</span>

Ou comme si:

<span [ngStyle]="applyStyles()">
 This is angular 5 application
</span>

Et en composant:

applyStyles() {
    const styles = {'color' : 'red'};
    return styles;
}
4
ritaj

Vous pouvez utiliser [style.customClass] = "methodInComponent ()" ...

Cela appliquera la classe si la méthode de votre composant renvoie true. 

0
Paul

La réponse donnée fonctionne si vous avez peu d'éléments à modifier dans un composant donné, si vous devez modifier l'aspect général de votre application en fonction du choix de l'utilisateur (et à la volée), le seul moyen que j'ai trouvé jusqu'à présent est de: remplacez css dans le javascript comme suit:

this.stylesService.get().subscribe(({ customStyles }) => {
     const style = document.createElement('style');
     style.innerHTML = 
     `.picture {
         background-image: url(${customStyles.backgroundUrl});
     }
     h1, h2 {
         color: ${customStyles.primaryColor};
     }`;

     document.body.appendChild(style);
});
0
Thibaud Lacan