1) Note that I am pushing the uid’s into a friends collection. (Created nodes with both id’s as keys because, once the person accepts the request, he should show up as a friend in both their accounts).

2) I am also deleting the request once a friend request has been accepted. I guess this is pretty much self-explanatory.

Now wait. We have added code for accepting a request. We have created a new collection called friends for storing these friendships, but have we displayed it on the screen ? Not yet.

Note that I am publishing an event called friends (which I have subscribed to in chats).

Wait.. There’s one more task. Open up chats.html and modify it as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!--

Generated template forthe ChatsPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages andnavigation.

-->

<ion-header>

<ion-navbar color="hcolor">

<ion-title>Chats</ion-title>

<ion-buttons end>

<button ion-button icon-only(click)="addbuddy()">

<ion-icon name="person-add"></ion-icon>

</button>

</ion-buttons>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list no-lines>

<ion-list-header>

Requests

</ion-list-header>

<ion-item-sliding *ngFor="let item of myrequests">

<ion-item>

<ion-avatar item-left>

<img src="{{item.photoURL}}">

</ion-avatar>

<h4>{{item.displayName}}</h4>

</ion-item>

<ion-item-options>

<button ion-button color="secondary"(click)="accept(item)">

<ion-icon name="checkmark"></ion-icon>

ADD

</button>

<button ion-button color="danger"(click)="ignore(item)">

<ion-icon name="trash"></ion-icon>

NOPE

</button>

</ion-item-options>

</ion-item-sliding>

<ion-list-header>

Friends

</ion-list-header>

<ion-item *ngFor="let item of myfriends"(click)="buddychat(item)">

<ion-avatar item-left>

<img src={{item.photoURL}}>

</ion-avatar>

<h3>{{item.displayName}}</h3>

</ion-item>

</ion-list>

</ion-content>

This will show the friends in a list. Now run the app and if everything goes fine you should see the below screens.

What we have done so far:

We have created an app with authentication, profile management and a provision to add friends.

Going forth we will see how to use firebase and events to build a real-time chat system.

Hope this helped you guys. If you found this helpful kindly consider supporting me on patreon or by clicking the donate button and donating on paypal – Click here or just sharing this post on social media would help me too.