Hello, welcome to another tutorial of The Complete Angular Course. In the last tutorial, we added some code to the create post component so we can upload the post data to the Firestore database.
Hello, welcome to another tutorial of The Complete Angular Course. In the last tutorial, we added some code to the create post component so we can upload the post data to the Firestore database.
Creating the Post Component
ng generate component tools/Post
1) Go to the Post Component HTML page and add a mat-card element.
Now that we have our icons, set the color of each icon to warn and then apply the action-item class for each as well.
Go to the Post component TypeScript file and get the value of the selector. Then add it to the Post Feed component HTML page.
PostFeed Component HTML
If we save the project and go to the browser, we should see the template that we made for the Posts.
Retrieving the Posts
import { FirebaseTSFirestore } from 'firebasets/firebasetsFirestore/firebaseTSFirestore';
firestore = new FirebaseTSFirestore();
If we look at our database, the documents with the posts data are in a collection call Posts.
Modifying the Post Component
The next step is to go to the Post component TypeScript file and create an input to accept a Post document.
@Input() postData: PostData;
Then go to the Post Component HTML page and use interpolation to replace the static value from the post image with the imageUrl from the post document.
Looping through all the Posts
Go to the PostFeed Component HTML page.
<app-post *ngFor="let post of posts" [postData]="post"></app-post>
If we save the project and go to the browser, we should see some of our posts.
If you notice, each post is taking up the whole width of the window which causes the images to be large.
3) Go to the post-feed component CSS file and create the selector for it.