Question

Technologies:

javascript

html

Tolerim

a day ago

How come the Angular object is not showing up in HTML?

As I am learning Angular through a LinkedInLearning tutorial, I am facing difficulty in displaying data from an object in my component. Even though I can see the object's properties in the console, I am unable to display them on the page, except for the boolean value. Here's my component code:


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ListingsService } from '../listings.service';
import { Listing } from '../types';

@Component({
  selector: 'app-listing-detail-page',
  templateUrl: './listing-detail-page.component.html',
  styleUrls: ['./listing-detail-page.component.css']
})
export class ListingDetailPageComponent implements OnInit {
    isLoading: boolean = true;
    listing: Listing;

  constructor(
    private route: ActivatedRoute,
    private listingsService: ListingsService,
    
  ) { }
  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.listingsService.getListingById(id!).subscribe(l=>{
      this.listing = l;
      console.log(l);
      this.isLoading = false;
    });
    this.listingsService.addViewToListing(id!).subscribe(()=>console.log('Views Updated'));
  }
}

Also, here's my HTML for display:



    This listing has been viewed {{listing.views}} {{isLoading}} times
    
        
    
    Name {{ listing.name }}
    {{listing.description}}
    ${{listing.price}}
    
        
    


    Loading...

While the boolean value {{isLoading}} is displaying correctly, I am unable to see any object properties on the page. Even though I can log the object and view its properties in the console log, it seems to be held within an array. I'm not sure how this is happening, or how to address it. The JSON.stringify of the object in the console is as follows: https://i.stack.imgur.com/y8HoK.png. Can you please guide me on how to display this object in HTML from my Angular component? Here's the page with visible {{isLoading}} but non-rendered object.

Answers(1)

Accepted Answer

It looks like your object is being held within an array. To access the properties of the object, you need to specify the index of the array in which it is located. In this case, you can use listing[0] to access the first (and only) element in the array. Here is an updated version of your HTML code that should work:

<div class="content-box" *ngIf="!isLoading">
    <p>This listing has been viewed {{listing[0].views}} times</p>
    <a routerLink="/listings">
        <button>Back</button>
    </a>
    <h2>Name {{ listing[0].name }}</h2>
    <p>{{listing[0].description}}</p>
    <p>${{listing[0].price}}</p>
    <a routerLink="/contact/{{listing[0].id}}">
        <button>Contact Seller</button>
    </a>
</div>

<div class="content-box" *ngIf="isLoading">
    <h3>Loading...</h3>
</div>

By using listing[0], you should be able to access the properties of the object and display them on the page.