Saltar al contenido

NgStyle angular y directivas ngClass tutorialJun, 15thIn este tutorial, vamos a aprender acerca de cómo agregar y quitar …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo agregar y quitar stylesconditionally en angular. directiva de atributo

ngStyle

ngStyle nos ayuda para agregar y quitar estilos en línea de forma dinámica.

Veamos un ejemplo.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
h1color = 'red';
changeColor(){
this.h1color = "green" ;
}
}

Hello angular

En el código anterior, hemos añadido un objeto {backgroundColor: h1color} a la directiva ngStyle donde backgroundColor es nombre del estilo y h1color es una expresión a evaluar.

Si hacemos clic sobre un cambio de color estamos cambiando la backgroundColor del elemento h1 a verde. directiva de atributo

ngClass

ngClass ayuda a agregar y quitar los nombres de clases CSS de forma condicional.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
isActive = false;
changeColor() {
this.isActive = !this.isActive;
}
}
.my-color{ background-color: aqua;
}

.red-color{
background-color: red;
}

Hello angular

En el código anterior, hemos añadido [isActive? ‘Mi-color’: ‘rojo-color a ngClass directivewhere isActive es una expresión y mi color rojo y el color son los nombres de clases CSS. Si la propiedad

isActive es cierto que estamos añadiendo clase de mi color de elemento h1 de lo contrario se añade la clase de color rojo-color.