Usando los pipes por defecto de Angular

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Usando los pipes por defecto de Angular

Comentarios

Alexis Antonio Moraga Gallardo

student

Otro de los Pipes por defecto de que pueden resultar muy utiles es
| titlecase
que pone la primera letra de cada palabra en mayusculas.
dejo el enlace a la documentacion oficial sobre los pipes

Jhon Castrillon

student

Excelente

Gabriel Solorzano

student

Muy Bien | titlecase

Jesús Leonardo Perea Alarcón

student

Jhon Castrillon

student

Actualicen el curso!

Arturo Mojica Guerrero

student

Hay otro curso de angular 6; he pasado por este para saber algo de fundamentos pero mi objetivo es angular 6; se que uno se frustra cuando no salen las cosas. Pero realmente debes ver este curso como un salto, algo para guiarte en cosas de concepto no tanto para la practica de codigo almenos que te quieras dedicar a retos de investigación que igual lo puedes hacer. Este curso es bueno a manera de historia.

Alexis Méndez Méndez

student

quedé tirado con http get y obtener por id y editar?!

JESUS ALBERTO LOPEZ VILLATORO

student

Mi solucion en el archivo cuando se convierte el object to array asigno temporal una nueva key dbname al lugar
lugares.component.ts

` lugaresService.getLugares()
.subscribe( (lugares) => {
this.lugares = lugares.json();

    var self = this;

    this.lugares =  Object.keys(this.lugares).map(function (key) { 
      self.lugares[key].dbname = key 
      return self.lugares[key]; 
    });
  });`

luego en el archivo lugares.component.html cambio el routerLink

routerLink="/crear/{{l.dbname}}"

ahora en lugares.service.ts debemos cambiar por http get para obtener el registro
en este caso el id seria el dbname con el identifcador generado por firebase

`public getLugar (id) {
// return this.afDB.object(‘lugares/’+id)
return this.http.get(this.API_ENDPOINT+’/lugares/’+id+’/.json’)

}`

en el constructor de crear.component.ts recordemos id tiene el valor del dbname

constructor (private lugaresService: LugaresService, private route: ActivatedRoute) { this.id = this.route.snapshot.params['id']; console.log(this.id) if(this.id != 'new') { this.lugaresService.getLugar(this.id) .subscribe(lugar => { this.lugar = lugar.json() this.lugar.dbname = this.id }) } }
y la funcion guardar o agregar lugar queda de la siguiente manera la cual contiene depnediendo el id la funcion de editar y la de crear

agregarLugar () { var direccion =${this.lugar.calle},${this.lugar.ciudad},${this.lugar.pais}`;

this.lugaresService.obtenerGeoData(direccion)
  .subscribe(result => {
    this.lugar.location = result.json().results[0].geometry.location
    delete this.lugar.dbname

    if(this.id != 'new') {
      this.lugaresService.editarLugar(this.lugar, this.id)
        .subscribe(r => {
          console.log(r)
        })
    } else {
      this.lugar.id = Date.now();
      this.lugaresService.guardarLugar(this.lugar)
      .subscribe(r=> {console.log(r)})
    }
    
    alert('Negocio Guardado con exito!');
    this.lugar = {}

  })

}`
con delete this.lugar.dbname borro el key temporal
y eso es todo funciona para mi si alguien tiene una forma mejor nos ayuda por favor

Carlos Uriel de Jesus Sánchez González

student

propiedad | pipe

Jesus Sandrea

student

Vue también tenia algo así en su primera versión me parece!

MORENO MONTOYA JUAN GABRIEL

student

no entiendo por que <a><li</li><a> y no <li><a></a></li> ???

Diego Forero

Team Platzi

Creo que es más como el profesor pensó la lógica en ese momento, al final es un enlace en un item de una lista, yo lo usaría con el a dentro del li

Fabián Veliz

student

En este caso, es semanticamente incorrecto que el <li> esté dentro del <a>.
El resultado correcto sería:

<ul>
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
</ul>

Omar Gaston

student

Tema: Uso de PIPE

Se coloca “|” luego del StringInterpolation para dar formato a la salida de datos. Ej,
{{ | date }}

date: Da formato de fecha
lowercase y uppercase: Cambian a minúsculas y mayúsculas respectivamente.

Cristian Palta

student

buenas clases

Jecsham Castillo

student

Los pipes equivaldrían a Helpers en habdlebars

Usuario anónimo

user

Me gusto el pipe de date, muy útil.

this.lugaresService.obtenerGeoData(direccion)
  .subscribe(result => {
    this.lugar.location = result.json().results[0].geometry.location
    delete this.lugar.dbname

    if(this.id != 'new') {
      this.lugaresService.editarLugar(this.lugar, this.id)
        .subscribe(r => {
          console.log(r)
        })
    } else {
      this.lugar.id = Date.now();
      this.lugaresService.guardarLugar(this.lugar)
      .subscribe(r=> {console.log(r)})
    }
    
    alert('Negocio Guardado con exito!');
    this.lugar = {}

  })

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

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

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4