Cannot map HTTP response to interface type in angular 5

Question

I am calling a HTTP request and typecasting the received response to required type using an interface, in a service. The HTTP response is a JSON object with some key value pair of items. I have subscribed to that service in an component. When I console log the response received in the subscribe function, it logs the object perfectly with key value pair. But when I assign that object to the component class member, it does not seem to be typecast to the required interface type. Because when I use the class member variable keys in the component html, I get error - 'Cannot read property 'X' of undefined'

Here are the code snippets -

Interface

export interface NewsItem {
    status: string;
    totalResults: number;
    articles: any[];
}

Service

export class NewsService {
    constructor(private http: HttpClient) {}
    getCategoryNews(): Observable<NewsItem>{
        return this.http.get<NewsItem>(newsUrl);
    }
}

component.ts

export class NewsContainerComponent implements OnInit {
newsData: NewsItem;
constructor(private _newsService: NewsService) {}
ngOnInit() {
        this._newsService.getCategoryNews().subscribe(
            (response) => {
                this.newsData = response;
                console.log(this.newsData);
            },
            (err) => {
                console.error(err);
            }
        )
    }
}

component.html

<div *ngFor="let item of newsData.articles">
    {{item.description}}
</div>

Actual Response from the HTTP request is as follows

{
   "status":"ok",
   "totalResults":2,
   "articles":[
      {
         "source":{
            "id":"google-news-au",
            "name":"Google News (Australia)"
         },
         "title":"Former Malaysian PM questioned on graft",
         "description":"Former Malaysian Prime Minister Najib Razak could face criminal charges after being questioned over a corruption scandal."
      },
      {
         "source":{
            "id":"the-guardian-uk",
            "name":"The Guardian (UK)"
         },
         "title":"Manchester Arena attack: thousands to mark anniversary",
         "description":"Series of events across city including a mass singalong are being held one year on from terrorist attack",
      }
   ]
}

In case of above code, I am getting error - "Cannot read property 'articles' of undefined". Why I am getting this error even when type casting HTTP response with interface?

Answer 1

You are trying to access the data before it is Resolved
In this case Use safe navigation operator ( ?. )
While accessing properties of an object it may throw an exception if the object is null or undefined. The Angular safe navigation operator (?.) is a fluent and convenient way to guard against null and undefined values in property paths.

<ng-container *ngIf="newsData">
    <div *ngFor="let item of newsData?.articles">
        {{item.description}}
    </div>
<ng-container>