Why News API not showing anything on HTML page but returns data on console.log

I Suspect the for loop might be taking time to display maybe? not really sure why this is not displaying

This is news.component.html

<div *ngFor="let article of articles">
<h2>{{article.title}}</h2>
<p>{{article.description}}</p>
<a href="{{article.url}}">Read full article</a>
</div>


this is data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
providedIn: 'root'
})
export class DataService {
apiKey = 'xxx';
get(){
return this.httpClient.get(`https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${this.apiKey}`);

}
constructor(private httpClient: HttpClient) { }
}



this is news.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

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

articles:any;

constructor(private dataService: DataService) { }

ngOnInit(){

this.dataService.get().subscribe((data:any)=>{
console.log(data);
this.articles = data['Articles'];
})
}

}



expecting data to show on html component but it shows blank Currently it's showing on console.log(data)

Continue reading...