Angular parent Component data binding implementation

Here’s a concrete example:

I have an Angular app styled Master Detail. The red-highlighted area in the following image contains a Hero Detail Component, as shown in the blue highlighted area in the following image.

The selectors for these two components can be found in the Element TAB of Chrome Developer Tools:

Specific implementation steps:

App.module. ts import the corresponding Component for app-heroes and app-hero-detail, and declare it in the NgModule:

Define a Hero property in the Hero detail Component, using the @input decorator to tell Angular to bind the value to the Input property when other Components embed it in the Component.

The HTML of the detail Component is unspecial, showing the fields corresponding to the property hero:

(3) The parent Component, i.e. the hero Component that consumes the detail Component, binds the currently selected hero instance in Li to the @input property hero of the detail Component:

<h2>My Heroes</h2>

<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected] ="hero === selectedHero"
    (click) ="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<app-hero-detail [hero] ="selectedHero"></app-hero-detail>
Copy the code

If you remove the @Input decorator from the detail Component,

A compilation error occurs:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: