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 : 18M : 40S

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

Instalando librerías con NPM (Google Maps)16/80

Vamos a instalar Angular Google Maps usando npm.

En: src/app/app.component.ts

  personas:any = [
    {
      edad: 18,
      nombre:"Alejandro",
    },
    {
      edad: 25,
      nombre:"María",
    },
    {
      edad: 14,
      nombre:"Laura",
    }

  ];

En: src/app/app.component.html NOTA: recordar que alguien puede tener 18 años y se aplica el mayor o igual que.

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

api key cuesta$$ o necesita facturacion con tarjeta, actualicen el curso…

Para las personas que estén usando Angular 6.x y les genere un problema con el rxjs/Observable, se debe a que están usando la versión 1.0.0.beta-2.

Para ello, deben instalar como una dependencia del proyecto RXJS y su compatibilidad con el siguiente comando

npm install [email protected] [email protected] --save

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

Hola, como puedo manipular el Zoom del mapa? directamente en el HTML mediante una directiva de atributo? o quizás desde el app.component.ts agregando librerías extras en el app.module.ts?
gracias.

Por que usar styles.css y no app.component,css? en este caso debería aplicarle los estilos al modulo y no a la aplicación entera… creo yo

En: src/app/app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
  personas : any = [
      {nombre: 'Pedro Colina', edad: 15},
      {nombre: 'Maria García', edad: 25},
      {nombre: 'Jose Fernández', edad: 22},
      {nombre: 'Ana Lopez', edad: 12}
  ];
}

En: src/app/app.component.html

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

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.

AGM.jpg

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

Hola

A alguien les ha salido el siguiente error?

You have exceeded your request quota for this API.

Saludos

Captura 3.PNG
El curso es muy interesante

Está muy bien el despliegue del mapa de Google. Por curiosidad alguien sabe como hacer para que auto detecte la ubicación desde donde se está accediendo?

En nuestro archivo Typescript agregamos el arreglo de personas junto con su edad. Como en mi caso utilice una función para mostrar los nombres debemos también agregar la función:

	personas:any = [
		{
			edad: 34, 
			nombre: 'Jesús'
		},
		{
			edad: 19,
			nombre: 'Diógenes'
		},
		{
			edad: 67,
			nombre: 'María'
		},
		{
			edad: 9,
			nombre: 'Jorge'
		},
		{
			edad: 17,
			nombre: 'Sandra'
		}
	];
	
		mayorEdad($edad) {
		if ($edad >= 18 ) {
			return true;
		} else {
			return false;
		}
	}

En nuestro template agregamos la lista donde se van a mostrar las personas:

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

Muy buen tutor, todo se entiende muy claramente. No vo necesidad de subir mi respuesta del desafió todos lo han hecho perfectamente. Buen trabajo chicos!

Untitled.png
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare'
  personas:any = [
    {nombre:'Juan Perez',edad: 18},
    {nombre:'Carlos Gonzalez',edad: 23},
    {nombre:'Marcos Lugo',edad: 38},
    {nombre:'Alvaro Gomez',edad: 13},
    {nombre:'Maria Lopez',edad: 18}
  ]
}

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <ul>
    <h3>Mayores de edad:</h3>
    <ng-container *ngFor='let persona of personas'>
      <li style="list-style-type:none" *ngIf='persona.edad > 17'>{{persona.nombre}}</li>
    </ng-container>
    <hr/>
    <h3>Menores de edad:</h3>
    <ng-container *ngFor='let persona of personas'>
      <li style="list-style-type:none" *ngIf='persona.edad < 18'>{{persona.nombre}}</li>
    </ng-container>
  </ul>
</div>

Para obtener la Google Key Api me pide una cuenta de facturación T-T

ngFor.png

En app.component.ts

personas:any=[
		{nombre: 'Victor',
		 edad: 24,
		},
		{nombre: 'Daniela',
		 edad: 17,
		},
		{nombre: 'Andres',
		 edad: 23,
		},
		{nombre:'Juan',
		 edad: 14,
		},
		{nombre: 'Yadira',
		 edad: 45,
		}
	];

En app.component.html

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

Buenos Dias, actualmente la API de google Maps para desarrolladores es de pago, hay alguna forma de continuar con el curso de forma gratuita ??

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

![](Sin título.png

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>

Ingresando conocimientos en angula

Clientes:any = [
    {nombre: 'Edgar Roberto', edad: '32'},
    {nombre: 'Ricardo', edad: '27'},
    {nombre: 'Jose Julian', edad: '13'}
  ];
  Pueba_place: any = [
    {
      lat: 18.9203359,
      lng:-99.240867
    },
    {
      lat: 18.6132761,
      lng: -99.3471271

    }
  ];```
<ng-container *ngFor="let Place of Pueba_place">
  <agm-map [latitude]="Place.lat" [longitude]="Place.lng">
    <agm-marker [latitude]="Place.lat" [longitude]="Place.lng"></agm-marker>
  </agm-map>
</ng-container>
<hr>
<ul>
  <ng-container *ngFor="let lugar of lugares">
    <li *ngIf = "lugar.active" >{{lugar.nombre}}</li>
  </ng-container>
</ul>
<ul>
  <ng-container *ngFor="let client of Clientes">
    <li *ngIf = "client.edad > 18" >{{client.nombre}}</li>
  </ng-container>
</ul>

Como se instalan y usan librerías que no sean módulos de Angular ?, como Jquery por ejemplo 😮

que mal ahora piden tarjeta de credito para generar la clave

  <ng-container *ngFor="let item of Lugares">
      <li *ngIf="item.activo == true" >{{item.nombre}}</li>
  </ng-container>```

Mi solucion, gracias:

Mi solución completa, gracias:

app.module.ts:

personas:any= [
{edad:18, nombre:‘Juanita’},
{edad:14, nombre:‘Valeria’},
{edad:22, nombre:‘Pepito’},
{edad:20, nombre:‘Yonny’}
]

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

No se debe usar sudo a no ser que sea instalación global con --global o -g ya que instalara las librerías con distintos permisos que el resto del proyecto

<h1>Mi Ejercicio</h1>

app.componen.ts

personas:any = [
  	{active: true, nombre:'Pedro', edad:12},
  	{active: true, nombre:'Maria', edad:22},
  	{active: true, nombre:'Calos', edad:34},
  	{active: true, nombre:'Sandra', edad:5},
  	{active: false, nombre:'Milena', edad:9},
  	{active: false, nombre:'Fernando', edad:50},
  ];

app.component.html

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

En La Página

Ejercicio2.png

HTML

<h1>Personas mayores de edad:</h1>
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad > 18">{{ persona.nombre }}</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 {
    title = 'PlatziSquare';

    personas:any = [
        {nombre:'Antonio h', edad:18},
        {nombre:'Carmen F', edad:28},
        {nombre:'Pepe E', edad:20},
        {nombre:'Julia E', edad:16}
        {nombre:'Victor S', edad:73}
        {nombre:'Manuel T', edad:89}
        {nombre:'Micro R', edad:25}
        {nombre:'Kiko L', edad:24}
        {nombre:'Charly W', edad:17}
    ];

  constructor(){
  }
}

Archivo app.component.ts

  personas:any = [
    {nombre: 'Maria', edad:12},
    {nombre: 'Edgar', edad: 18},
    {nombre: 'Carla', edad: 22},
    {nombre: 'Rosa', edad: 10},
    {nombre: 'Juam', edad: 40},
    {nombre: 'Soledad', edad: 17}
  ];

codigo app.conponent.html

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

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

alguien sabe que se puede hacer con este ERROR?

Mi solución:

app.component.ts

persons: any = [
   { name: 'Leslie', age: 23 },
   { name: 'David', age: 24},
   { name: 'Nico', age: 13},
   { name: 'María', age: 50},
   { name: 'Amy', age: 1}
];

app.component.html

<h2>List of persons</h2>

<ul>
  <ng-container *ngFor=" let person of persons">
    <li *ngIf="person.age > 18">
      <p>
        {{ person.name }} - {{ person.age }}
      </p>
    </li>
  </ng-container>
</ul>

Por que me cobra por generar la API key ?

No puedo seguir la clase. Me dice este error al compilar:
`
``ERROR in /Users/alexis.pifano/Dropbox/mean2/xxxxxx/node_modules/@agm/core/services/maps-api-loader/lazy-maps-api-loader.d.ts (1,10): Module ‘"/Users/alexis.pifano/Dropbox/mean2/xxxxxxx/node_modules/@angular/core/index"’ has no exported member ‘InjectionToken’```

Instalar libreria de google maps
angular-maps.com
para angular 6 antes
npm install [email protected] [email protected] --save
npm install @agm/core --save

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>


Cómo podría darle zoom al mapa de google?

.ts

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


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

export class AppComponent {
  title = 'PlatziSquare';

  entidades:any = [
  {edad:66,nombre:'Miguel',ubicacion:{lat:6.2370789,lng:-75.5807385}},
  {edad:56,nombre:'Carlos',ubicacion:{lat:6.3370789,lng:-75.5707385}},
  {edad:48,nombre:'Sofia',ubicacion:{lat:6.2470789,lng:-75.5607385}},
  {edad:19,nombre:'Biron',ubicacion:{lat:6.2570789,lng:-75.5507385}},
  {edad:20,nombre:'Claudia',ubicacion:{lat:6.2670789,lng:-75.4807385}},
  {edad:28,nombre:'Didier',ubicacion:{lat:6.2570789,lng:-75.3807385}}
  ];

  lat:number = 6.2370789;
  lng:number = -75.5807385;

  seleccionar(lat,lng){
    this.lat = lat;
    this.lng = lng;
  }

  constructor(){
  }


}

.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
  <br/>
  <ul>
    <!--ng-container. es una etiqueta especial de angular para la magia que hacemos
    con el ngFor y ngIf no pueden estar en el mismo elemento-->
    <li>Ubicación:</li>
    <li>lat:{{lat}}</li>
    <li>lng:{{lng}}</li>
    <ng-container *ngFor="let entidad of entidades">
      <li *ngIf="entidad.edad > 18">{{entidad.nombre}} <button (click)="seleccionar(entidad.ubicacion.lat,entidad.ubicacion.lng)">Seleccionar</button></li>
    </ng-container>
    </ul>
</div>
<button [disabled] = "!listo" (click)="hacerAlgo()">Click Aquí</button>
<hr/>

Aqui esta el app.component.html

<h2>Los que pueden ingresar</h2>
<ol>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad >= 18">
      <ul>
        <li>{{persona.nombre}}</li>
        <li>{{persona.edad}}</li>
        <li>{{persona.username}}</li>
        <li>{{persona.email}}</li>
        <br>
      </ul>
    </li>
  </ng-container>
</ol>
<br>
<br>
<h2>Los no que pueden ingresar</h2>
<ol>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad < 18">
      <ul>
        <li>{{persona.nombre}}</li>
        <li>{{persona.edad}}</li>
        <li>{{persona.username}}</li>
        <li>{{persona.email}}</li>
        <br>
      </ul>
    </li>
  </ng-container>
</ol>

y aqui esta el app.component.ts

personas: any = [
    {nombre:"Leanne Graham", edad:17, username: "Bret", email: "[email protected]" },
    {nombre:"Ervin Howell", edad:32, username: "Bret", email: "[email protected]" },
    {nombre:"Clementine Bauch", edad:19, username: "Bret", email: "[email protected]" },
    {nombre:"Patricia Lebsack", edad:10, username: "Bret", email: "[email protected]" },
    {nombre:"Chelsey Dietrich", edad:44, username: "Bret", email: "[email protected]" },
    {nombre:"Mrs. Dennis Schulist", edad:56, username: "Bret", email: "[email protected]" },
    {nombre:"Kurtis Weissnat", edad:22, username: "Bret", email: "[email protected]" },
    {nombre:"Nicholas Runolfsdottir V", edad:70, username: "Bret", email: "[email protected]" },
    {nombre:"Glenna Reichert", edad:4, username: "Bret", email: "[email protected]" },
    {nombre:"Clementina DuBuque", edad:21, username: "Bret", email: "[email protected]" },
    {nombre:"Leanne Graham", edad:18, username: "Bret", email: "[email protected]" },
    {nombre:"Clementine Bauch", edad:11, username: "Bret", email: "[email protected]" },
    {nombre:"Ervin Howell", edad:15, username: "Bret", email: "[email protected]" },
    {nombre:"Patricia Lebsack", edad:30, username: "Bret", email: "[email protected]" } ,
    {nombre:"Kurtis Weissnat", edad:35, username: "Bret", email: "[email protected]" },
    {nombre:"Mrs. Dennis Schulist", edad:29, username: "Bret", email: "[email protected]" },
    {nombre:"Chelsey Dietrich", edad:87, username: "Bret", email: "[email protected]" },
    {nombre:"Ervin Howell", edad:48, username: "Bret", email: "[email protected]" },
    {nombre:"Patricia Lebsack", edad:9, username: "Bret", email: "[email protected]" },
    {nombre:"Clementine Bauch", edad:12, username: "Bret", email: "[email protected]" },
    {nombre:"Nicholas Runolfsdottir V", edad:12, username: "Bret", email: "[email protected]" }
  ];```

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?

Google Maps es de pago ahora?

app.component.html

<div class="row">
  <ul>
    <ng-container *ngFor="let person of persons">
      <li *ngIf="person.age >= 18">
        {{person.name}}
      </li>
    </ng-container>
  </ul>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'PlatziSquare Project';
  persons: any = [
    {name: 'Juan', age: 18},
    {name: 'Pedro', age: 25},
    {name: 'Natalia', age: 32},
    {name: 'Sandra', age: 15},
    {name: 'Sebastian', age: 19},
    {name: 'Angel', age: 43},
    {name: 'Andrea', age: 11},
    {name: 'David', age: 35},
   ];

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;
}
Captura de pantalla 2018-04-13 a la(s) 23.39.03.png

Alguien sabe porque cuando voy a adquirir la API key me cobran ?

Como se puede hacer un ngif con varias condiciones, por ejemplo
if(activo==true && edad>18)

me da ese error

No consigo instalar Angular Google Maps:

Captura de pantalla 2018-05-11 a la(s) 11.52.11 a.m..png

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

Hola, en mi caso el mapa se mostraba muy alejado, la solución fue:

  1. en app.component.ts agregar [zoom]=“valor”
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="valor">
  <agm-marker   [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
  1. en app.component.ts, asignar el valor:
valor=17; ```

Alguien sabe porque me sale esto ?
Screen Shot 2018-08-06 at 3.11.25 PM.png

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?

en component.html

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

en component.ts

title = 'platzisquare';
  edad = 0;
  lugares:any =[
    {active:true, nombre:'Florería la Gardenia'},
    {active:true, nombre:'Donas la pasadita'},
    {active:true, nombre:'Veterinaria Huellitas Felices'},
    {active:false, nombre: 'Florería la Gardenia'},
    {active:true, nombre:'Donas la pasadita'},
    {active:false, nombre:'Veterinaria Huellitas Felices'}
  ];
  personas:any=[
    {edad:30, nombres:'mario'},
    {edad:10, nombres:'juan'},
    {edad:20, nombres:'hela'},
    {edad:23, nombres:'thor'},
    {edad:8, nombres:'groot'},
    {edad:14, nombres:'spiderman'},
  ]

en navegador:
desafio angula.png

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

Esta es mi solucion, del lado del controlador

 personas: any = [
    {nombre: 'Rosa', edad: 25},
    {nombre: 'Maria', edad: 8},
    {nombre: 'Julio', edad: 38},
    {nombre: 'Carlos', edad: 59},
    {nombre: 'Marco', edad: 18},
    {nombre: 'Wilver', edad: 12},
    {nombre: 'Rosmery', edad: 32},
    {nombre: 'Cristiano', edad: 28},
    {nombre: 'Jose', edad: 15}
  ];

y en el html

  <ul>
    <ng-container *ngFor="let persona of personas">
      <li *ngIf="persona.edad >= 18">
        {{persona.nombre}}
      </li>
    </ng-container>
  </ul>
<code>
  personas: any = [
   {edad: 18, nombre: 'Acevedo Manríquez María Mireya'},
   {edad: 24, nombre: 'Acevedo Mejía Enrique'},
   {edad: 12, nombre: 'Acevedo Ruiz Carolina'},
   {edad: 34, nombre: 'Briseño Arias Abel'},
   {edad: 54, nombre: 'Camacho Cárdenas Sandra Verónica'},
   {edad: 12, nombre: 'Durán de Jesús Julián'}
  ];

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

He realizado el ejercicio gracias a las indicaciones del profesor Eduardo de la Cruz, agregué en app.component.ts edad y género, quedando como resultado:

personas: any = [
      {active: true, edad: 16, genero: 'mujer', nombre: 'Camila'},
      {active: true, edad: 25, genero: 'mujer', nombre: 'Luciana'},
      {active: true, edad: 25, genero: 'hombre', nombre: 'Carlos'},
      {active: true, edad: 28, genero: 'hombre', nombre: 'Julian'},
      {active: true, edad: 22, genero: 'mujer', nombre: 'Martha'},
      {active: true, edad: 15, genero: 'hombre', nombre: 'Samuel'},
      {active: true, edad: 11, genero: 'hombre', nombre: 'Santiago'},
      {active: true, edad: 21, genero: 'hombre', nombre: 'Martín'},

  ];

El archivo app.component.html quedó de está manera:

Todos los usuarios son:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.active" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>

Todos los usuarios mayores de edad son:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad >= 18" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>


Todos los usuarios menores de 18os:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad < 18" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>

Sin embargo no logré que solo mostrará los usuarios de un género en específico, traté de hacerlo declarando de está forma:

Todos los usuarios de género femenino:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.genero = mujer" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>

Por supuesto el inspector de código muestra error, ¿alguien sabe cómo resolver esto?

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

No creo que se deba usar NPM con sudo.

Por acá una de las posibles soluciones para no tener que usarlo.

sudo chown -R $(whoami) ~/.npm

solucion reto array personas

  personas:any=[
    {nombre:'Ivan', edad:'33'},
    {nombre:'Renata', edad:'7'},
    {nombre:'Mike', edad:'35'},
    {nombre:'Gio', edad:'3'},
  ];```


<!-- solucion para reto de personas y edades -->
<ul>
<ng-container *ngFor=“let persona of personas”>
<li *ngIf=“persona.edad>18”>{{persona.nombre}}</li>
</ng-container>
</ul>```

Dejo mi codigo
app.components.html:

<!--The content below is only a placeholder and can be replaced.-->
<ul>
  <ng-container *ngFor="let lugar of lugares" >
    <li *ngIf="lugar.active">
      {{lugar.nombre}}
    </li>
  </ng-container>
</ul>
<h2>Listado de Personas mayores de edad</h2>
<ul>
  <ng-container *ngFor="let mayorEdad of persona">
    <li *ngIf="mayorEdad.edad > 17">
      <p>
        Nombre {{mayorEdad.nombre}}
      </p>
      <p>Edad {{mayorEdad.edad}}</p>
    </li>
  </ng-container>
</ul>

app.components.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Bienvenidos a Platzi Square';
  key_api ='AIzaSyDTjl21z5Wbr3KR8r56_-l35rLi-g2MfU4';
  lugares:any =[
    { active: true ,nombre: 'Floreria la Amelie'},
    { active: false ,nombre: 'Floreria la Amelie'},
    { active: true ,nombre: 'Veterinaria huellitas Felices'},
    { active: true ,nombre: 'La casita feliz'},
    { active: false ,nombre: 'Floreria la Amelie'},
    { active: true ,nombre: 'Veterinaria huellitas Felices'},
    { active: true ,nombre: 'La casita feliz'}
  ];

  persona:any=[
    {nombre:'Carlos' , edad:23},
    {nombre:'Juan' , edad:27},
    {nombre:'Tania' , edad:3},
    {nombre:'Beto' , edad:15},
    {nombre:'Perez' , edad:23},
    {nombre:'Castro' , edad:23},
    {nombre:'Alejandro' , edad:53},
    {nombre:'Amelie' , edad:43},
    {nombre:'Mateo' , edad:33},
    {nombre:'Ricado' , edad:14},
    {nombre:'Natalia' , edad:23},
  ]

}

Saludos…
Muy buen curso…

captura10.png

la mia es para vender postres

Solución:
Reto3A4.JPG
Reto3.2A4.JPG

Chicos alguien sabe porque me sale esto ? Ya intente producir una nueva APIkey pero igual
Donde deberia salir el google maps:
Screen Shot 2018-08-09 at 2.35.22 PM.png
En la console:
Screen Shot 2018-08-09 at 2.35.32 PM.png

<li *ngIf=“persona.edad>=18” >{{persona.nombre}}</li>

//codigo html
  <ul>
    <ng-container *ngFor="let persona of personas">
      <li *ngIf="persona.active && persona.edad >= 18">{{persona.nombre| uppercase}}</li>
    </ng-container>
  </ul>

//array en typeScript

  personas:any = [
    {edad: 15, active:true, nombre:'Julian'},
    {edad: 40, active:true, nombre:'Angel'},
    {edad: 18, active:false, nombre:'Fabian'},
    {edad: 20, active:true, nombre:'Jesus'},
    {edad: 18, active:true, nombre:'Maria'},
    {edad: 5, active:true, nombre:'Yennifer'}
  ];

en src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
  persons: object = [
      {name: 'Rolando Gutierrez', age: 30},
      {name: 'Gonzalo Díaz', age: 10},
      {name: 'Niurka Jimenez', age: 28},
      {name: 'Jesús Donal', age: 15},
      {name: 'Ernesto Mendez', age: 45}
  ];

  constructor() {
  }
}

en src/app/app.component.html

<ul>
    <ng-container *ngFor="let person of persons">
        <li *ngIf="person.age >= 18">{{person.name}}</li> <!-- considerando que los mayores de edad tienen más de 18 -->
    </ng-container>
</ul>

Tengo problemas para que funciones la libreria de Google Maps a la fecha 27/09/2018, por favor si alguien sabe que pasos mas actualizados y mejor explicados por favor les pido ayuda.

peoples: any = [
    {active: true, name: 'Pepito', age: 15},
    {active: false, name: 'Pablo', age: 40},
    {active: true, name: 'Juan', age: 25},
    {active: true, name: 'Carlos', age: 11},
    {active: true, name: 'María', age: 18},
  ];
<ul>
  <ng-container *ngFor="let people of peoples">
    <li *ngIf="people.active && people.age >= 18">{{ people.name }}</li>
  </ng-container>
</ul>

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

En el app.component.ts:

personas:any = [
  {age: 19, nombre: 'Jennifer'},
  {age: 19, nombre: 'Axel'},
  {age: 33, nombre: 'Richard'},
  {age: 36, nombre: 'Mirna'},
  {age: 15, nombre: 'Karla'},
];

Mientras que en el app.component.html:

<hr>
<h2>Personas</h2>
<ul>
    <ng-container *ngFor="let persona of personas">
        <li *ngIf="persona.age >= 18">{{ persona.nombre }}</li>
    </ng-container>
</ul>
export class AppComponent {
  title = 'PlatziSquare';
  personas: any = [
    {edad: 12, nombre: 'Pedro'},
    {edad: 14, nombre: 'Pablo'},
    {edad: 17, nombre: 'Jacinto'},
    {edad: 25, nombre: 'Jose'},
    {edad: 23, nombre: 'Manuela'},
  ];

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

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

personas:any = [
    {
      edad:18,
      nombre:"Uriel",
    },
    {
      edad:30,
      nombre:"Dalia",
    },
    {
      edad:12,
      nombre:"Isabel",
    }
  ];

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

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

![](error.PNG

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>

Alguien sabe como puedo utilizar google map actualmente ya que no me permite mostrar el mapa

.Captura de pantalla de 2018-08-31 19-31-59.png

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

arreglo.PNG

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

Condicion.PNG

3.resultado

mayor18.PNG

Mi solución

  <h2>Personas mayores a 18 años</h2>
  <ul>
    <ng-container *ngFor="let persona of personas">
      <li *ngIf="persona.edad >= 18">{{persona.nombre}}</li>
    </ng-container>
  </ul>```

Mi solución:

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

En esta liga pueden obtener la lat y lng de manera más fácil y precisa: https://www.coordenadas-gps.com/
-Saludos.

1° en app.component,ts

agregar:
personas:any=[
{edad:38,nombre:‘Hugo’},
{edad:1,nombre:‘Paco’},
{edad:21,nombre:‘Luis’}
];

2° en app.component.html

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

En: src/app/app.component.ts

  personas:any = [
    {
      edad: 18,
      nombre:"Alejandro",
    },
    {
      edad: 25,
      nombre:"María",
    },
    {
      edad: 14,
      nombre:"Laura",
    }

  ];

En: src/app/app.component.html NOTA: recordar que alguien puede tener 18 años y se aplica el mayor o igual que.

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

api key cuesta$$ o necesita facturacion con tarjeta, actualicen el curso…

Para las personas que estén usando Angular 6.x y les genere un problema con el rxjs/Observable, se debe a que están usando la versión 1.0.0.beta-2.

Para ello, deben instalar como una dependencia del proyecto RXJS y su compatibilidad con el siguiente comando

npm install [email protected] [email protected] --save

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

Hola, como puedo manipular el Zoom del mapa? directamente en el HTML mediante una directiva de atributo? o quizás desde el app.component.ts agregando librerías extras en el app.module.ts?
gracias.

Por que usar styles.css y no app.component,css? en este caso debería aplicarle los estilos al modulo y no a la aplicación entera… creo yo

En: src/app/app.component.ts

export class AppComponent {
  title = 'PlatziSquare';
  personas : any = [
      {nombre: 'Pedro Colina', edad: 15},
      {nombre: 'Maria García', edad: 25},
      {nombre: 'Jose Fernández', edad: 22},
      {nombre: 'Ana Lopez', edad: 12}
  ];
}

En: src/app/app.component.html

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

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.

AGM.jpg

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

Hola

A alguien les ha salido el siguiente error?

You have exceeded your request quota for this API.

Saludos

Captura 3.PNG
El curso es muy interesante

Está muy bien el despliegue del mapa de Google. Por curiosidad alguien sabe como hacer para que auto detecte la ubicación desde donde se está accediendo?

En nuestro archivo Typescript agregamos el arreglo de personas junto con su edad. Como en mi caso utilice una función para mostrar los nombres debemos también agregar la función:

	personas:any = [
		{
			edad: 34, 
			nombre: 'Jesús'
		},
		{
			edad: 19,
			nombre: 'Diógenes'
		},
		{
			edad: 67,
			nombre: 'María'
		},
		{
			edad: 9,
			nombre: 'Jorge'
		},
		{
			edad: 17,
			nombre: 'Sandra'
		}
	];
	
		mayorEdad($edad) {
		if ($edad >= 18 ) {
			return true;
		} else {
			return false;
		}
	}

En nuestro template agregamos la lista donde se van a mostrar las personas:

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

Muy buen tutor, todo se entiende muy claramente. No vo necesidad de subir mi respuesta del desafió todos lo han hecho perfectamente. Buen trabajo chicos!

Untitled.png
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare'
  personas:any = [
    {nombre:'Juan Perez',edad: 18},
    {nombre:'Carlos Gonzalez',edad: 23},
    {nombre:'Marcos Lugo',edad: 38},
    {nombre:'Alvaro Gomez',edad: 13},
    {nombre:'Maria Lopez',edad: 18}
  ]
}

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <ul>
    <h3>Mayores de edad:</h3>
    <ng-container *ngFor='let persona of personas'>
      <li style="list-style-type:none" *ngIf='persona.edad > 17'>{{persona.nombre}}</li>
    </ng-container>
    <hr/>
    <h3>Menores de edad:</h3>
    <ng-container *ngFor='let persona of personas'>
      <li style="list-style-type:none" *ngIf='persona.edad < 18'>{{persona.nombre}}</li>
    </ng-container>
  </ul>
</div>

Para obtener la Google Key Api me pide una cuenta de facturación T-T

ngFor.png

En app.component.ts

personas:any=[
		{nombre: 'Victor',
		 edad: 24,
		},
		{nombre: 'Daniela',
		 edad: 17,
		},
		{nombre: 'Andres',
		 edad: 23,
		},
		{nombre:'Juan',
		 edad: 14,
		},
		{nombre: 'Yadira',
		 edad: 45,
		}
	];

En app.component.html

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

Buenos Dias, actualmente la API de google Maps para desarrolladores es de pago, hay alguna forma de continuar con el curso de forma gratuita ??

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

![](Sin título.png

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>

Ingresando conocimientos en angula

Clientes:any = [
    {nombre: 'Edgar Roberto', edad: '32'},
    {nombre: 'Ricardo', edad: '27'},
    {nombre: 'Jose Julian', edad: '13'}
  ];
  Pueba_place: any = [
    {
      lat: 18.9203359,
      lng:-99.240867
    },
    {
      lat: 18.6132761,
      lng: -99.3471271

    }
  ];```
<ng-container *ngFor="let Place of Pueba_place">
  <agm-map [latitude]="Place.lat" [longitude]="Place.lng">
    <agm-marker [latitude]="Place.lat" [longitude]="Place.lng"></agm-marker>
  </agm-map>
</ng-container>
<hr>
<ul>
  <ng-container *ngFor="let lugar of lugares">
    <li *ngIf = "lugar.active" >{{lugar.nombre}}</li>
  </ng-container>
</ul>
<ul>
  <ng-container *ngFor="let client of Clientes">
    <li *ngIf = "client.edad > 18" >{{client.nombre}}</li>
  </ng-container>
</ul>

Como se instalan y usan librerías que no sean módulos de Angular ?, como Jquery por ejemplo 😮

que mal ahora piden tarjeta de credito para generar la clave

  <ng-container *ngFor="let item of Lugares">
      <li *ngIf="item.activo == true" >{{item.nombre}}</li>
  </ng-container>```

Mi solucion, gracias:

Mi solución completa, gracias:

app.module.ts:

personas:any= [
{edad:18, nombre:‘Juanita’},
{edad:14, nombre:‘Valeria’},
{edad:22, nombre:‘Pepito’},
{edad:20, nombre:‘Yonny’}
]

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

No se debe usar sudo a no ser que sea instalación global con --global o -g ya que instalara las librerías con distintos permisos que el resto del proyecto

<h1>Mi Ejercicio</h1>

app.componen.ts

personas:any = [
  	{active: true, nombre:'Pedro', edad:12},
  	{active: true, nombre:'Maria', edad:22},
  	{active: true, nombre:'Calos', edad:34},
  	{active: true, nombre:'Sandra', edad:5},
  	{active: false, nombre:'Milena', edad:9},
  	{active: false, nombre:'Fernando', edad:50},
  ];

app.component.html

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

En La Página

Ejercicio2.png

HTML

<h1>Personas mayores de edad:</h1>
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad > 18">{{ persona.nombre }}</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 {
    title = 'PlatziSquare';

    personas:any = [
        {nombre:'Antonio h', edad:18},
        {nombre:'Carmen F', edad:28},
        {nombre:'Pepe E', edad:20},
        {nombre:'Julia E', edad:16}
        {nombre:'Victor S', edad:73}
        {nombre:'Manuel T', edad:89}
        {nombre:'Micro R', edad:25}
        {nombre:'Kiko L', edad:24}
        {nombre:'Charly W', edad:17}
    ];

  constructor(){
  }
}

Archivo app.component.ts

  personas:any = [
    {nombre: 'Maria', edad:12},
    {nombre: 'Edgar', edad: 18},
    {nombre: 'Carla', edad: 22},
    {nombre: 'Rosa', edad: 10},
    {nombre: 'Juam', edad: 40},
    {nombre: 'Soledad', edad: 17}
  ];

codigo app.conponent.html

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

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

alguien sabe que se puede hacer con este ERROR?

Mi solución:

app.component.ts

persons: any = [
   { name: 'Leslie', age: 23 },
   { name: 'David', age: 24},
   { name: 'Nico', age: 13},
   { name: 'María', age: 50},
   { name: 'Amy', age: 1}
];

app.component.html

<h2>List of persons</h2>

<ul>
  <ng-container *ngFor=" let person of persons">
    <li *ngIf="person.age > 18">
      <p>
        {{ person.name }} - {{ person.age }}
      </p>
    </li>
  </ng-container>
</ul>

Por que me cobra por generar la API key ?

No puedo seguir la clase. Me dice este error al compilar:
`
``ERROR in /Users/alexis.pifano/Dropbox/mean2/xxxxxx/node_modules/@agm/core/services/maps-api-loader/lazy-maps-api-loader.d.ts (1,10): Module ‘"/Users/alexis.pifano/Dropbox/mean2/xxxxxxx/node_modules/@angular/core/index"’ has no exported member ‘InjectionToken’```

Instalar libreria de google maps
angular-maps.com
para angular 6 antes
npm install [email protected] [email protected] --save
npm install @agm/core --save

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>


Cómo podría darle zoom al mapa de google?

.ts

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


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

export class AppComponent {
  title = 'PlatziSquare';

  entidades:any = [
  {edad:66,nombre:'Miguel',ubicacion:{lat:6.2370789,lng:-75.5807385}},
  {edad:56,nombre:'Carlos',ubicacion:{lat:6.3370789,lng:-75.5707385}},
  {edad:48,nombre:'Sofia',ubicacion:{lat:6.2470789,lng:-75.5607385}},
  {edad:19,nombre:'Biron',ubicacion:{lat:6.2570789,lng:-75.5507385}},
  {edad:20,nombre:'Claudia',ubicacion:{lat:6.2670789,lng:-75.4807385}},
  {edad:28,nombre:'Didier',ubicacion:{lat:6.2570789,lng:-75.3807385}}
  ];

  lat:number = 6.2370789;
  lng:number = -75.5807385;

  seleccionar(lat,lng){
    this.lat = lat;
    this.lng = lng;
  }

  constructor(){
  }


}

.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
  <br/>
  <ul>
    <!--ng-container. es una etiqueta especial de angular para la magia que hacemos
    con el ngFor y ngIf no pueden estar en el mismo elemento-->
    <li>Ubicación:</li>
    <li>lat:{{lat}}</li>
    <li>lng:{{lng}}</li>
    <ng-container *ngFor="let entidad of entidades">
      <li *ngIf="entidad.edad > 18">{{entidad.nombre}} <button (click)="seleccionar(entidad.ubicacion.lat,entidad.ubicacion.lng)">Seleccionar</button></li>
    </ng-container>
    </ul>
</div>
<button [disabled] = "!listo" (click)="hacerAlgo()">Click Aquí</button>
<hr/>

Aqui esta el app.component.html

<h2>Los que pueden ingresar</h2>
<ol>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad >= 18">
      <ul>
        <li>{{persona.nombre}}</li>
        <li>{{persona.edad}}</li>
        <li>{{persona.username}}</li>
        <li>{{persona.email}}</li>
        <br>
      </ul>
    </li>
  </ng-container>
</ol>
<br>
<br>
<h2>Los no que pueden ingresar</h2>
<ol>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad < 18">
      <ul>
        <li>{{persona.nombre}}</li>
        <li>{{persona.edad}}</li>
        <li>{{persona.username}}</li>
        <li>{{persona.email}}</li>
        <br>
      </ul>
    </li>
  </ng-container>
</ol>

y aqui esta el app.component.ts

personas: any = [
    {nombre:"Leanne Graham", edad:17, username: "Bret", email: "[email protected]" },
    {nombre:"Ervin Howell", edad:32, username: "Bret", email: "[email protected]" },
    {nombre:"Clementine Bauch", edad:19, username: "Bret", email: "[email protected]" },
    {nombre:"Patricia Lebsack", edad:10, username: "Bret", email: "[email protected]" },
    {nombre:"Chelsey Dietrich", edad:44, username: "Bret", email: "[email protected]" },
    {nombre:"Mrs. Dennis Schulist", edad:56, username: "Bret", email: "[email protected]" },
    {nombre:"Kurtis Weissnat", edad:22, username: "Bret", email: "[email protected]" },
    {nombre:"Nicholas Runolfsdottir V", edad:70, username: "Bret", email: "[email protected]" },
    {nombre:"Glenna Reichert", edad:4, username: "Bret", email: "[email protected]" },
    {nombre:"Clementina DuBuque", edad:21, username: "Bret", email: "[email protected]" },
    {nombre:"Leanne Graham", edad:18, username: "Bret", email: "[email protected]" },
    {nombre:"Clementine Bauch", edad:11, username: "Bret", email: "[email protected]" },
    {nombre:"Ervin Howell", edad:15, username: "Bret", email: "[email protected]" },
    {nombre:"Patricia Lebsack", edad:30, username: "Bret", email: "[email protected]" } ,
    {nombre:"Kurtis Weissnat", edad:35, username: "Bret", email: "[email protected]" },
    {nombre:"Mrs. Dennis Schulist", edad:29, username: "Bret", email: "[email protected]" },
    {nombre:"Chelsey Dietrich", edad:87, username: "Bret", email: "[email protected]" },
    {nombre:"Ervin Howell", edad:48, username: "Bret", email: "[email protected]" },
    {nombre:"Patricia Lebsack", edad:9, username: "Bret", email: "[email protected]" },
    {nombre:"Clementine Bauch", edad:12, username: "Bret", email: "[email protected]" },
    {nombre:"Nicholas Runolfsdottir V", edad:12, username: "Bret", email: "[email protected]" }
  ];```

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?

Google Maps es de pago ahora?

app.component.html

<div class="row">
  <ul>
    <ng-container *ngFor="let person of persons">
      <li *ngIf="person.age >= 18">
        {{person.name}}
      </li>
    </ng-container>
  </ul>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'PlatziSquare Project';
  persons: any = [
    {name: 'Juan', age: 18},
    {name: 'Pedro', age: 25},
    {name: 'Natalia', age: 32},
    {name: 'Sandra', age: 15},
    {name: 'Sebastian', age: 19},
    {name: 'Angel', age: 43},
    {name: 'Andrea', age: 11},
    {name: 'David', age: 35},
   ];

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;
}
Captura de pantalla 2018-04-13 a la(s) 23.39.03.png

Alguien sabe porque cuando voy a adquirir la API key me cobran ?

Como se puede hacer un ngif con varias condiciones, por ejemplo
if(activo==true && edad>18)

me da ese error

No consigo instalar Angular Google Maps:

Captura de pantalla 2018-05-11 a la(s) 11.52.11 a.m..png

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

Hola, en mi caso el mapa se mostraba muy alejado, la solución fue:

  1. en app.component.ts agregar [zoom]=“valor”
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="valor">
  <agm-marker   [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
  1. en app.component.ts, asignar el valor:
valor=17; ```

Alguien sabe porque me sale esto ?
Screen Shot 2018-08-06 at 3.11.25 PM.png

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?

en component.html

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

en component.ts

title = 'platzisquare';
  edad = 0;
  lugares:any =[
    {active:true, nombre:'Florería la Gardenia'},
    {active:true, nombre:'Donas la pasadita'},
    {active:true, nombre:'Veterinaria Huellitas Felices'},
    {active:false, nombre: 'Florería la Gardenia'},
    {active:true, nombre:'Donas la pasadita'},
    {active:false, nombre:'Veterinaria Huellitas Felices'}
  ];
  personas:any=[
    {edad:30, nombres:'mario'},
    {edad:10, nombres:'juan'},
    {edad:20, nombres:'hela'},
    {edad:23, nombres:'thor'},
    {edad:8, nombres:'groot'},
    {edad:14, nombres:'spiderman'},
  ]

en navegador:
desafio angula.png

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

Esta es mi solucion, del lado del controlador

 personas: any = [
    {nombre: 'Rosa', edad: 25},
    {nombre: 'Maria', edad: 8},
    {nombre: 'Julio', edad: 38},
    {nombre: 'Carlos', edad: 59},
    {nombre: 'Marco', edad: 18},
    {nombre: 'Wilver', edad: 12},
    {nombre: 'Rosmery', edad: 32},
    {nombre: 'Cristiano', edad: 28},
    {nombre: 'Jose', edad: 15}
  ];

y en el html

  <ul>
    <ng-container *ngFor="let persona of personas">
      <li *ngIf="persona.edad >= 18">
        {{persona.nombre}}
      </li>
    </ng-container>
  </ul>
<code>
  personas: any = [
   {edad: 18, nombre: 'Acevedo Manríquez María Mireya'},
   {edad: 24, nombre: 'Acevedo Mejía Enrique'},
   {edad: 12, nombre: 'Acevedo Ruiz Carolina'},
   {edad: 34, nombre: 'Briseño Arias Abel'},
   {edad: 54, nombre: 'Camacho Cárdenas Sandra Verónica'},
   {edad: 12, nombre: 'Durán de Jesús Julián'}
  ];

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

He realizado el ejercicio gracias a las indicaciones del profesor Eduardo de la Cruz, agregué en app.component.ts edad y género, quedando como resultado:

personas: any = [
      {active: true, edad: 16, genero: 'mujer', nombre: 'Camila'},
      {active: true, edad: 25, genero: 'mujer', nombre: 'Luciana'},
      {active: true, edad: 25, genero: 'hombre', nombre: 'Carlos'},
      {active: true, edad: 28, genero: 'hombre', nombre: 'Julian'},
      {active: true, edad: 22, genero: 'mujer', nombre: 'Martha'},
      {active: true, edad: 15, genero: 'hombre', nombre: 'Samuel'},
      {active: true, edad: 11, genero: 'hombre', nombre: 'Santiago'},
      {active: true, edad: 21, genero: 'hombre', nombre: 'Martín'},

  ];

El archivo app.component.html quedó de está manera:

Todos los usuarios son:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.active" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>

Todos los usuarios mayores de edad son:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad >= 18" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>


Todos los usuarios menores de 18os:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.edad < 18" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>

Sin embargo no logré que solo mostrará los usuarios de un género en específico, traté de hacerlo declarando de está forma:

Todos los usuarios de género femenino:
<ul>
  <ng-container *ngFor="let persona of personas">
    <li *ngIf="persona.genero = mujer" >El usuario <b>{{persona.nombre}}</b> tiene una edad de {{persona.edad}}</li>
  </ng-container>
</ul>

Por supuesto el inspector de código muestra error, ¿alguien sabe cómo resolver esto?

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

No creo que se deba usar NPM con sudo.

Por acá una de las posibles soluciones para no tener que usarlo.

sudo chown -R $(whoami) ~/.npm

solucion reto array personas

  personas:any=[
    {nombre:'Ivan', edad:'33'},
    {nombre:'Renata', edad:'7'},
    {nombre:'Mike', edad:'35'},
    {nombre:'Gio', edad:'3'},
  ];```


<!-- solucion para reto de personas y edades -->
<ul>
<ng-container *ngFor=“let persona of personas”>
<li *ngIf=“persona.edad>18”>{{persona.nombre}}</li>
</ng-container>
</ul>```

Dejo mi codigo
app.components.html:

<!--The content below is only a placeholder and can be replaced.-->
<ul>
  <ng-container *ngFor="let lugar of lugares" >
    <li *ngIf="lugar.active">
      {{lugar.nombre}}
    </li>
  </ng-container>
</ul>
<h2>Listado de Personas mayores de edad</h2>
<ul>
  <ng-container *ngFor="let mayorEdad of persona">
    <li *ngIf="mayorEdad.edad > 17">
      <p>
        Nombre {{mayorEdad.nombre}}
      </p>
      <p>Edad {{mayorEdad.edad}}</p>
    </li>
  </ng-container>
</ul>

app.components.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Bienvenidos a Platzi Square';
  key_api ='AIzaSyDTjl21z5Wbr3KR8r56_-l35rLi-g2MfU4';
  lugares:any =[
    { active: true ,nombre: 'Floreria la Amelie'},
    { active: false ,nombre: 'Floreria la Amelie'},
    { active: true ,nombre: 'Veterinaria huellitas Felices'},
    { active: true ,nombre: 'La casita feliz'},
    { active: false ,nombre: 'Floreria la Amelie'},
    { active: true ,nombre: 'Veterinaria huellitas Felices'},
    { active: true ,nombre: 'La casita feliz'}
  ];

  persona:any=[
    {nombre:'Carlos' , edad:23},
    {nombre:'Juan' , edad:27},
    {nombre:'Tania' , edad:3},
    {nombre:'Beto' , edad:15},
    {nombre:'Perez' , edad:23},
    {nombre:'Castro' , edad:23},
    {nombre:'Alejandro' , edad:53},
    {nombre:'Amelie' , edad:43},
    {nombre:'Mateo' , edad:33},
    {nombre:'Ricado' , edad:14},
    {nombre:'Natalia' , edad:23},
  ]

}

Saludos…
Muy buen curso…

captura10.png

la mia es para vender postres

Solución:
Reto3A4.JPG
Reto3.2A4.JPG

Chicos alguien sabe porque me sale esto ? Ya intente producir una nueva APIkey pero igual
Donde deberia salir el google maps:
Screen Shot 2018-08-09 at 2.35.22 PM.png
En la console:
Screen Shot 2018-08-09 at 2.35.32 PM.png

<li *ngIf=“persona.edad>=18” >{{persona.nombre}}</li>

//codigo html
  <ul>
    <ng-container *ngFor="let persona of personas">
      <li *ngIf="persona.active && persona.edad >= 18">{{persona.nombre| uppercase}}</li>
    </ng-container>
  </ul>

//array en typeScript

  personas:any = [
    {edad: 15, active:true, nombre:'Julian'},
    {edad: 40, active:true, nombre:'Angel'},
    {edad: 18, active:false, nombre:'Fabian'},
    {edad: 20, active:true, nombre:'Jesus'},
    {edad: 18, active:true, nombre:'Maria'},
    {edad: 5, active:true, nombre:'Yennifer'}
  ];

en src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
  persons: object = [
      {name: 'Rolando Gutierrez', age: 30},
      {name: 'Gonzalo Díaz', age: 10},
      {name: 'Niurka Jimenez', age: 28},
      {name: 'Jesús Donal', age: 15},
      {name: 'Ernesto Mendez', age: 45}
  ];

  constructor() {
  }
}

en src/app/app.component.html

<ul>
    <ng-container *ngFor="let person of persons">
        <li *ngIf="person.age >= 18">{{person.name}}</li> <!-- considerando que los mayores de edad tienen más de 18 -->
    </ng-container>
</ul>

Tengo problemas para que funciones la libreria de Google Maps a la fecha 27/09/2018, por favor si alguien sabe que pasos mas actualizados y mejor explicados por favor les pido ayuda.

peoples: any = [
    {active: true, name: 'Pepito', age: 15},
    {active: false, name: 'Pablo', age: 40},
    {active: true, name: 'Juan', age: 25},
    {active: true, name: 'Carlos', age: 11},
    {active: true, name: 'María', age: 18},
  ];
<ul>
  <ng-container *ngFor="let people of peoples">
    <li *ngIf="people.active && people.age >= 18">{{ people.name }}</li>
  </ng-container>
</ul>

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

En el app.component.ts:

personas:any = [
  {age: 19, nombre: 'Jennifer'},
  {age: 19, nombre: 'Axel'},
  {age: 33, nombre: 'Richard'},
  {age: 36, nombre: 'Mirna'},
  {age: 15, nombre: 'Karla'},
];

Mientras que en el app.component.html:

<hr>
<h2>Personas</h2>
<ul>
    <ng-container *ngFor="let persona of personas">
        <li *ngIf="persona.age >= 18">{{ persona.nombre }}</li>
    </ng-container>
</ul>
export class AppComponent {
  title = 'PlatziSquare';
  personas: any = [
    {edad: 12, nombre: 'Pedro'},
    {edad: 14, nombre: 'Pablo'},
    {edad: 17, nombre: 'Jacinto'},
    {edad: 25, nombre: 'Jose'},
    {edad: 23, nombre: 'Manuela'},
  ];

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

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

personas:any = [
    {
      edad:18,
      nombre:"Uriel",
    },
    {
      edad:30,
      nombre:"Dalia",
    },
    {
      edad:12,
      nombre:"Isabel",
    }
  ];

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

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

![](error.PNG

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>

Alguien sabe como puedo utilizar google map actualmente ya que no me permite mostrar el mapa

.Captura de pantalla de 2018-08-31 19-31-59.png

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

arreglo.PNG

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

Condicion.PNG

3.resultado

mayor18.PNG

Mi solución

  <h2>Personas mayores a 18 años</h2>
  <ul>
    <ng-container *ngFor="let persona of personas">
      <li *ngIf="persona.edad >= 18">{{persona.nombre}}</li>
    </ng-container>
  </ul>```

Mi solución:

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

En esta liga pueden obtener la lat y lng de manera más fácil y precisa: https://www.coordenadas-gps.com/
-Saludos.

1° en app.component,ts

agregar:
personas:any=[
{edad:38,nombre:‘Hugo’},
{edad:1,nombre:‘Paco’},
{edad:21,nombre:‘Luis’}
];

2° en app.component.html

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