Added a store page
This commit is contained in:
11
src/app/store/categories.component.html
Normal file
11
src/app/store/categories.component.html
Normal file
@ -0,0 +1,11 @@
|
||||
<div class="container">
|
||||
<div class="row py-5">
|
||||
<mat-card *ngFor="let c of categories | async">
|
||||
<img mat-card-image [src]="c.image | async" [alt]="c.name">
|
||||
<mat-divider class="custom-line"></mat-divider>
|
||||
<mat-card-content>
|
||||
<h3>{{c.name}}</h3>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
26
src/app/store/categories.component.ts
Normal file
26
src/app/store/categories.component.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {AngularFirestore} from 'angularfire2/firestore';
|
||||
import {AngularFireStorage} from 'angularfire2/storage';
|
||||
import {map} from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'store',
|
||||
templateUrl: 'categories.component.html'
|
||||
})
|
||||
export class CategoriesComponent {
|
||||
categories;
|
||||
|
||||
constructor(private db: AngularFirestore, private storage: AngularFireStorage) {
|
||||
this.categories = this.db
|
||||
.collection('categories')
|
||||
.valueChanges()
|
||||
.pipe(
|
||||
map(rows =>
|
||||
rows.map((row: any) => {
|
||||
row.image = this.storage.ref(`${row.name.toLowerCase()}.jpg`).getDownloadURL();
|
||||
return row;
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user