Hello, welcome to another tutorial of The Complete Angular Course.
Hello, welcome to another tutorial of The Complete Angular Course.
Setting up the Post Component TypeScript File
To begin, open the project from where we left off in the last session.
import { FirebaseTSFirestore} from 'firebasets/firebasetsFirestore/firebaseTSFirestore';
Define a function call getCreatorInfo().
If we take a look at our data in Firestore, our user’s data is in a collection call Users and each set of data inside is called a document. That’s why we’re using the getDocument() method.
For the path, use Users to access the Users collection and then get the creator’s id from the post data.
Then add the onComplete callback function to get the document.
Under the post data input, add a String call creatorName and another string call creatorDescription
In the onComplete callback function, get the data by grabbing the result object and call the data() method, then store it in a variable call userDocument.
If we take a look at our user documents, there is a field call description and publicName. To get them in our code, grab the userDocument object and access the description and publicName properties and store them in the 2 variables that was created earlier.
In the ngOnInit function, call the getCreatorInfo() function.
Adding to the Post Component HTML Page
Go to the post component html page. Use interpolation to bring in the user’s name and description.
If we save the project and go to the browser, we’ll see the creator’s information for each post.
Creating the Reply Component
Now let’s create the reply component.
Open the terminal and create a component call Reply and put it in the tools directory using ng generate component.
ng generate component tools/Reply
Once the component is finish, go to the Reply Component HTML page. Add a paragraph element for the title of the reply dialog.
<p>Reply</p>
Add a div element underneath and call it reply-box. After the reply box, add a div and call it reply-action-bar. Inside the action bar, add a button and an input element for the users to enter and send their comments.
For the button, apply the mat-flat-button style to it and set the color to warn. For the content, use the send icon from Angular Material.
<mat-icon
Import the MatDialog class from Angular Material and inject it inside the constructor.
In the onReplyClick() function, grab the dialog object, call the open method, and pass in the ReplyComponent.
If we save the project and go to the app. Our reply component is almost finished.
If we go to the app now, the position of the button and input will be swapped. The next thing we need to do is to change the direction of the input back.
That is all for this video. In the next video, we’ll add the function to add comments and also display it in the reply-box section.