Saltar al contenido

Lista angular Directivas tutorialFeb, 3rdIn este tutorial, vamos a aprender acerca de los diferentes tipos de construcción …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de los diferentes tipos de incorporado en directivas en angular.

Contenido

  • Directiva ngIf
  • ngFor
  • ngModel
  • ngClass
  • ngStyle

ngIf

ngIf nos ayuda a agregar o quitar elementos HTML condicionalmente en el DOM.

Ejemplo:

Im happy

En el código anterior, hemos añadido * ngIf = “isActive” de modo que el elemento h1 sólo se hacen en el DOM si la propiedad isActive es cierto. Directiva

ngFor

ngFor nos ayuda para recorrer la matriz de elementos y representar cada elemento en el DOM.

Ejemplo:

  • {{user}}

Aquí hemos añadido una ngFor = “permitir al usuario de los usuarios” donde los usuarios es una matriz que estamos bucle, en cada variable de usuario iteración, está señalando el usuario diferente presente en la matriz.

ngModel

ngModel nos ayuda a hacer vinculantes en angular significa que podemos sincronizar los datos en ambas direcciones de datos bidireccionales. Directiva

Para uso ngModel primero tenemos que importar el FormsModule dentro de nuestro archivo app.module.ts y añadirlo a la matriz de importaciones.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Usando directiva ngModel

En el código anterior, hemos añadido [(ngModel)] = “Hola” para elemento de entrada donde la propiedad hola bindsto el valor de entrada en ambas direcciones. Directiva

ngClass

ngClass nos ayuda a añadir o quitar nombres de clases CSS dinámicamente en función de una condición particular.

Ejemplo:

Hello angular

En el código anterior, hemos añadido [isActive? ‘Roja’: ‘verde con la directiva ngClass donde isActiveis una expresión y el rojo, el verde son los nombres de clases CSS.

Si es isActive se añade verdadera clase de color rojo con el elemento h1 lo contrario se añade la clase verde. Directiva

ngStyle

ngStyle nos ayuda a establecer los estilos en línea a los elementos HTML.

Ejemplo:

Hello angular

Aquí hemos añadido un objeto { ‘background-color’: MyColor} con la directiva ngStyle donde background-color es un nombre de estilo CSS MyColor y es una expresión JavaScript para ser evaluados.