Implementar la Directiva ngStyle en Angular
La directiva de estilo angular le permite aplicar estilos a sus elementos HTML. La directiva ngStyle es una variación de la directiva de estilo en Angular.
Este artículo discutirá el uso de la directiva ngStyle en Angular.
la Directiva ngStyle en Angular
La directiva ngStyle aplica estilos a un elemento HTML usando selectores CSS. Esta directiva funciona con el motor de plantillas Angular que le permite tener más control sobre cómo se debe representar un documento HTML.
La directiva ngStyle es una de las directivas más populares en Angular. Se puede usar para varios propósitos, como aplicar clases CSS personalizadas y diseñar elementos de formulario.
Sintaxis:
<element [ngStyle]="{'styleNames': styleExp}">...</element>
El valor de la directiva de atributo ngStyle puede ser cualquier expresión binaria o ternaria condicional. Además, maneja cualquier llamada de método definida dentro del controlador, que el controlador puede controlar según las necesidades.
También podemos usar la directiva ngStyle para administrar la vista y el estilo CSS en función del valor del modelo, de modo que se ejecute ngStyle y el estilo CSS se actualice cuando cambie el valor del modelo.
Pasos para implementar la directiva ngStyle en Angular
La directiva ngStyle es sencilla y se puede aplicar a cualquier elemento del DOM. Debe seguir algunos pasos antes de usarlo en su sitio web.
-
Agregue
ngStylecomo una dependencia en su módulo de aplicación Angular. -
Configurar los estilos con clases CSS o estilos en línea (código CSS).
-
Usa la directiva
ngStyleen tu plantilla HTML. -
Use el atributo
ngClasspara especificar qué clases de CSS se deben aplicar a un elemento cuando coincide con una condición determinada.
Analicemos un ejemplo utilizando los pasos mencionados anteriormente.
Código TypeScript:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
canSave = true;
}
Código HTML:
<h2>Example of ng-style in Angular</h2>
<button
[ngStyle] = "{
'backgroundColor' : canSave ? 'pink' : 'blue',
'color' : canSave ? 'red' : 'yellow',
'margin-left': '200px',
'padding': '30px',
'margin-top': '200px'
}"
>A simple button</button>
En el ejemplo, creamos un botón simple y le dimos margen, relleno, fuente y color de fondo con la ayuda de la directiva ngStyle.
Haga clic aquí para ver la demostración del código anterior.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook