@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; } } }
namespace BlazorFiddleProject { using Microsoft.AspNetCore.Components.Builder; using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { } public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>BlazorFiddleProject</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> app { } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>

Add component

BlazorFiddle was updated from Blazor 0.7 to .NET Core 3.0 Preview 9. Your old source code could not work. You need to upgrade to latest.