Requisitos
Haber hecho tu app básica, puedes tomar el ejemplo del tutorial # 1 de la serie "Introducción a Kikstart UI"
💡Tip
La manera en que generamos el siguiente componente
es mucho más eficiente ya que crea el componente con su
respectiva ruta y módulo.
Paso # 1
Creamos el componente posts
con su módulo y rutas.
1: Ejecuta el siguiente comando:
ng g module posts --route posts --module app
Paso # 2
Configuramos nuestra app para utilizar las colecciones del proyecto en firebase
.
💡Recuerda
Antes de hacer este paso debiste haber instalado
ng add @angular/fire
y configurar tu environment, como en el tutorial # 4 de la serie 1.
1: Busca la rutasrc/app.module.ts
y escribe lo siguiente en la parte superior:
import {AngularFireModule} from "@angular/fire";
import {environment} from "../environments/environment";
import {AngularFirestoreModule} from "@angular/fire/firestore";
2: Luego en el mismo archivo en el array de imports
coloca lo siguiente:
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule
Paso # 3
Mostrar la ruta
1: Busca la ruta src/app/app.component.ts
en el array de link agrega un label más.
links: UiLink[] = [
{ label: 'Home', path: '/' },
{ label: 'About', path: '/about' },
{ label: 'Contact', path: '/contact' },
{ label: 'Blog', path: '/posts' },
];
}
Paso # 4
Creamos el servicio y lo usamos en nuestro componente.
1: Ejecuta el siguiente comando:
ng g service posts/posts --skip-tests
2: Configura el servicio en el archivo posts.service.ts
y agrega lo siguiente en la parte superior:
import { Observable } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore';
import { collectionData, docData, fromCollectionRef } from 'rxfire/firestore';
💡Recuerda
Para cada paquete de
firebase
que utilices debes instalarlo en este caso usamos rxfire entonces lo instalamos.
3: Luego en el mismo archivo en la clase coloca lo siguiente:
export class PostsService {
blogs: Observable<any[]>;
collectionRef: any;
constructor(private firestore: AngularFirestore) {
this.collectionRef = this.firestore.collection('courses');
this.blogs = collectionData(this.collectionRef.ref, 'id');
}
}
Paso # 5
Hacemos la lógica para usar nuestro servicio.
1: Busca la ruta src/app/posts.component.ts
coloca lo siguiente en la parte superior:
import { PostsService } from './posts.service';
import { Observable } from 'rxjs';
2:Luego en el mismo archivo en la clase coloca lo siguiente:
export class PostsComponent implements OnInit {
courses$: Observable<any>;
constructor(public service: PostsService) {
this.courses$ = this.service.blogs;
}
ngOnInit(): void {}
}
Paso # 6
Finalmente renderizamos los datos en nuestro componente
1: Busca la ruta src/app/posts/posts.component.html
y pega lo siguiente:
<div *ngIf="courses$ | async as posts">
<div *ngFor="let post of posts">
<img src="{{ post.author_img }}" />
<a [routerLink]="['/posts', post.id]">
<h2>{{ post.title }}</h2>
</a>
<h3>{{ post.description }}</h3>
<h4>{{ post.author_name }}</h4>
</div>
</div>
Resumen
Generamos un componente post
con su módulo y ruta,creamos su servicio y lo usamos en el templete.
Gracias por seguir este tutorial, si tienes algun comentario hazlo a través de mi twitter y con gusto te contestare.
Top comments (0)