@page "/" @if (newPageNumber != null) { <p>I heard the page number changed to: @newPageNumber</p> } <MatTable Items="@cars" class="mat-elevation-z5" ShowPaging="true" PageSize="3" CurrentPageChanged="@pageChanged" > <MatTableHeader> <th>Name</th> <th>Price</th> <th>Horsepower</th> </MatTableHeader> <MatTableRow> <td>@context.Name</td> <td>@string.Format("${0:f2}", @context.Price)</td> <td class="text-right">@context.Horsepower</td> </MatTableRow> </MatTable> @code { private int? newPageNumber = null; void pageChanged(int newPageNumber) { this.newPageNumber = newPageNumber; this.StateHasChanged(); } public class Car { public string Name { get; set; } public double Price { get; set; } public int Horsepower { get; set; } public Car(string name, double price, int horsepower) { Name = name; Price = price; Horsepower = horsepower; } } Car[] cars = new[] { new Car("Volkswagen Golf", 10000, 220), new Car("Volkswagen Passat", 11000, 240), new Car("Volkswagen Polo", 12000, 110), new Car("Ford Focus", 13000, 200), new Car("Ford Fiesta", 14000, 160), new Car("Ford Fusion", 15000, 260), new Car("Ford Mondeo", 16000, 120), }; }
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"> <script src="_content/MatBlazor/dist/matBlazor.js"></script> <style> app { } </style> <script type="text/javascript"> </script> </head> <body> <app>Loading...</app> <script src="_framework/blazor.webassembly.js"></script> </body> </html>

Add component

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