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