10000

#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();
  }
}

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://*.nytimes.com/*"],
      "exclude_matches": ["*://*/*business*"],
      "js": ["contentScript.js"]
    }
  ],
  ...
}