I'm trying to make my template display data from the component when it is loaded. I have tried using the *ngIf condition set to object that is being loaded in itself.

So like this:

<table>
    <tbody *ngIf="country">
        <tr>
            <td>{{country.name}}</td>
            <td>{{country.population}}</td>
            <td>{{country.area}}</td>
            <td>{{country.language}}</td>
        </tr>
    </tbody>
</table>

However, nothing is being displayed on the page. This is what my component looks like:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { BackendService } from 'src/app/backend.service';
import { ICountry } from '../interfaces/country';

@Component({
  selector: 'app-countrydetails',
  templateUrl: './countrydetails.component.html',
  styleUrls: ['./countrydetails.component.css']
})
export class CountrydetailsComponent implements OnInit {

  public country: ICountry;

  constructor(private _backendService: BackendService, private router: Router) { }

  ngOnInit(): void {
    this.getCountry(this.router.url.replace('/',''));
  }

  getCountry(country: string): void {
    this._backendService.getCountry(country).subscribe(data => {
      this.country = data;
      console.log(data);
    });
  }
}

What should I do to make the template display my data when the object is no longer undefined?

{{country|json}}

{ "country": { "name": "Russia", "capital": "Moscow", "language": "Russian", "population": "144526636", "density": "8.4", "area": "3969100", "majorCities": [ { "name": "Moscow", "population": "12506468", "area": "2562", "rank": "1" }, { "name": "Saint Petersburg", "population": "5351935", "area": "1439", "rank": "2" }, { "name": "Novosibirsk", "population": "1473754", "area": "503", "rank": "3" } ] } }