Integrated Blazor HeroEditor in Angular app, including event binding

Xenoage · Xenoage · commit b8b726dacd22 · 2023-11-08T18:58:18.000+01:00
diff --git a/Angular/src/app/app.component.html b/Angular/src/app/app.component.html
@@ -1,10 +1,7 @@
-<blazor-counter></blazor-counter>
-<!--
 <h1>{{title}}</h1>
 <nav>
   <a routerLink="/dashboard">Dashboard</a>
   <a routerLink="/heroes">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
 <app-messages></app-messages>
--->
diff --git a/Angular/src/app/hero-detail/hero-detail.component.html b/Angular/src/app/hero-detail/hero-detail.component.html
@@ -1,10 +1,6 @@
-<div *ngIf="hero">
+<div>
   <h2>{{hero.name | uppercase}} Details</h2>
-  <div><span>id: </span>{{hero.id}}</div>
-  <div>
-    <label for="hero-name">Hero name: </label>
-    <input id="hero-name" [(ngModel)]="hero.name" placeholder="Hero name"/>
-  </div>
+  <blazor-heroeditor #editor [hero]="hero"></blazor-heroeditor>
   <button type="button" (click)="goBack()">go back</button>
   <button type="button" (click)="save()">save</button>
 </div>
diff --git a/Angular/src/app/hero-detail/hero-detail.component.ts b/Angular/src/app/hero-detail/hero-detail.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Location } from '@angular/common';
 
@@ -11,7 +11,8 @@ import { HeroService } from '../hero.service';
   styleUrls: [ './hero-detail.component.css' ]
 })
 export class HeroDetailComponent implements OnInit {
-  hero: Hero | undefined;
+  hero: Hero = { id: 0, name: "" };
+  @ViewChild("editor") editor!: ElementRef;
 
   constructor(
     private route: ActivatedRoute,
@@ -23,12 +24,22 @@ export class HeroDetailComponent implements OnInit {
     this.getHero();
   }
 
+  ngAfterViewInit(): void {
+    // Register web component event (we need to bind "this" to the Angular component!)
+    this.editor.nativeElement.heroChanged = this.onHeroChanged.bind(this);
+  }
+
   getHero(): void {
     const id = parseInt(this.route.snapshot.paramMap.get('id')!, 10);
     this.heroService.getHero(id)
       .subscribe(hero => this.hero = hero);
   }
 
+  onHeroChanged(hero: Hero) {
+    console.log("Hero changed from Blazor component: " + hero.name);
+    this.hero = hero;
+  }
+
   goBack(): void {
     this.location.back();
   }
diff --git a/Angular/src/index.html b/Angular/src/index.html
@@ -11,5 +11,6 @@
 </head>
 <body>
   <app-root></app-root>
+  <div id="app"></div> <!-- Unused. Just to make Blazor happy. -->
 </body>
 </html>
