Directivas *ngIf y *ngFor en Angular2

Hola a todos, hoy os voy a explicar como funcionan las directivas *ngIf y *ngFor.

ngIf y ngFor son un par de directivas que nos serviran para relacionar nuestro html con nuestro typescript.

Ambos los podemos poner como atributo de una etiqueta html.

ngIf lo que hace es mostrar el elemento y todo su contenido, si la condición puesta es verdadero. Por ejemplo:


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

@Component({
  selector: 'app-component-example',
  templateUrl: './component-example.component.html',
  styleUrls: ['./component-example.component.css']
})
export class ComponentExampleComponent implements OnInit {

  cargar: Boolean = false;

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      this.cargar = true;
    }, 5000);
  }

}






<div *ngIf="cargar">
  


<h1>Hola mundo</h1>



</div>




Cuando pasen 5 segundos el elemento se mostrará, porque cargar pasa a ser verdadero. Puedes complicar todo lo que quieras la condición.

Recuerda que puedes usar los atributos que necesites.

ngFor sirve hacer un bucle, generando el mismo elemento x veces con el contenido que le indiques. Por ejemplo:


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

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

  nombres: String[] = ['Fernando', 'Alberto', 'Pedro', 'Jose'];

  constructor() { }

}




<ul>
  

<li *ngFor="let nombre of nombres">
    {{nombre}}
  </li>


</ul>



Fíjate que usamos let nombre of nombres recorriendo todos los nombres que tenemos en el array del fichero typescript.

Dentro del elemento li, podemos acceder al nombre, que es la variable que coge el valor de cada posición del array, tenemos 4 nombres por lo que creara 4 elementos <li>

Recuerda que debe empezar en el elemento que queremos replicar.

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

¿Te ha gustado y quieres apoyarme? ¡Sé mi patrón!
Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *