Inicio del curso

1

De qué tratará este curso sobre Angular 4

Introducción a Angular 4

2

Versionamiento en Angular

3

¿Qué es Angular? Versiones y ventajas

4

Typescript: qué es

5

Introducción al Proyecto: PlatziSquare!

Setup del Ambiente de Trabajo

6

Herramientas de trabajo y Angular CLI

7

Generación y estructura de Angular 4

8

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

9

Para qué nos sirven los Módulos y Componentes

10

Tipos de Data Binding y String Interpolation

11

Property Binding

12

Event Binding

13

Two Way Data Binding

14

Directivas en Angular 4 y ngFor

15

Directiva ngIf

16

Instalando librerías con NPM (Google Maps)

Directivas

17

Directivas ngStyle y ngClass

18

Directiva ngSwitch

19

Directiva de atributo

20

Host Listeners

21

Host Binders

Angular UI

22

Angular Material y Bootstrap

23

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

24

Qué hace el router en Angular 4

25

Implementación de Rutas en el Proyecto

26

Diferencias entre href y routerLink

27

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

28

Parámetros en Rutas

29

Parámetros tipo Query

30

Creando una vista de detalle para el proyecto

31

Creando la página de contacto para PlatziSquare

Servicios

32

Qué son los servicios en Angular 4

33

Creando nuestro propio servicio

34

Configurando Firebase en nuestro proyecto

35

Guardando Records en Firebase

36

Obteniendo records desde Firebase

37

Obteniendo coordenadas usando Geocoding

38

Reto: Crear una vista para editar records

39

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

40

Funcionamiento de los llamados Http y Sockets

41

Qué es una arquitectura cliente - servidor

42

Enviando llamados tipo POST

43

Enviando llamados tipo GET

44

Formateando respuestas del servidor con el operador map()

45

Manejando errores HTTP

Pipes

46

Utilidad de los Pipes en Angular 4

47

Usando los pipes por defecto de Angular

48

Parámetros en pipes

49

Creando nuestro propio pipe

Animaciones en Angular

50

Configurando animaciones en nuestro proyecto

51

Transiciones

52

Callbacks

53

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

54

Introducción a unit tests

55

Configuración de testing por default

56

Corriendo los tests

57

Creando unit tests para componentes

58

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

59

Cómo funcionan los JSON Web Tokens

60

Preparación de vistas para login y registro

61

Registrando usuarios

62

Loggeando usuarios

63

Protección de Rutas

64

Autenticación con redes sociales.

65

Logout

RxJS

66

Qué es RxJS

67

Configurando RxJS en nuestro proyecto

68

Uso de los Observables

69

Implementando un TypeAhead

70

Implementando un TypeAhead 2

71

Solución al reto autocompletar los campos de dirección usando observables

Publicando nuestro proyecto

72

Publicando en Firebase Hosting

Fin del curso

73

Conclusión ¿Qué aprendimos en el curso?

74

Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario

Sesiones en vivo

75

Creando un traser bullet de PlatziSquare

76

Sesión de preguntas y respuestas

77

Release de Angular 5

78

Sesión de preguntas y respuestas

79

Angular Universal

Contenido Bonus

80

Actualización de angular, versión 6.0

Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Instalando librerías con NPM (Google Maps)

16/80
Recursos

Vamos a instalar Angular Google Maps usando npm.

Aportes 94

Preguntas 20

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Para continuar el curso sin utilizar google maps les recomiendo Mapbox aquí un vídeo de como implementarlo.
https://www.youtube.com/watch?v=gdKWeboPxgY

Aqui pueden hacer los ejercicios sin problemas de configuración https://stackblitz.com/ Mientras pasamos a la version mas reciente de Angular

Les comparto otro ejercicio donde pueden integrar lo aprendido de las sesiones de *ngFor, *ngIf y AGM.

app.component.html

<agm-map [latitude]="37.4027209" [longitude]="-122.1811808"> <!-- Coordenadas del mapa: Silicon Valley -->

  <ng-container *ngFor="let company of companies"> <!-- Colocamos los marcadores en el mapa -->
    <agm-marker 
      *ngIf="company.active" 
      [latitude]="company.coords.lat"
      [longitude]="company.coords.lng"
    >
    </agm-marker>
  </ng-container>
    
</agm-map>

<hr>

<ul>
  <ng-container *ngFor="let company of companies"> <!-- Colocamos los nombres en la lista no ordenada -->
    <li *ngIf="company.active">{{ company.name }}</li>
  </ng-container>
</ul>

app.component.ts

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


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


export class AppComponent {

  title: string = 'PlatziSquare';
 
  companies = [
    {
      active: true, 
      name: "Google", 
      coords: {
        lat: 37.4219999, 
        lng: -122.0862462
      }
    },
    {
      active: true, 
      name: "Apple", 
      coords: {
        lat: 37.3316743, 
        lng: -122.0302933
      }
    },
    {
      active: true, 
      name: "Dropbox",
      coords:{
        lat: 37.7813891, 
        lng: -122.3938311
      }
    }
  ];

}

Ya que la página https://angular-maps.com/guides/getting-started/ no funciona, aquí la etiqueta que se coloca

<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>   
</agm-map>  ```

Que tal comunidad. Les comento que la api de google maps se tienen que registrar para poder acceder para generar su api key, despues de eso deberan registar una tarjeta de credito en facturacion para poder hacer uso de ella si no, el codigo no funciona (por que ya no es gratis). cuando uno se registra google te da de prueba hasta 300usd para testing y tiene vigencia de 1 año. Despues de registrar la cuenta google hace un cobro temporal de 20 pesos mxn o 1 usd.

No se si a otros les pasara pero la pagina oficial de Angular Map no funciona no muestra la pagina de la guía de inicio.

https://angular-maps.com/guides/getting-started

Por acá dejo mi código.
Yo use la herramienta mapbox.
Se instala la herramienta con npm install mapbox-gl
Luego se agregan los estilos en el index.html

<link href='https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css' rel='stylesheet' />

app.component.ts

import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
import * as mapboxgl from "mapbox-gl";

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

export class AppComponent implements OnInit {

  title: string = 'Angular';
  name: string = '';
  lastName: string = '';
  notReady: boolean = true;
  map: mapboxgl.Map;
  coordinates: any;
  places: any = [
    { active: true, name: "Florería la Gardenia" },
    { active: true, name: "Donas Vida Dulce" },
    { active: true, name: "Veterinaria Huellitas" },
    { active: true, name: "Sushi Roll" },
    { active: true, name: "Hotel la Gracia" },
    { active: true, name: "Zapatería Clavo" },
    { active: false, name: "Florería la Gardenia" },
    { active: false, name: "Donas Vida Dulce" },
    { active: false, name: "Veterinaria Huellitas" },
    { active: false, name: "Sushi Roll" },
    { active: false, name: "Hotel la Gracia" },
    { active: false, name: "Zapatería Clavo" }
  ];

  ngOnInit():void {
    mapboxgl.accessToken = environment.mapboxKey;
    this.map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-74.0700526, 4.6489681],
      zoom: 10
    });
    this.createMarker(-74.0700526, 4.6489681)
  }

  createMarker(lng: number, lat: number): void {
    const marker = new mapboxgl.Marker({
      draggable: true
    })
    .setLngLat([lng, lat])
    .addTo(this.map)

    marker.on('drag', () => {
      this.coordinates = marker.getLngLat()
    })
  }

  check():void {
    if (this.name === '' || this.lastName === '') {
      this.notReady = true;
    } else {
      this.notReady = false;
    }
  }

  hello():void {
    alert(`Welcome to this App ${this.name} ${this.lastName}`);
  }

}

app.component.html


<div id="textcenter">
  <h3>{{ title }} app is running!</h3>
  Tu nombre es {{ name }} {{ lastName }} <br />
  <input
    type="text"
    placeholder="Nombre"
    (keyup)="check()"
    [(ngModel)]="name"
  />
  <input
    type="text"
    placeholder="Apellido"
    (keyup)="check()"
    [(ngModel)]="lastName"
  /><br />
  <button [disabled]="notReady" (click)="hello()">Hi</button>
</div>
<br />
<div class="inline" id="map"></div>
<div class="textcenter inline" id="list">
  <ul>
    <ng-container *ngFor="let place of places">
      <li *ngIf="place.active">{{ place.name }}</li>
    </ng-container>
  </ul>
  {{coordinates}}
</div>

app.component.sass


#map
  margin-left: 100px
  width: 650px
  height: 450px
  background-color: #006060

#list
  margin-left: 10px
  vertical-align: top

#textcenter
  text-align: center

.inline
  display: inline-block

Alguien sabe por que mi google maps en la pagina no me carga correctamente?

![](

Tengo un verdadero problema aca. En absolutamente todas las opciones me solicita pagar por usar el servicio. Estoy varado con el proyecto ya que el curso se encuentra desactualizado al momento en el que estoy realizando el curso. Puede alguien ayudarme? no esta claro cuánto cuesta el servicio pero parece que son $200 y no tengo ese dinero!


 personas:any = [
    {edad: '20', nombre: 'Jose miguel'},
    {edad: '17', nombre: 'Carlos Luis'},
    {edad: '45', nombre: 'Andres Jose'},
    {edad: '22', nombre: 'Pedro miguel'},
    {edad: '37', nombre: 'Jose Gustavo'},
    {edad: '41', nombre: 'Santiago jose'},
    {edad: '16', nombre: 'Miguel Angel'},
    {edad: '18', nombre: 'Paul jose'},
  ]
en el html

<ul *ngFor="let persona of personas">
  <li *ngIf="persona.edad >= 18">
    {{persona.nombre}} tienes {{persona.edad}} años de edad.
  </li>
</ul>
  <ng-container *ngFor="let item of Lugares">
      <li *ngIf="item.activo == true" >{{item.nombre}}</li>
  </ng-container>```

todo el proceso lo hice pero en el navegador me sale en maps y luego me sale un error con ApiNotActivatedMapError

En el TS

  persons:any = [
    {Edad: 15, nombre: 'Maria'},
    {Edad: 25, nombre: 'Juana'},
    {Edad: 12, nombre: 'Nestor'},
    {Edad: 32, nombre: 'Lucas'},
    {Edad: 44, nombre: 'Manuel'},
    {Edad: 70, nombre: 'Paula'}

  ];```


En html

<div>
<ul>
<ng-container *ngFor = “let person of persons”>
<li *ngIf = “person.Edad>18” >{{person.nombre}}</li>
</ng-container>
</ul>
</div>


El css lo agrega en e style.css pero en la documentación dice que debe ir dentro de app.component.css, supongo que va ahí por que va a ser parte del componente o es lo mismo?

No me reconocía el atributo height para la etiqueta agm-map. Lo apliqué a la clase sebm-google-map-container:

agm-map.sebm-google-map-container {
    height: 300px;
}

Pregunta: He seguido los pasos y comandos en este curso tal cual. ¿Cómo se que estoy usando Angular 4 y no Angular 6 o 7?

buenas clases

Intente obtener mi llave para google maps y me muestra el siguiente mensaje :
Reminder: To use the Maps JavaScript API, you must get an API key and you must enable billing. You can enable billing when you get your API key (see the Quick guide) or as a separate process (see Usage and Billing).
Y no me deja obtenerla si no ingreso mus datos de facturacion. ¿Puedo obtener la llave sin ingresar estos datos?

Interesante lo fácil de importar e incluir en le proyecto

Me parece que la Api de google maps se ha vuelto de pago.

si no les reconoce el @agm/core, se debe ejecutar el siguiente comando:
npm install @ agm / core --save

export interfaces person {
edad: number;
nombre: string;
}

Google me pidió tarjeta de crédito, siempre tengo una a mano de mis compañeros de trabajo por suerte.

![](

Ha alguien le ha salido este error? ya reviste todos los comentarios y creo que ha nadie, me pordian ayuar? no me aparece el mapa definicitvamente 😦

En app.component.ts:

<   personas:any=[
    {nombre:'Constanza',edad:'25'},
    {nombre:'Sara',edad:'51'},
    {nombre:'Cristian',edad:'23'},
    {nombre:'Nelson',edad:'54'},
    {nombre:'Daniela',edad:'33'},
    {nombre:'Elizabeth',edad:'26'},
    {nombre:'Eduardo',edad:'5'},
    {nombre:'Alonso',edad:'6'}
  ]>

En app.component.html:

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

En: src/app/app.component.ts

  personas:any = [
    {nombre: "Juan", edad:18 },
    {nombre: "Felipe", edad:25 },
    {nombre: "Valeria", edad:14 },
    {nombre: "Oscar", edad:11 },
    {nombre: "Daniela", edad:5 },
    {nombre: "Diego", edad:38 }
  ]

En: src/app/app.component.html

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

Si tuvieron problemas como yo hagan lo siguiente:

  1. Entran a este link
  2. Van al botón Consola (arriba a la derecha)
  3. Crean un nuevo proyecto
  4. A la izquierda hay dos opciones, que les aparezca
    a. “Apis y servicios” -> credenciales (En caso de ya tener el proyecto de antes”
    b. Entran a “Maps JavaScript API” y dentro del mismo a la izquierda seleccionan “credenciales”
  5. Ahí ven la Api key

Desplegar la lista de personas.

<div style="text-align: center">
  <ul>
        <ng-container *ngFor="let persona of personas">
          <li *ngIf="persona.edad >= 18" >{{persona.nombre}} tiene {{persona.edad}} años de edad.</li>
        </ng-container>
  </ul>

</div>

Mi lista de personas

  personas:any = [
      { edad:20,nombre:'Jose'},
      { edad:25,nombre:'Manuel'},
      { edad:15,nombre:'Fabian'},
      { edad:18,nombre:'Malia'},
      { edad:12,nombre:'Juan'},
      { edad:45,nombre:'Pedro'},
      { edad:60,nombre:'Mario'},
      { edad:15,nombre:'Piter'},
      { edad:21,nombre:'Pepe'}
  ];
<ul>
  <ng-container *ngFor="let persona of personas">
    <ul>
      <li *ngIf="persona.edad>=10">{{persona.nombre}}</li>
    </ul>
  </ng-container>
</ul>

personas: any = [
{nombre: ‘Dyego’, edad: 22},
{nombre: ‘Maria’, edad: 2},
{nombre: ‘Juan’, edad: 20},
{nombre: ‘Andres’, edad: 20},
];

Una buena alternativa a google maps es una libreria llamada Leaflet que es una libreria Javascript de codigo abierto para el uso de mapas interactivos. Tiene una muy buena documentacion. Y aquí hay un módulo para implementarlo con Angular

Hola, les comparto una solución
Dentro del app.component.ts declaré dos variables

		MAYORIA_EDAD: number = 18
		edad: number = 0

Ahí mismo hice el arreglo de las personas:

		 personas: any =[

      {nombre: 'Karla Barrios', edad: 20},
      {nombre: 'Demetrio Del Carmen', edad: 19},
      {nombre: 'ErnesGar', edad: 47},
      {nombre: 'Mastuc y puppi foreverrr prro', edad: 0}
  ];

	

Seguido de una función que retornaba si la edad de la persona era igual o mayor a la MAYORIA_EDAD ojo, es mayor o igual por que de otra manera no muestra a ninguno o muestra a todos.


      verificadorEdad(edad){
          return edad >=this.MAYORIA_EDAD
      }

Ahora, para finalizar, en app.component.html hice lo siguiente:
hice un ngIf el cual invocaba a la función y le pasaba a las personas que ya estaban siendo leídas con el ngFor:

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

That’s it! Un saludo.

1.declarar arreglo de personas con los atributos age que contendrá la edad y el atributo nombre

2.agregar el ng-container y el ul con la condicion de que age sea mayor a 18

3.resultado

Para completar la tarea propuesta, se crea un arreglo llamado personas en el app.component.ts que contenga la edad y nombre de varias personas:

Luego, en el app.component.html creamos un container que recorra el arreglo personas y que nos muestre un listado con aquellas que sean mayores de edad:

Aquí mi solución al ejercicio propuesto:

<h5>Listado de Personas</h5>
<ul>
  <ng-container *ngFor="let person of persons">
      <li *ngIf="person.adult">
          {{person.name}}
        <ul>
          <li>Edad: {{person.age}}</li>
          <li>Lugar de Nacimiento: {{person.placeOfBirth}}</li>
        </ul>
      </li>
  </ng-container>
</ul>
/** Ejercicio 02 */
export class AppComponent {
  title = 'Platzisquare';
  persons:any = [
    {adult: false, name: "Roberto Arroyo", age: 28, placeOfBirth: "Paracho Michoacán"},
    {adult: false, name: "Alma Legorreta", age: 29, placeOfBirth: "Uruapan, Michoacán"},
    {adult: false, name: "José Pérez", age: 13, placeOfBirth: "Morelia, Michoacán"},
    {adult: false, name: "Diana Olguin", age: 23, placeOfBirth: "Tirindaro, Michoacán"},
    {adult: false, name: "Pedro Moreno", age: 8, placeOfBirth: "Guadalajara, Jalisco"},
    {adult: false, name: "Julio Castro", age: 34, placeOfBirth: "Hermosillo, Sonora"},
    {adult: false, name: "Cosme Fulanito", age: 18, placeOfBirth: "Uruapan, Michoacán"},
  ];

  constructor() {
	/** Reemplazo la validación en el html <li *ngIf="persons.age >= 18"> 
		con un foreach sobre el array declarado en el archivo TypeScript*/
    this.persons.forEach(item => {
      if ( item.age >= 18)
        item.adult = true;
    });
  }
}

Se deberia de usar un array pero al momento de mostrarlo colocar algun tipo de css y darle un estilo mas guapo a la tabla o hacer uso de librerias de dataTable o angular material con su tabla o la libreria de CDK! Estoy entusiasmado y ya tengo conocimiento previo ! Repasos y reforzando conocimiento con ustds!

Con respecto al reto:

en app.component.ts

personas:any = [
    {nombre:'Pedro', edad:15},
    {nombre: 'Julia', edad:18},
    {nombre: 'Maria', edad: 23},
    {nombre: 'Carlos', edad:32}
  ];```

en app.component.html



<hr>

<h1>Listado de personas mayores de edad</h1>
<ul>
<ng-container *ngFor=“let persona of personas”>
<li *ngIf=“persona.edad >= 18”>
{{persona.nombre}}
</li>
</ng-container>
</ul>

<hr>

<h1>Listado de personas menores de edad</h1>

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

En: src/app/app.component.ts

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

Cuando ejecute el comando me salio el siguiente error

<npm WARN @agm/[email protected]1.0.0-beta.5 requires a peer of @angular/[email protected]^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/[email protected]1.0.0-beta.5 requires a peer of @angular/[email protected]^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})>
/* Inicializando el array antes del constructor  en app.component.ts */
personas:any = [
    {nombre:'Pedro', edad:15},
    {nombre: 'Julia', edad:18},
    {nombre: 'Maria', edad: 23},
    {nombre: 'Carlos', edad:32}
  ];


// ... luego en el  app.component.html

<p>Listado: Personas mayores de edad</p>
<ul>
<ng-container *ngFor=“let persona of personas”>
<li *ngIf=“persona.edad >= 18”>
{{persona.nombre}}
</li>
</ng-container>
</ul>

Va mi aporte de acuerdo a lo que habiamos hecho:

<!--The content below is only a placeholder and can be replaced.-->
<agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
<hr/>
<ul>
  <ng-container *ngFor="let persona of personas">
   <li *ngIf="persona.edad > 17" >{{persona.nombre}}</li>
  </ng-container>
</ul>

<router-outlet></router-outlet>```



personas:any = [
{edad: 18, nombre: ‘Esteban Garcia’},
{edad: 21, nombre: ‘Jorge Vargas’},
{edad: 38, nombre: ‘Cesar Meza’},
{edad: 24, nombre: ‘Joel Valdez’},
{edad: 16, nombre: ‘Selene Rojo’},
{edad: 13, nombre: ‘Lluvia Reyes’},
{edad: 28, nombre: ‘Jesus Maria’},
{edad: 32, nombre: ‘Gabriela Rojo’},
{edad: 17, nombre: ‘Esteban Moreno’},
{edad: 23, nombre: ‘Luis Garcia’},

];


Buena tarde
Las api parece ser que ya no estan gratuitas

Algun compañero que tenga algun key para la api?
muchas gracias

HTML

TS

personas:any =[
{ nombre : ‘Mayra Tarazona’, edad : 15},
{ nombre : ‘Sergio Garcia’, edad : 23}
]

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

ufff tuve que actualizar angular-cli para poder actualizar las dependecias mostrar el mapa…Para los que vayan a ver el curso y les pase lo mismo, antes de instalar el map usen esto npm install -g npm-check-updates

TypeScript

personas:any = [
	{ nombre : ‘Ruben Garcia’, edad : 27},
	{ nombre : ‘Luna Estrella’, edad : 13},
	{ nombre : ‘Soila Mesa’, edad : 43},
	{ nombre : ‘Alan Brito’, edad : 80},
	{ nombre : ‘Cabeza de Toro’, edad : 25},
]

HTML

<ul>
	<ng-container *ngFor=“let item of personas” >
		<li *ngIf=“item.edad >= 21” >{{item.nombre}}</li>
	</ng-container>
</ul>

Como hago para no subir mi api key al github. Algun archivo de configuracion como en Laravel (.env) que pueda crear?

Hola, como estan? Estoy terminando el modulo del curso de angular y no puedo activar el keycode para la google maps, me pide que pague por servicios cloud? Alguien me puede orientar?

personas:any = [
  {nombre:'Estefania Rodriguez', edad:23},
  {nombre:'Joana Rodriguez', edad:25},
  {nombre:'Juan Lopez', edad:10},
  {nombre:'Ignacio Fernandez', edad:16}
];


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


src/app/app.component.ts

personas:any = [
    {
      edad:25,
      nombre:"Juan",
    },
    {
      edad:30,
      nombre:"Carlos",
    },
    {
      edad:17,
      nombre:"Pedro",
    }
  ];

Menos mal que he conseguido hacerlo funcionar jajaja

Despues de Utilizar la Api de google maps me salio este error no se que hice mal pero la borre otra vez y tampoco ,tambien comprobe el proxy y los corta fuegos pero nada tal vez alguien me pueda ayudar gracias.

Lo hice con 21 años.

app.component.html

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

app.component.ts

personas:any = [
    {nombre:'Alfredo', edad:'18'},
    {nombre:'Claudia', edad:'12'},
    {nombre:'Gledys', edad:'23'},
    {nombre:'Draco', edad:'10'},
    {nombre:'Hans', edad:'20'},
    {nombre:'Marisol', edad:'50'},
  ];```

app.component.html

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

     </li>
  </ng-container>
</ul>```



personas:any=[
{nombre:‘Luis’ ,edad:‘10’},
{nombre:‘Juan’ ,edad:‘20’},
{nombre:‘Carlos’,edad:‘30’},

];```

App.component.ts

Personas : any = [
{Nombre: ‘Juan Tamariz’, Edad: ‘23’},
{Nombre: ‘Ema Madera de Gallo’, Edad: ‘42’},
{Nombre: ‘Omar Motta’, Edad: ‘33’},
{Nombre: ‘Elsa Patero’, Edad: ‘50’},
{Nombre: ‘Gustavo Racho’, Edad: ‘63’},
{Nombre: ‘Elsa Badillo’, Edad: ‘9’}
];

++App.component.html
++

<ul>
<ng-container *ngFor=“let persona of Personas”>
<li *ngIf=“persona.Edad>=34”>{{persona.Nombre}}</li>
</ng-container>
</ul>

—TS—
users:any = [
{active:true, name:“Jose”, age:22},
{active:true, name:“Danny”, age:28},
{active:true, name:“Alejo”, age:30},
{active:false, name:“DannyBlack”, age:17},
];

—HTML—
<ul>
<ng-container *ngFor=“let user of users; let i = index”> <!-- *ngFor -->
<li *ngIf=“user.age>18”>{{i}} {{user.name}}</li> <!-- *ngIf -->
</ng-container>
</ul>

se agrega en app.component.ts las lineas

export class AppComponent {
title = ‘platziSquare’;
lugares:any=[
{active: true, nombre:‘Floristeria la Gardenia’},
{active: true, nombre:‘Donas la pasaditas’},
{active: true, nombre:‘Veterinaria Huellita felices’},
{active: false, nombre:‘Sushi Suhiroll’},
{active: true, nombre:‘Hotel la Garcia’},
{active: false, nombre:‘Zapateria el Clavo’}
]

y en el app.component.html
aca mostramos las empresas si estan en true, las que estan en false no estan en la lista

<ul>
<ng-container *ngFor=“let lugar of lugares”>
<li *ngIf=“lugar.active”>{{lugar.nombre}}</li>
</ng-container>

<ul>

instale la libreria con NPM pero me da error

npm install @agm/core --save
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\FABER\package.json’
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\FABER\package.json’
npm WARN @agm/[email protected] requires a peer of @angular/[email protected]^6.0.0 || ^7.0.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/[email protected] requires a peer of @angular/[email protected]^6.0.0 || ^7.0.0 || ^8.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN FABER No description
npm WARN FABER No repository field.
npm WARN FABER No README data
npm WARN FABER No license field.

  • @agm/[email protected]
    updated 1 package and audited 1 package in 0.485s
    found 0 vulnerabilities

actividad para finalizar el curso:
app.component.ts
persona:any=[
{nombre:‘Any Rodiguez’,Edad:‘22’},
{nombre:‘Pedro Gomez’,Edad:‘55’},
{nombre:‘Esther Franco’, Edad:‘40’},
{nombre:‘Marianyela Suarez’, Edad:‘23’},
{nombre:‘Alejandro Silva’, Edad:‘27’},
{nombre:‘Maria Silva’, Edad:‘24’}
];
app.component.html
<ng-container *ngFor=“let persona of persona”>
<li *ngIf=“persona.Edad>=34”>{{persona.nombre}}</li>
</ng-container

Para las personas que les tira un error de api no habilitada, deben habilidar el Maps JavaScript API, que lo encuentran en biblioteca o sino solo buscan Maps JavaScript API, lo habilitan y listo!

Lista de personas y configuración de google Maps

En component.ts agregar el arreglo debajo de la variable title:
personas:any = [
{nombre:‘Jennifer Almiron’, edad: 15},
{nombre:‘Cecilia Taramona’, edad: 30},
{nombre:‘Alessia Oscco’, edad: 12},
{nombre:‘Mark Anthony’, edad: 40},
{nombre:‘Albert Londgreen’, edad: 35}
];

En component.html escribir:
<ul>
<ng-container *ngFor=“let persona of personas”>
<li *ngIf=“persona.edad > 18”>{{persona.nombre}}, {{persona.edad}}</li>
</ng-container>
</ul>

platzisquare/src/app/app.component.ts

export class AppComponent {
...
  personas:any = [
    {nombre:'Andres', edad:27},
    {nombre:'David', edad:12},
    {nombre:'Cindy', edad:18},
    {nombre:'Leonardo', edad:30},
    {nombre:'Jaime', edad:40},
    {nombre:'Adiana', edad:17},
  ];
...
}

platzisquare/src/app/app.component.html

<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad >= 18">{{ persona.nombre }} - {{ persona.edad }}</li>
  </ng-container>
</ul>
import { Component } from '@angular/core';

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

  personas= [
    {nombre: "Andrea" , edad: 15},
    {nombre: "Pedro", edad: 19 },
    {nombre: "Alejandra" , edad: 25},
    {nombre: "Manuel", edad: 12 },
    {nombre: "Luis" , edad: 38 },
    {nombre: "Maria" , edad:16 }
  ]

}```

export class AppComponent {

personas:any = [
{nombre:‘Andres’, edad:27},
{nombre:‘David’, edad:12},
{nombre:‘Cindy’, edad:18},
{nombre:‘Leonardo’, edad:30},
{nombre:‘Jaime’, edad:40},
{nombre:‘Adiana’, edad:17},
];

}
platzisquare/src/app/app.component.html

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

El app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
<hr />
<ul>
  <ng-container *ngFor="let lugar of lugares">
    <li *ngIf="lugar.active">{{lugar.nombre}}</li>
  </ng-container>
</ul>

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

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

Y el app.component.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 = [
    {active: true, nombre: 'Barberia el Peluquin'},
    {active: true, nombre: 'Pizeria Donatello'},
    {active: true, nombre: 'Donas Homero Simpson'},
    {active: true, nombre: 'Kwik-E-Mart'},
    {active: true, nombre: 'El bar de Moe'},
    {active: true, nombre: 'Helados a Mil'}
  ];
  lat:number = 7.882831;
  lng:number = -72.494314;

  personas:any = [
    {nombre: 'Fabian', edad: 24},
    {nombre: 'Andres' , edad: 17},
    {nombre: 'Marta', edad: 24},
    {nombre: 'Maria', edad: 31},
    {nombre: 'Jose', edad: 27},
    {nombre: 'Alberto', edad: 15},
    {nombre: 'Rodrigo', edad: 21},
    {nombre: 'Manuel', edad: 16}
  ];
}
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad > 18; else menoresEdad">{{ persona.nombre }} tiene {{ persona.edad }} años</li>
    <ng-template #menoresEdad>
      <li>[email protected]: {{ persona.nombre }} tu edad es de {{ persona.edad }} años.</li>
    </ng-template> 
  </ng-container>
</ul>
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad > 18; else menoresEdad" [ngClass]="{'hombre': persona.sexo == 'h', 'mujer': persona.sexo == 'm' }">{{ persona.nombre }} tiene {{ persona.edad }} años</li>
    <ng-template #menoresEdad>
      <li [ngClass]="{'h': 'hombre', 'm': 'mujer'} [persona.sexo]">[email protected]: {{ persona.nombre }} tu edad es de {{ persona.edad }} años.</li>
    </ng-template> 
  </ng-container>
</ul>

Reto:
TS

personas:any = [
    {edad: 20, nombre: 'Victor Rivas'},
    {edad: 15, nombre: 'Yuli Perez'},
    {edad: 30, nombre: 'Manuelita Del Campo'},
    {edad: 16, nombre: 'Pepe Mujica'},
  ];

html

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

HTML

TS

El problema que les sale a los comentarios de abajo es porque se debe habilitar la facturación en Google Cloud Project.

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

  personas:any=[
    {nombre:'Pedro Perez',edad:20},
    {nombre:'Lucero Cortez',edad:10},
    {nombre:'dodo',edad:18}
  ]

<code>

app.component.ts

personas: any = [
    {edad: 15, nombre: 'William'},
    {edad: 13, nombre: 'Oscar'},
    {edad: 23, nombre: 'Maria'},
    {edad: 25, nombre: 'Enrique'},
    {edad: 18, nombre: 'Pepito'},
  ];

app.component.html

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

</ul>

Respuesta a:
Instalando librerías con NPM (Google Maps)
personas:any = [
{nombre:‘Alfredo’, edad:37},
{nombre:‘David’, edad:10},
{nombre:‘Jeniffer’, edad:18},
{nombre:‘Carlos’, edad:30},
{nombre:‘Pedro’, edad:40},
{nombre:‘Andres’, edad:17},
];

}
platzisquare/src/app/app.component.html

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

Listo

![](

con un ngIf edad > 18

Me sale este error

AppComponent.html:5 ERROR TypeError: Object(...) is not a function
    at new FitBoundsService (fit-bounds.js:32)
    at createClass (core.es5.js:10912)
    at _createProviderInstance (core.es5.js:10889)
    at createProviderInstance (core.es5.js:10724)
    at createViewNodes (core.es5.js:12179)
    at callViewAction (core.es5.js:12622)
    at execComponentViewsAction (core.es5.js:12531)
    at createViewNodes (core.es5.js:12220)
    at createRootView (core.es5.js:12082)
    at callWithDebugContext (core.es5.js:13467)

Las paginas de la libreria que no sean la princial dan error 404 (Dice “Page Not Found”). Parece que ya no tiene soporte

  personas: any = [
    {name: 'Carlos', age: 22},
    {name: 'Juan', age: 14},
    {name: 'Pedro', age: 19},
    {name: 'Caren', age: 11},
    {name: 'Erica', age: 9}
  ];

<ul>
    <ng-container *ngFor="let persona of personas">
        <li *ngIf="persona.age > 17">{{persona.name}}</li>
    </ng-container>
</ul>

Aqui va la solución que implemente

Html

TypeScript

Hola, disculpen pero como puedo hacer para usar el mapa si no tengo tarjeta de credito? Ya el proceso no es tan sencillo.

// app.component.ts
usuarios = [
  {edad: 20, nombre: 'Carlos'},
  {edad: 15, nombre: 'Daniel'},
  {edad: 18, nombre: 'Miguel'}
];
//app.component.html
     <div class="row">
        <ng-container *ngFor="let usuario of usuarios">
            <div class="col" *ngIf="usuario.edad >= 18">
                {{usuario.edad}} {{usuario.nombre}}
            </div>
        </ng-container>
        
     </div>

Solución

export class AppComponent {
 
  personas:any = [
    {name:'Jorge',age:28},
    {name:'Luis',age:17},
    {name:'Jesus',age:31},
    {name:'Juan',age:15},
    {name:'Luis',age:30},
  ]
}
<ol>
  <ng-container *ngFor="let person of personas">
    <li *ngIf="person.age >= 18">{{ person.name }}</li>
  </ng-container>
</ol>

Mi solución

HML

<h1>Lista de personas mayores de edad</h1>
<ul>
    <ng-container *ngFor="let persona of personas">
        <li *ngIf="persona.age >= 18">{{persona.firstname}} {{persona.lastname}}</li>
    </ng-container>
</ul>

TypeScript

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  personas:any = [
    {firstname: "Ovidio Jose", lastname: "Arteaga", age: 33},
    {firstname: "Pedro", lastname: "Perez", age: 33},
    {firstname: "Carol", lastname: "Arteaga", age: 9},
    {firstname: "Yiniliubeth", lastname: "Lameda", age: 33},
    {firstname: "Esteban", lastname: "Lameda", age: 11},
    {firstname: "Estefani", lastname: "Lameda", age: 5},
  ];

  constructor(){
  }
}
personas:any = [
  		{age: 25, nombre:'Juan Montero'},
  		{age: 4,  nombre:'Kinverly Fernández'},
  		{age: 18, nombre:'Zackary Humbolt'},
  		{age: 79, nombre:'Patricio Gonzalez'},
  		{age: 66, nombre:'Pablo Perez'},
  		{age: 3,  nombre:'Maria Durán'}
  	];
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.age >= 18">
      {{persona.nombre}}
    </li>
  </ng-container>
</ul>

Resultado:
ngFor Personas mayor de edad

Juan Montero
Zackary Humbolt
Patricio Gonzalez
Pablo Perez

<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>
    <input type="text" placeholder="Ingrese Edad" [(ngModel)] = "age" />
    <br>
    <button type="button" (click) = "addPerson()" > Agregar! </button>
    <br>
    <span> {{message}} </span>
    
    <ul>
      <ng-container *ngFor="let person of persons">
          <li *ngIf="person.active && person.age > 17"> {{person.firstName}} - {{person.lastName}} - {{person.age}} <span (click) = "deletePerson(person.id)" > x </span></li>
      </ng-container>
    </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 = "";
  age:numbre = 0;
  message:string = "";
  count = 1;

  lat = 9.7015209;
  lng = -63.2504122;

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

  addPerson(){
    this.count++;
    this.persons.push({
      id: this.count,
      firstName: this.firstName , 
      lastName: this.lastName,
      age: this.age,
      active:true
    });
    this.message = "Persona guardada";

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

  deletePerson(id){
    this.persons = this.persons.map( person => {
      if (person.id == id) {
        person.active = false;
      }
      return person;
    });
  }
}

app.component.html

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

app.component.ts

personas: any=[

    {nombre:'joe', edad: 20},
    {nombre:'juan', edad: 15},
    {nombre:'jo', edad: 22},
    {nombre:'jaime', edad: 17},
    {nombre:'ale', edad: 18},
    {nombre:'joeen', edad: 19},
  ];

No me aparece visible el apartado del mapa.

No logro solventar este error.

ERROR in Error: Metadata version mismatch for module C:/Users/vcalf/source/repos/Angular/platzisquare/node_modules/@agm/core/agm-core.d.ts, found version 4, expected 3, resolving symbol AppModule in C:/Users/vcalf/source/repos/Angular/platzisquare/src/app/app.module.ts, resolving symbol AppModule in C:/Users/vcalf/source/repos/Angular/platzisquare/src/app/app.module.ts, resolving symbol AppModule in C:/Users/vcalf/source/repos/Angular/platzisquare/src/app/app.module.ts
at syntaxError (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\webpack\src\plugin.js:212:44)
at C:\Users\vcalf\source\repos\Angular\platzisquare\[email protected]\webpack\src\plugin.js:448:24
at processTicksAndRejections (internal/process/task_queues.js:93:5)