Programador Novato

En este tutorial vamos a agregar servicios y componentes con Firebase y Angular siguiendo estos pasos:

• Agregar librerías de bootstrap.
• Crear un componente.
• Crear un servicio.
• Llamar firestore (base de datos) a nuestro servicio.

Comandos:
Crear componentes: ng g c components/lista
Crear servicio: ng g s services/con

Codigo en git: https://github.com/programadornovato/ngFirebase/commit/d27a57286ab74517f57924c217fd56f77f3688bc

src/app/app.component.html

<!-- <ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul> -->
<app-lista></app-lista>

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { ListaComponent } from './components/lista/lista.component';
import { AgregaComponent } from './components/agrega/agrega.component';
@NgModule({
  declarations: [
    AppComponent,
    ListaComponent,
    AgregaComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/components/agrega/agrega.component.html

<p>agrega works!</p>

src/app/components/agrega/agrega.component.ts

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

@Component({
  selector: 'app-agrega',
  templateUrl: './agrega.component.html',
  styleUrls: ['./agrega.component.css']
})
export class AgregaComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

src/app/components/lista/lista.component.html

<p>lista works!</p>

src/app/components/lista/lista.component.ts

import { Component, OnInit } from '@angular/core';
import {ConService} from '../../services/con.service'
@Component({
  selector: 'app-lista',
  templateUrl: './lista.component.html',
  styleUrls: ['./lista.component.css']
})
export class ListaComponent implements OnInit {
  items:any;

  constructor(private con:ConService) {
    this.con.retornaItems().subscribe(items=>{
      this.items=items;
      console.log(this.items);
    })
  }

  ngOnInit(): void {
  }

}

🔗Puging de angular: https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
🔗 Documentacion de angularfire: https://github.com/angular/angularfire/blob/master/docs/firestore/collections.md
🎦[Curso] Bootstrap de 0 a 100 🌈: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSVmsZJIumVvfDviuW-c9AT
🎦[Curso] Firebase🔥de 0 a 100: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQqPh6eKk7_Q-ugWyhO6SKT
🎦[Curso] Angular js 🔺[De 0 a 100]: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRbxrnw-tAq6tG-NIUNu9sG
🎦[Curso] SASS de 0 a 100 🌈: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQXywJB8KMN_-GccZuVf9ag
🎦[Curso] LESS de 0 a 100 🌈: https://www.youtube.com/playlist?list=PLCTD_CpMeEKT70itw70uVs0vlFbvbCPQN

🔗 Pagina de angular: https://cli.angular.io/
🔗 Pagina de nodejs: https://nodejs.org/en/
🔗 Pagina de typescrip: https://www.typescriptlang.org/
🔗 Pagina oficial: https://www.programadornovato.com

🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>