Blazor Custom Element


Thu Jul 21 2022 14:09:23 GMT+0000 (Coordinated Universal Time)

Saved by @Polly #webassembly

#add customElement pkg to blazor web assembly app 

#create custom element component in Program.cs

#define Razor @code

<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
  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>
        <button (click)="addBlazorCounter()">Add Blazor counter from angular</button>
        <button (click)="removeBlazorCounter()">Remove Blazor counter from angular</button>
      <div *ngFor="let counter of blazorCounters">
        <cus-ele [attr.title]="counter.title"
  styles: []

export class AppComponent {
  title = 'ng-custom-ele';

  blazorCounters: any[] = [];
  nextCounterIndex = 1;

  addBlazorCounter() {
    const index = this.nextCounterIndex++;
      title: `Angular sent Counter ${index} input from angular to Razor @code`,
      incrementAmount: index,

  removeBlazorCounter() {

WebAssembly > dotnet code accessed and running in browser # use - build database from dotnet - hand data to Razor - interact w/ Angular