Cómo implementar type ahead con Observables y RxJS

Un aporte con respecto a los Observables y los Stream

Los observables son objetos a los que un observador debe subcribirse para que sea notificado cuando se presenten cambios. La programación reactiva trabaja bajo streams, los cuales son flujos de datos como variables, entradas de un usuario, consultas de base de datos, etc. Los streams se pueden representar mediante los Observables y manipularlos con operadores como si fueras colecciones de datos.

Los Streams son objetos que almacenan flujos de datos, datos que cambian en el tiempo. La idea con los Observables es reaccionar automáticamente a los cambios del Stream.

Cada Stream provee una función subscribe con la que podemos reaccionar a sus datos.
[La notación para los Streams es con un $ al final]

Les recomiendo mucho el siguiente página para comprender el tema de los stream: Aqui

Juan Antonio Baracat

Muy buen aporte!

Francisco Manuel Velásquez Escobar

Excelente! gracias!

JUAN CARLOS RAMIREZ CONSTANTINO

A mi me salio un error con FormControl, lo solucione ingresando a APP.MODULE.TS en import ReactiveFormsModule dentro de @angular/forms y de la misma forma colocar ReactiveFormsModule en los imports de NgModule. Espero que les sirva.

Yohan Estiven Arias Vasquez

Tuve un error con la importación de {Http}. La cambié por
import {HttpClient} from ‘@angular/common/http’;
y funcionó correctamente

Oscar Barajas Tavares

Team Platzi

gracias por el aporte.

Usuario anónimo

User

Tengo este error alguien puede ayudarme.

ERROR in src/app/crear/crear.component.ts(29,8): error TS2339: Property ‘switchMap’ does not exist on type ‘Observable<any>’.

Alfonso Adame Rueda

hola buenas tardes,
si estas intentando instalar el google map en angular 6 no sirve, es solo para angular 4, recuerda tambien que todos los componentes que creemos deben estar registrados en el module.ts ,revisalo y me cuentas.

Juan Manuel Campos

No es solo para angular 6, simplemente cambia la sintaxis te dejo el enlace de la documentación de angular 6 si aún es útil.

Lery Andy Piérola Lazarte

no tengo Http en mi Angular 8 :( que usar en su lugar?

Miguel Pizarro C.

Ahora tienes que usar HttpClient, para usarlo debes incluir dentro de tu app.module.ts el modulo HttpClientModule y luego en el construcción de tu servicio debe incluir httpClient que es importando desde '@angular/common/http'.

Luis José Leopardi Velásquez

Por que no hacen ese get en un servicio? y así se le delega esa responsabilidad a un servicio, en lugar de tenerla en el componente

Ivan Cardozo

Angular 6 – 24/11/2018 , para que el input (componente reactivo) funcione tienen que irse a app.module.ts e importar :

ReactiveFormsModule

dejo el codigo:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { AgmCoreModule } from '@agm/core'; //maps
import { ResaltarDirective } from './directives/resaltar.directive';
import { ContarClicksDirective } from './directives/contar-clicks.directive';
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {Routes, RouterModule} from '@angular/router';
import { DetalleComponent } from './detalle/detalle.component';
import { LugaresComponent } from './lugares/lugares.component';
import { ContactoComponent } from './contacto/contacto.component';
import { LugaresService } from './services/lugares.service';
import { CrearComponent } from './crear/crear.component';
import { AngularFireModule} from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import {AngularFireAuthModule} from "angularfire2/auth";
import { HttpClientModule } from '@angular/common/http';
import {LinkifystrPipe} from './pipe/linkifystr.pipe';
import {LoginComponent} from './login/login.component';
import {RegistroComponent} from './registro/registro.component';
import {AutorizacionService} from "./services/autorizacion.service";
import { MyGuard } from './services/my-guard.service';

const appRoutes: Routes = [
  {path:"", component: LugaresComponent},
  {path:"lugares", component: LugaresComponent},
  {path:"detalle/:id", component: DetalleComponent},
  {path:"contacto", component: ContactoComponent},
  {path:"crear/:id", component: CrearComponent, canActivate:[MyGuard]},
  {path:"login", component: LoginComponent},
  {path:"registro", component: RegistroComponent},
];

@NgModule({
  declarations: [
    AppComponent,
    ResaltarDirective ,
    ContarClicksDirective,
    DetalleComponent,
    LugaresComponent,
    ContactoComponent,
    CrearComponent,
    LinkifystrPipe,
    LoginComponent,
    RegistroComponent

  ],
  imports: [
    BrowserModule,
      FormsModule,
      AgmCoreModule.forRoot({
      apiKey: ''
    }),BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule,// imports firebase/storage only needed for storage features
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule
  ],
  providers: [LugaresService , AutorizacionService, MyGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usuario anónimo

User

Muy interesante los TypeAhead.

Juan Gabriel Ballesteros Villacrés

Tengo una duda, es buena práctica colocar gran parte de la lógica en el constructor? En varias clases lo ha hecho.

Edwar Baron

Team Platzi

Hola, es buena practica si toda la logica es necesaria para la inicializacion del objeto, si son cosas que no necesariamente deben ejecutarse, ya comienza a generar mucha carga y no es buena idea.

Arturo Mojica Guerrero

Porque se le pone el tipo $ que identificamos con esta escritura en una variable?

MA MateriaGris01

Alguien me responde por qué el profe Eduardo menciona que “no siempre nuestros programas van a estar corriendo en el brower” ?

David Toca

Porque es posible que los componentes se rendereen en el servidor por ejemplo, en ese caso correrian en el backend en nodejs.

Pedro Ramón Sánchez Chacón