We want to display online users on a webpage by checking if they are currently active. The current code logs all online users in the console, but we need to show this visually on the page.
public isOnline: boolean = false;
...
...
ngOnInit() {
this.socket.emit('online', { room: 'global', user: this.user.username });
this.socket.on('refreshPage', () => {
this.GetUserData(this.name);
});
...
...
ngAfterViewInit() {
this.socket.on('usersOnline', data => {
console.log(data);
});
}
The console displays the list of online users. Now, how can we check if a specific user is online or not? We need to replace the console.log with a logic check that verifies if the user exists in the retrieved data:
this.isOnline = /* [write a logic check this.user.username exist in data ] */
Once we determine if a user is online, we can dynamically add a paragraph tag for each user based on their online status like so:
<p class="" *ngIf="isOnline">online</p>
What adjustments should be made to this code snippet?