| 62 | |
| 63 | // This Angular component will be "downgraded" to be used in AngularJS. |
| 64 | @Component({ |
| 65 | selector: 'ng2-heroes', |
| 66 | // This template uses the "upgraded" `ng1-hero` component |
| 67 | // (Note that because its element is compiled by Angular we must use camelCased attribute names.) |
| 68 | template: ` |
| 69 | <div class="ng2-heroes"> |
| 70 | <header><ng-content selector="h1"></ng-content></header> |
| 71 | <ng-content selector=".extra"></ng-content> |
| 72 | <div *ngFor="let hero of this.heroesService.heroes"> |
| 73 | <ng1-hero [hero]="hero" (onRemove)="onRemoveHero(hero)"> |
| 74 | <strong>Super Hero</strong> |
| 75 | </ng1-hero> |
| 76 | </div> |
| 77 | <button (click)="onAddHero()">Add Hero</button> |
| 78 | </div> |
| 79 | `, |
| 80 | standalone: false, |
| 81 | }) |
| 82 | class Ng2HeroesComponent { |
| 83 | addHero = output<Hero>(); |
| 84 | removeHero = output<Hero>(); |
| 85 | |
| 86 | constructor( |
| 87 | @Inject('$rootScope') private $rootScope: ng.IRootScopeService, |
| 88 | public heroesService: HeroesService, |
| 89 | ) {} |
| 90 | |
| 91 | onAddHero() { |
| 92 | const newHero = this.heroesService.addHero(); |
| 93 | this.addHero.emit(newHero); |
| 94 | |
| 95 | // When a new instance of an "upgraded" component - such as `ng1Hero` - is created, we want to |
| 96 | // run a `$digest` to initialize its bindings. Here, the component will be created by `ngFor` |
| 97 | // asynchronously, thus we have to schedule the `$digest` to also happen asynchronously. |
| 98 | this.$rootScope.$applyAsync(); |
| 99 | } |
| 100 | |
| 101 | onRemoveHero(hero: Hero) { |
| 102 | this.heroesService.removeHero(hero); |
| 103 | this.removeHero.emit(hero); |
| 104 | } |
| 105 | } |
| 106 | |
| 107 | // This Angular directive will act as an interface to the "upgraded" AngularJS component. |
| 108 | @Directive({ |