Directivas en Angular 4 y ngFor

Clase 14 de 80 • Curso de Angular 4

Clase anteriorSiguiente clase

Resumen

Las directivas son una forma elegante y rápida de manipular la información, contamos con 3 tipos de directivas:

COMPONENTES: Son directivas que siempre tienen asignados templates de HTML.
ESTRUCTURALES: Nos permiten modificar el DOM, es decir manipular elementos de HTML.
ATRIBUTOS: A estas directivas les indicamos a través de HTML cómo se deben comportar de acuerdo con ciertas condiciones que definimos.

Jesus Sandrea

student•

En TypeScript es obligatorio a muerte poner el ; (Punto y Coma)??

Eduardo Pérez-Bermejo

student•

No, puesto que al transpilar a js ya nos lo va a hacer por nosotros automáticamente

Pablo Rivero

student•

De todas formas, creo que seria una llamada “buena costumbre” 😉

Junior Enrique Rojas

student•

¿Es necesario subir los 21 archivos cuando solo utilizamos dos?

Karel Alexander Ponce Salcedo

student•

No todos

Jherom Chacon

student•

No, puedes subir solamente los cambios que manejas usando Git

Ignacio Castillejo Gómez

student•

Pregunta: Si uno de los elementos del que voy a imprimir en el bucle quiero darle una clase concreta de CSS, y solo a uno. ¿Cómo lo hago? ¿Podría anidar un ngIf dentro de un ngFor?

Nicolas Iglesias Zingoni

student•

Si siempre vas a poder usar otras directivas dentro del ngFor, podes preguntar por el $index para saber cuando es el “x” elemento. ($index = posición en el array)

Ignacio Castillejo Gómez

student•

Gracias!

Juan Esteban Deossa Pertuz

student•

Directivas Las directivas son una forma rápida y eficiente de manipular la información de nuestro proyecto. Existen 3 tipos de directivas:

Componentes: Directivas que se les asignan una plantilla de HTML
Estructurales: Directivas que nos permiten manipular la información y estructura del DOM
Atributos: Directivas que nos permiten manipular a los elementos del DOM

Sebas Cardona

student•

Hola a todos,
pregunta: se necesita algún plugin o herramienta adicional para que funcione el *ngFor en atom??, es que tengo el código igual que el profe y no me da, muchas gracias.

Diego Forero

Team Platzi•

No te funciona o no te auto completa? puedes instalar plugins en atom que te ayuden con el autocompletado y con coloreado de sintaxis, pero no me queda claro la parte que no te funciona en atom.

Sebas Cardona

student•

gracias GOLLUM23, la verdad no fui claro, lo que pasa es que en atom ingrese el siguiente codigo en el .ts:

import { _Component } from ‘@angular/core’;

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

export class AppComponent {
title = ‘platzisquare’;
lugares:any = [
{nombre:‘floreria la gardenia’},
{nombre:‘donas la pasadita’},
{nombre:‘veterinaria huellitas’},
];

constructor(){

}

y en el html se ingreso así:

<ul> <li \*ngFor = “let lugar of lugares”>{{lugares.nombre}} </li> </ul>

tal y como dice el profe, pero cuando se compila y lo visualizo no me lo muestra como el ejemplo, de ahí la pregunta: si atom necesitaría alguna herramienta para que lea o reconozca TS? o si tengo algún error de sintaxis , muchas gracias por tu ayuda.

Jherom Chacon

student•

Directivas estructurales

David Navarro Rolon

student•

porque no aplica los estilos que tengo en el app.component.css???

Diego Forero

Team Platzi•

Lo que se me ocurre sin ver el código es que tengas mal escrita la ruta del llamado de app.component.css recuerda que debe ser así: ./app.component.css

David Navarro Rolon

student•

asi lo tengo, de hecho viene asi por defecto…

Víctor Hugo Rivas Sánchez

student•

ngFor: Directiva estructural que permite recorrer diferentes elementos de un arreglo

lugares:any = [
    {nombre: 'Florería la gardenia'},
    {nombre: 'Donas la pasadita'},
    {nombre: 'Veterinaria huellas'},
  ];

html

<ul>
  <li *ngFor="let lugar of lugares">{{lugar.nombre}}</li>
</ul>

Importante: Es necesario definir el arreglo como "any" porque puede esperar cualquier tipo de dato en un futuro (si trabajamos con servicios en el backend por ejemplo)

Alan Fermin

student•

¿Porqué aparece lugar.nombre, en vez de aparecer lugares.nombre?

Diego Forero

Team Platzi•

lugares es el array de elementos y lugar es el elemento del array que esta en ese momento en la iteración, el let lugar of lugares es un ciclo for donde cada elemento de lugares es asignado a la variable lugar durante esa iteración del ciclo.

Enrique Ortuno

student•

En Reactjs es 'casi' obligatorio el tener un elemento de identificacion por cada elemento que se agrega, aqui en Angular como se especifica eso?

David Navarro Rolon

student•

que pasa si omito el :any?

Diego Forero

Team Platzi•

Pueda dar un error ya que no sabe que tipo de objeto manejar, siempre recuerda que debes programar para tu yo del futuro, entre más explicito seas con tu código el día que le tengas que dar mantenimiento va a ser sencillo porque con solo leer el código entiendes que hiciste, muchas veces hay soluciones para problemas que son algo complejas y en un año o dos que quieras hacerle algún cambio no vas a recordar porque hiciste eso de esa forma.

Onasis Gonzalo Soto Castro

student•

Asocio :any con el tipo de datos Object que se usa en java sino me equivico…

Anthony Grimaldo Juarez Solis

student•

<div style="text-align: center;">
  <ul>
    <li  *ngFor="let lugar of lugares" >{{lugar.nombre}}</li>
  </ul>
</div>

  lugares: any = [
    {
      nombre: "item 1"
    },
    {
      nombre: "item 2"
    },
    {
      nombre: "item 3"
    }
  ];

Jesus Soto

student•

Perfecto , hasta ahora no he tenido dudas y lo que me ha pasado lo he solucionado con el curso.

Pablo Rivero

student•

Directivas: es una forma rápida y elegante de manipular la información. Existen tres tipos:

Componentes: tienen asignada un _template _de HTML.
Estructurales: con ellas modificamos el DOM.
Atributos: indican un comportamiento especifico al elemento que están asignadas de acuerdo a ciertas condiciones.

Sebastian Jordan

student•

Hola una consulta las precentaciones se pueden descarcar y donde. Gracias buen curso reforsando ng4

Diego Forero

Team Platzi•

Gracias por el reporte, las publicaremos lo más pronto posible.

Sebastian Jordan

student•

Gracias

Jherom Chacon

student•

Creando arreglos en TS

Jherom Chacon

student•

Concepto de directivas

Jherom Chacon

student•

Atributos

Jherom Chacon

student•

Concepto de directivas estructurales: son directivas que usamos para modificar el dom mediante rutinas programables, por ejemplo una estructura de repeticion como en el caso del ngFor.

Un ngFor es una especie de forEach en donde definimos una variable de un conjunto de elementos y usamos los elementos del recorrido por medio de String interpolation

<ul>
  <li *ngFor="let lugar of lugares">{{lugar.nombre}}</li>
</ul>

Jherom Chacon

student•

Uso de la directiva estructural "ngFor" *ngFor="let lugar of lugares">{{lugar.nombre}}