#add customElement pkg to blazor web assembly app #create custom element component in Program.cs builder.RootComponents.RegisterCustomElement<Counter>("cus-ele"); #define Razor @code <h1>@Title</h1> <p role="status">Current count in Razor: @currentCount</p> <p>Increment amount in Razor: @IncrementAmount</p> <button class="btn btn-primary" @onclick="IncrementCount">Click me in Razor</button> @code { private int currentCount = 0; [Parameter] public string Title { get; set; } = "Blazor Counter"; [Parameter] public int? IncrementAmount { get; set; } private void IncrementCount() { currentCount += IncrementAmount.GetValueOrDefault(1); } } ************** #create proxy file w/ dotnet generated url { "/": { "target": "https://localhost:44355/", "secure": false} } #create separate angular app @Component({ selector: 'app-root', template: ` <div class="content"> <h1>Welcome to {{title}}! from Angular Code</h1> <p>This is an Angular application that can also host Blazor components.</p> <p> <button (click)="addBlazorCounter()">Add Blazor counter from angular</button> <button (click)="removeBlazorCounter()">Remove Blazor counter from angular</button> </p> <div *ngFor="let counter of blazorCounters"> <cus-ele [attr.title]="counter.title" [attr.increment-amount]="counter.incrementAmount"> </cus-ele> </div> </div> `, styles: [] }) export class AppComponent { title = 'ng-custom-ele'; blazorCounters: any[] = []; nextCounterIndex = 1; addBlazorCounter() { const index = this.nextCounterIndex++; this.blazorCounters.push({ title: `Angular sent Counter ${index} input from angular to Razor @code`, incrementAmount: index, }); } removeBlazorCounter() { this.blazorCounters.pop(); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter