Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 5H : 15M : 27S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Directivas en Angular 4 y ngFor14/80

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.

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

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

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?

Directivas estructurales

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

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.

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
<ul>
  <li *ngFor="let l of locale">{{ l.name }}</li>
</ul>

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

Las directivas son la manera que extendemos el html!.

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.

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

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

que pasa si omito el :any?

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

Genial

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

<ul> 
  <li *ngFor="let lugar of lugares">{{lugar.nombre}}</li>
</ul>
export class AppComponent {
  title = 'Platzisquare';
  lugares:any=[{nombre:'floreria'},{nombre:'donas'},{nombre:'veterinaria'}];
 }

Creando arreglos en TS

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

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

Concepto de directivas

Componentes

Atributos

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>

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

![](Screenshot (28).png

Exc curso.

<input type="text" placeholder="Nombres" [(ngModel)]="nombres" />
<input type="text" placeholder="Apellidos" [(ngModel)]="apellidos" />
<br />
{{nombres + ' ' +  apellidos}}  

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

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

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

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?

Directivas estructurales

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

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.

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
<ul>
  <li *ngFor="let l of locale">{{ l.name }}</li>
</ul>

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

Las directivas son la manera que extendemos el html!.

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.

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

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

que pasa si omito el :any?

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

Genial

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

<ul> 
  <li *ngFor="let lugar of lugares">{{lugar.nombre}}</li>
</ul>
export class AppComponent {
  title = 'Platzisquare';
  lugares:any=[{nombre:'floreria'},{nombre:'donas'},{nombre:'veterinaria'}];
 }

Creando arreglos en TS

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

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

Concepto de directivas

Componentes

Atributos

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>

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

![](Screenshot (28).png

Exc curso.

<input type="text" placeholder="Nombres" [(ngModel)]="nombres" />
<input type="text" placeholder="Apellidos" [(ngModel)]="apellidos" />
<br />
{{nombres + ' ' +  apellidos}}  

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