IONIC/Angular display single object on View - ngIF*

I would like to ask for help because I’m facing some problem. Basically I am getting some object from external API (Strapi) and I am receiving it within GET method, but when I’m trying to display it on Views with ngIF * it is not being displayed.

Picture 2 Picture 1

Here is my code:


  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    <ion-title>{{ information?.name }}</ion-title>
<ion-content padding>
  <ion-card *ngIf="information">
        {{ }}
        {{ }}


import { WordsService } from './../../services/words.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
  selector: 'app-word-details',
  templateUrl: './',
  styleUrls: ['./'],
export class WordDetailsPage implements OnInit {
  information = null;
  result: Object;
   * Constructor of our details page
   * @param activatedRoute Information about the route we are on
   * @param wordService The word Service to get data
  constructor(private activatedRoute: ActivatedRoute, private wordService: WordsService) { }
  ngOnInit() {
    // Get the ID that was passed with the URL
    let id = this.activatedRoute.snapshot.paramMap.get('id');
    // Get the information from the API
    this.wordService.getDetails(id).subscribe(result => {
      this.information = result;

  openWebsite() {, '_blank');


  * Get the detailed information for an ID using the "i" parameter
  * @param {string} id wordID to retrieve information
  * @returns Observable with detailed information
  getDetails(id) {
    return this.http.get(`${this.url}?id=${id}`);

Second person today forgetting that the data returned is an array, not an object you can refer to using keys


Hey man, i’ve found solution on Stackoverflow and it was so obvious - we need to call an Array not object so

    // Get the information from the API
    this.wordService.getDetails(id).subscribe(result => {
      this.information = result[0]; // this is the solution

1 Like