Video Tutorials

Policy

Twitter LogoFacebook Logo
Angular Project 1: Building a Social Media Site Part 10: Reply Component
In this tutorial, we will retrieve the posts data and display it.
By: King

Hello, welcome to another tutorial of The Complete Angular Course. 


In the last tutorial, we took the Posts data from Firestore and displayed it in the post feed page. In this tutorial, we’ll add to it and display the creator’s information in the header section of the post. 

We’ll also create the reply comment so others can leave comments on the post. 

If you have not already, subscribe to the channel and follow along in this project.

Setting up the Post Component TypeScript File

To begin, open the project from where we left off in the last session. 


Go to the Post component TypeScript file. Import the FirebaseTSFirestore class and create a Firestore object.

import { FirebaseTSFirestore} from 'firebasets/firebasetsFirestore/firebaseTSFirestore';


export class PostComponent implements OnInit {
  ...
  firestore = new FirebaseTSFirestore();

}

Define a function call getCreatorInfo(). 


The purpose of this function to retrieve the information of the user who created the post. Inside the function grab the Firestore object and call the getDocument() method.

getCreatorInfo(){
    this.firestore.getDocument();
}

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.

Image from Codeible.com

For the path, use Users to access the Users collection and then get the creator’s id from the post data.

getCreatorInfo(){
    this.firestore.getDocument(
       {
          path: ["Users", this.postData.creatorId],
       }
    );
}

Then add the onComplete callback function to get the document.

getCreatorInfo(){
    this.firestore.getDocument(
       {
          path: ["Users", this.postData.creatorId],
          onComplete: result => {

          }
       }
    );
}

Under the post data input, add a String call creatorName and another string call creatorDescription

@Input() postData: PostData;
creatorName: string;
creatorDescription: string;

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.

this.firestore.getDocument(
    {
        path: ["Users", this.postData.creatorId],
        onComplete: result => {
           let userDocument = result.data();
        }
    }
);

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.

this.firestore.getDocument(
    {
        path: ["Users", this.postData.creatorId],
        onComplete: result => {
           let userDocument = result.data();
           this.creatorName = userDocument.publicName;
           this.creatorDescription = userDocument.description;
        }
    }
);

In the ngOnInit function, call the getCreatorInfo() function. 

ngOnInit(): void {
    this.getCreatorInfo();
}

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.

<mat-card>
    <mat-card-header>
        <mat-card-title>{{creatorName}}</mat-card-title>
        <mat-card-subtitle>{{creatorDescription}}</mat-card-subtitle>
    </mat-card-header>
    ...
</mat-card>

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. 


In our design, if we click on the chat bubble icon, dialog will show up and allow users to leave comments on the post. 

Each comment will have the name of the user who left the comment, and the comments that you leave behind, will have a different style. 

Image from Codeible.com

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. 

<p>Reply</p>
<div id="reply-box">

</div>
<div id="reply-action-bar">
    <button>

    </button>
    <input placeholder="Comment...">
</div>

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.

<button mat-flat-button color="warn">
        <mat-icon>send</mat-icon>
</button>

Go to the Reply Component CSS file and create the selectors for reply-box, reply-action-bar, and input.

For reply-box, set 

the width to 100%, 
height to 300 pixels, 
overflow to auto to get the scroll effect, 
min-width to 400 pixels, 
max-width to 600 pixels, 
and add a left and right padding of 1em. 
Do not forget to set the box-sizing to border-box so it will calculate the paddings.

For reply-action-bar, set 

the width to 100%, 
display to grid, 
and grid-template-columns to 3em and 1fr. 

By setting the columns to 3em and 1fr, we’ll have a button with a fixed size and an input with a flexible width to fill the remaining spaces.

For input, set 

the padding to 1em 2em 1em and 1em, 
border to 1 pixel, solid, 
gray, outline to none, 
and width to 100%. 
Also set the box-sizing to border-box so it’ll calculate the paddings.

#reply-box {
    width: 100%;
    height: 300px;
    overflow: auto;
    min-width: 400px;
    max-width: 600px;
    padding: 0 1em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#reply-action-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 3em 1fr;
}

input {
    padding: 1em 2em 1em 1em;
    border: 1px solid gray;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Go to Post Component HTML. 
Attach a click event to the chat_bubble action item.  

<mat-icon 

(click)="onReplyClick()"
 class="action-item" color="warn">
   chat_bubble_outline
</mat-icon>

Go to the Post Component TypeScript file and define the function for the click event.

onReplyClick(){

}

Import the MatDialog class from Angular Material and inject it inside the constructor.

import { MatDialog } from '@angular/material/dialog';
...

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
  ...
  constructor(private dialog: MatDialog) { }

}

In the onReplyClick() function, grab the dialog object, call the open method, and pass in the ReplyComponent.  


When the chat_bubble action is clicked on, it’ll trigger a dialog to popup and display the contents inside the ReplyComponent.

onReplyClick(){
   this.dialog.open(ReplyComponent);
}

If we save the project and go to the app. Our reply component is almost finished. 

Image from Codeible.com

Go back to the Reply component CSS file.

For the action bar, set the direction to rtl which stands for right to left. This will stack the contents of the grid starting from the right. 

#reply-action-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 3em 1fr;
    direction: rtl;
}

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.

input {
    padding: 1em 2em 1em 1em;
    border: 1px solid gray;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    direction: ltr;
}

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. 


If you find this video helpful, please give it a like, share, and subscribe to support the channel. 

See you in the next tutorial.


Sign In