I'm currently playing around with Angular and a Django Rest API I developed previously. The API has an endpoint which returns the number of currently logged-in users.

I'm able to see the JSON response in my browser console, but I'm not sure how I can display the value of it.

This is what I'm doing at my template:

```html
<div *ngIf="authService.isLoggedIn()" class="fa fa-user">{{ users_online }}</div>

```

where the variable `users_online` only shows `[object Promise]`.

This is how I pull the value from the API at my app.service.ts

```
import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {environment} from "../environments/environment";
import {firstValueFrom} from "rxjs";

export interface UsersOnlineCounterResponse {
  users_online: number;
}

const headers = {
  'Authorization': 'Bearer ' + localStorage.getItem('access_token'),
}

@Injectable({
  providedIn: 'root'
})
export class AppService {

  constructor(private http: HttpClient) { }

  async UsersOnlineCounter() {
    await firstValueFrom(this.http.get<UsersOnlineCounterResponse>(environment.backend + '/api/v1/users/online', {headers})).then(data => {
      return data.users_online;
    }
    );
  }
}

```

And finally, this is what I do at my app.component.ts

```
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { AppService } from "./app.service";
import { AuthService } from "./auth/auth.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'example.com'
  users_online = this.appService.UsersOnlineCounter();
  constructor(private titleService: Title, public authService: AuthService, public appService: AppService) {
  }
  ngOnInit() {
    this.titleService.setTitle(this.title);
  }
}

```