Directivas en Angular 4 y ngFor

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

TS

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)

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

**Directivas: ** son una forma muy elegante y rápida de manipular la información

Tenemos 3 tipos de directivas:
Componentes: Asignar un template de html.
Estructurales: permiten modificar información del DOM.
Atributos: Pueden modificar el elemento al que estan asignandas.

Para conocer el índice del arreglo, basta con hacer lo siguiente:

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

<ul>
<ng-container *ngFor = "let persona of personas">
    <li *ngIf="persona.edad >= 18">{{persona.nombre}}</li>
  </ng-container>
</ul>

eXCELENTE1

Porque Angular utiliza Node JS?
Que se renderiza en el servidor y que se renderiza en el cliente?
Y en que servidor se puede desplegar una SPA Angular localmente?

Componentes: Son directivas que siempre tienen asignados templates de HTML.
Estructurales: Nos permiten modificar el DOM pudiendo manipular los elementos del HTML.
Atributos: Con estas directivas en nuestro HTML podemos indicar como se deben comportar de acuerdo a ciertas condicione

la misma estructura para programar en objetos es la misma ,pero las aplicaciones la puedo ver desde la consola de node ,la pregunta en el directorio donde tengo la aplicacion se puede ejecutar ? para ver el codigo ?

que diferencia entre var, let y const?

<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"
    }
  ];

![](

hmm, no puedo seguir el ejemplo del API key porque no me deja avanzar si no meto una tarjeta de crédito.

No se cuanto tenga este curso pero ya van varias lecciones que esta outdate.

<div>
    <button type="button" (click) = "changeTitle( 'Nuevo nombre' )" > Click me! </button>
    <br>
    <hr/>
    <br>
    <input type="text" placeholder="Ingrese nombre" [(ngModel)] = "firstName" />
    <br>
    <input type="text" placeholder="Ingrese Apellido" [(ngModel)] = "lastName" />
    <br>
    <button type="button" (click) = "addPerson()" > Agregar! </button>
    <br>
    <span> {{message}} </span>
    
    <ul>
      <li *ngFor="let person of persons"> {{person.firstName}} - {{person.lastName}} </li>
    </ul>
  </div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'berckmanCurso';
  firstName:string = "";
  lastName:string = "";
  message:string = "";

  persons:Array<Object> = [
    {firstName: "Newman" , lastName: "Fajardo"}
  ];
 
  changeTitle(title){
    this.title = title;
  }

  addPerson(){
    this.persons.push({
      firstName: this.firstName , 
      lastName: this.lastName
    });
    this.message = "Persona guardada";

    setTimeout( () => { this.message = ""; } , 2000 );
  }
}