Instalando librerías con NPM (Google Maps)

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>

https://drive.google.com/file/d/1DyxNoZiYOkJU08DEIZsljPIjNX21JbH6/view?usp=sharing

  <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/core@1.0.0-beta.5 requires a peer of @angular/common@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @agm/core@1.0.0-beta.5 requires a peer of @angular/core@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@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/common@^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/core@^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>Estimad@: {{ 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]">Estimad@: {{ 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\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26)
at Object.listLazyRoutesOfModule (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@angular\compiler-cli\src\ngtools_api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@ngtools\webpack\src\plugin.js:212:44)
at C:\Users\vcalf\source\repos\Angular\platzisquare\node_modules@ngtools\webpack\src\plugin.js:448:24
at processTicksAndRejections (internal/process/task_queues.js:93:5)