Directivas en Angular 4 y ngFor

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

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)

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

que diferencia entre var, let y const?

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

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

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

**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.

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 ?

<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 );
  }
}