@page "/" @using MatBlazor @inject HttpClient http <MatAppBar Fixed="true"> <MatAppBarRow> <MatAppBarSection> <MatIconButton Icon="menu"></MatIconButton> <MatAppBarTitle>Blazor news client</MatAppBarTitle> </MatAppBarSection> <MatAppBarSection Align="@MatAppBarSectionAlign.End"> <MatIconButton Icon="favorite" Link="http://samprof.com"></MatIconButton> </MatAppBarSection> </MatAppBarRow> </MatAppBar> @if (app.Data != null) { <div style="padding-top: 70px;"> <h3>Blazor news</h3> <MatList SingleSelection="true" TwoLine="true"> @foreach (var item in app.Data.Articles) { <MatListItem> <MatListItemText> <MatListItemPrimaryText> <a href="@item.Url" target="_blank">@item.Title</a> </MatListItemPrimaryText> <MatListItemSecondaryText>@item.Content</MatListItemSecondaryText> </MatListItemText> </MatListItem> } </MatList> </div> } @functions { AppService app {get;set;} protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); this.app = new AppService(http); await this.app.Load(); } public class AppService { private readonly HttpClient _http; public AppService(HttpClient http) { _http = http; } public async Task Load() { this.Data = await this._http.GetJsonAsync<NewsData>( "https://newsapi.org/v2/everything?q=blazor&sortBy=publishedAt&apiKey=69817812c6db452884e14cf05efd9561"); } public NewsData Data { get; set; } } public class NewsData { public Article[] Articles { get; set; } } public class Article { public string Title { get; set; } public string Content { get; set; } public string Image { get; set; } public string UrlToImage { get; set; } public string Url { get; set; } } }