refactor: hero-search の view が受け取る input を signal inputs に変更

kasaharu · Feb 25, 2024 · 782631a · 782631a
1 parent 3a880e2
commit 782631a
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 12 deletions.
diff --git a/src/app/features/dashboard/containers/hero-search/hero-search.component.ts b/src/app/features/dashboard/containers/hero-search/hero-search.component.ts
@@ -1,12 +1,11 @@
-import { AsyncPipe } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
 import { LyHeroSearchComponent } from '../../views/ly-hero-search/ly-hero-search.component';
 import { HeroSearchService } from './hero-search.service';
 
 @Component({
   selector: 'app-hero-search',
   standalone: true,
-  imports: [AsyncPipe, LyHeroSearchComponent],
+  imports: [LyHeroSearchComponent],
   templateUrl: './hero-search.component.html',
   styleUrls: ['./hero-search.component.scss'],
   providers: [HeroSearchService],

diff --git a/src/app/features/dashboard/views/ly-hero-search/ly-hero-search.component.html b/src/app/features/dashboard/views/ly-hero-search/ly-hero-search.component.html
@@ -3,14 +3,10 @@
   <input #searchBox id="search-box" (input)="search(searchBox.value)" />
 
   <ul class="search-result">
-    @if (heroes) {
-      @for (hero of heroes; track hero) {
-        <li>
-          <a routerLink="/detail/{{ hero.id }}">
-            {{ hero.name }}
-          </a>
-        </li>
-      }
+    @for (hero of heroes(); track hero.id) {
+      <li>
+        <a routerLink="/detail/{{ hero.id }}">{{ hero.name }}</a>
+      </li>
     }
   </ul>
 </div>
diff --git a/src/app/features/dashboard/views/ly-hero-search/ly-hero-search.component.ts b/src/app/features/dashboard/views/ly-hero-search/ly-hero-search.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Output, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { Hero } from '../../../../domain/hero';
 
@@ -10,7 +10,7 @@ import { Hero } from '../../../../domain/hero';
   styleUrls: ['./ly-hero-search.component.scss'],
 })
 export class LyHeroSearchComponent {
-  @Input() heroes: Hero[] = [];
+  heroes = input.required<Hero[]>();
   @Output() heroSearched = new EventEmitter<string>();
 
   search(name: string): void {