Para qué usar las directivas incorporadas en Angular

La lista de frameworks y tecnologías para desarrollar y crear aplicaciones y sitios web crece más cada día. Con el mundo entero en la internet, las empresas y distintos negocios han mudado todos sus procesos de venta y publicidad a la web y por eso han nacido distintas aplicaciones móviles y sitios web dinámicos, muchos de ellos construidos con Angular.

Antes de explicar cómo un desarrollador puede usar las directrices incorporadas en este framework definamos Angular. Esta tecnología se destaca por ofrecer al desarrollador una buena experiencia, al mismo tiempo que le brinda como opción varias funciones bastante potentes, como una inyección de dependencia exhaustiva, una capa de abstracción de base de datos expresiva, colas y trabajos programados, pruebas de integración y unidad y más.

Angular brinda a una empresa la posibilidad de tener un sitio web escalable con un nuevo diseño. Para una empresa de software, utilizar este framework tiene varios beneficios y usos, entre los que se encuentran: crear foros, portales de negocios, plataformas de crowdfunding, mercados, listados de propiedades, etc.

Entre las grandes empresas que han confiado en Angular para desarrollar sus sitios web y aplicaciones, están: GitHub (foro), Google, Forbes, Indiegogo, BMW (calculadora de precios, motor de búsqueda de ofertas), portal para desarrolladores de Deutsche Bank, Crunchbase, Nike, Xbox, Udacity, YoutubeTV, Firebase, AT&T y Adobe.

Directivas incorporadas en Angular

Las directivas de Angular te permiten usar sentencias if y bucles for, y agregar otro comportamiento al código HTML de cualquier proyecto que trabajes con este framework.

Directivas de Angular y su uso

1. Nglf: esta directiva se utiliza cuando quieres mostrar algún bloque HTML solo si cumple con ciertas condiciones. 
2. Ngfor: se utiliza para cuando necesites que un bloque se repita varias veces.
3. ngClass: esta directiva añade estilo condicional utilizando una clase.
4. ngStyle: añade estilo condicional en la línea.
5. ngModel: Esto te permite hacer un enlace bidireccional. Esto significa que puedes pasar datos en ambas direcciones entre el archivo HTML y TypeScript.
6. ngSwitch: esta directiva te permite agregar una sentencia switch con varios valores y casos para seleccionar. 

Cómo usar las directivas nglf, ngfor y ngClass de Angular

Nglf

Primero, añade dos variables de TypeScript a tu archivo:

noPlaylists: boolean = false;
playlists: any = [];
 
constructor() { }
 ngOnInit(): void {
 if(this.playlists.length === 0) {
 this.noPlaylists = true;
 }
}

En el HTML, añade la sentencia *ngfl:

<div *ngIf="noPlaylists" class="center">
 <span class="errorMessage">There are no playlists available.</span>
</div>

ngFor

En el archivo TypeScript añade: 

playlists: any = [
 {"name": "Rock", "numberOfSongs": 5},
 {"name": "Contemporary", "numberOfSongs": 9},
 {"name": "Popular", "numberOfSongs": 14},
 {"name": "Acoustic", "numberOfSongs": 3},
 {"name": "Wedding Songs", "numberOfSongs": 25},
 {"name": "Metal", "numberOfSongs": 0},
];

En el archivo HTML añade *ngFor

<span class="successMessage">Playlists found.</span>
<div *ngFor="let playlist of playlists" class="item">
 <div class="flex">
 <span>{{playlist.name}}</span>
 <span>{{playlist.numberOfSongs}} songs</span>
 </div>
</div>

ngClass

Primero, añade en el archivo CSS:

.songs {
 background-color: #F7F5F2;
}
.noSongs {
 background-color: #FFA8A8;
}

Dentro del bucle for del paso anterior, agregue la directiva de atributo ngClass.

<div *ngFor="let playlist of playlists" class="item" [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'">
 <div class="flex">
 <span>{{playlist.name}}</span>
 <span>{{playlist.numberOfSongs}} songs</span>
 </div>
 </div>

Desarrollador Angular en Rootstack

Con estas directivas de Angular en tu aplicación o sitio web tendrás más opciones de desarrollo y diseño.

Nuestros expertos en Rootstack han utilizado este framework para dar solución a los problemas técnicos de nuestros más de 200 clientes a nivel internacional.

Te recomendamos en video