What is the best method for showcasing this console.log information in an Angular application?

I have developed a feature that displays users who are online. While it works perfectly in the console log, I am struggling to show p as the result if the user is online. Below is the code snippet:

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.log(data) above shows the details of all users who are currently online in the console. How can I modify this to display a condition on the front-end instead? We attempted something like this:

  CheckIfOnline(name) {
    const result = _.indexOf(this.onlineusers, name);
    if (result > -1) {
      return true;
    } else {
      return false;
    }
  }

HTML

 <p class="" *ngIf="CheckIfOnline(user.username)">online</p>

Unfortunately, the paragraph does not show up because there seems to be a missing element in the CheckIfOnline function. This function was set up as a prototype but I believe it should work with ngAfterViewInit. Can you suggest how to replace the console.log and correct the checkifonline function so they interact properly and display the p tag when the user is online?

Answer №1

One way to handle this is by creating a boolean flag variable and setting it in the ngAfterViewInit method.


public isUserOnline: boolean = false;

public ngAfterViewInit() {
    this.socket.on('usersOnline', data => {
     /** Check if user name exists in the data */
     this.isUserOnline = /* [write a logic to check if this.user.username exists in data] */
    });
  }

 <p class="" *ngIf="isUserOnline"> online</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing variations in the performance of my Speech Recognition code each time I run it?

Check out my code snippet: export class voiceRecognition { constructor() { } public startVoiceRecognition() { const recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimresults = false; recogn ...

Type-constrained generic key access for enhanced security

While attempting to create a versatile function that retrieves the value of a boolean property using a type-safe approach, I encountered an issue with the compiler not recognizing the type of my value. type KeyOfType<T, V> = keyof { [P in keyof T a ...

Exploring the power of Typescript functions within a traditional VueJS project

TL;DR: How can I import and use a typescript module into my plain js Vue-Components? I have a Vue 2 (not yet 3) project. In this specific project, I have made the decision to refactor some of the code logic into ES modules for improved testability and reu ...

Unable to render ASP.NET Core 2 WebAPI and Angular application on the webpage

Following a tutorial, I created an ASP.NET Core 2 Web API. The API functions properly when accessed through the browser at: https://localhost;44313/api/liveconsole To design the Angular UI for my web API, I referred to another tutorial. After multiple at ...

Implementing basic authentication with AWS Lambda and Application Load Balancer

A few days ago, I sought assistance on implementing basic-authentication with AWS Lambda without a custom authorizer on Stack Overflow. After receiving an adequate solution and successfully incorporating the custom authorizer, I am faced with a similar cha ...

Resolve the error message "Class is not a constructor" which arises while utilizing namespaces in TypeScript with WebPack

Issue with TypeScript Namespaces in PIXI.js As I delve into the world of TypeScript and PIXI.js without any framework, I find myself facing a challenge. Previously, at work, we utilized namespaces with the module keyword for a cleaner structure. However, ...

The specified type argument is not compatible with the ObservableInput<any> type

Struggling with an issue where the argument type (key:string) => Observable | PayloadType | is causing problems when trying to assign it to a parameter of type '(value: string, index: number) => ObersvableInput' return action$.pipe( fil ...

Cross-Origin Resource Sharing Problem - Angular version 8 with NodeJS and ExpressJS

I've attempted various solutions from different sources and have a feeling that I may be overlooking something minor here. In my setup, I have an AngularJS 8 application running on Node 10 with ExpressJS. The specific issue I'm encountering rela ...

The issue of returning a boolean value in an rxjs function leading to failure

Hey there, I am currently learning about rxjs and I want to create an observable that returns either true or false. This is my attempted code: checkLoggedIn(): Observable<boolean> { // Check with the server if the user is logged in if(this._tok ...

Analyzing past UTC date times results in a peculiar shift in time zones

When I receive various times in UTC from a REST application, I encounter different results. Examples include 2999-01-30T23:00:00.000Z and 1699-12-30T23:00:00.000Z. To display these times on the front end, I use new Date(date) in JavaScript to convert the ...

Exploring subclasses in TypeScript

When working with TypeScript and defining an interface like the one below: export interface IMyInterface { category: "Primary" | "Secondary" | "Tertiary", } Can we access the specific "sub types" of the category, such as ...

Exploring how to traverse a <router-outlet> within its container

I am attempting to switch the active component within a from its parent. After observing how Ionic achieves this, I believe it should resemble the following (simplified): @Component({ template: '<router-outlet></router-outlet>' } ...

What is causing the geolocation heading to remain "null" on Android devices when using Chrome?

Recently, I developed a compact geolocation watch using the following code snippet: navigator.geolocation.watchPosition( this.updateLocation.bind(this), this.errorLocation.bind(this), {enableHighAccuracy: true} ); The function updateLocation ...

What is the best way to link labels with input fields located separately in Angular?

Imagine a scenario where labels and form fields are being created in a *ngFor loop, as shown below: app.component.ts export class AppComponent { items = ['aaa', 'bbbbbb', 'ccccccccc'] } app.component.html <div class ...

Is ngForIn a valid directive in Angular 4?

While attempting to loop over the properties of an object using *ngFor with in, I encountered a challenge. Here is a sample code snippet: @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in o ...

What is the best way to assign the selected attribute to my mat-option element?

I am encountering an issue with my mat-select and mat-option control. I am trying to apply the selected attribute to the first mat-option control without using binding on [(ngModel)] or [(value)]. The mat-option control is being generated by the *ngFor d ...

Typescript: Convert Generics to a String Format

Is there a way for me to return a generic type as a string in this function? const actionName = <P extends string>(path: P) => <A extends string>(action: A): string => `${path}/${action}`; const path = actionName('filter'); con ...

Choose several checkboxes from the dropdown menu

After clicking the dropdown, I want to select multiple checkboxes instead of just one. I have tried using the prevent default method but it did not work. Beginner concept ...

Gain access to TypeScript headers by typing the request (req) object

Is there a way to access headers in a method that is typed with Express.Request? Here's an example code snippet: private _onTokenReceived(req: Express.Request, res: Express.Response): void { const header: string = req.headers.authorizatio ...

Creating a key-constrained type in Typescript for object literals with automatically deduced number values

Suppose we have an object literal defined as: export const SOURCE = { UNKNOWN: 'Unknown', WEB: 'Web', MOBILE: 'Mobile', ... } as const; and export const OTHER_SOURCE = { UNKNOWN: 0, WEB: 1, MOBILE: ...