Master-Slave structure of ANGULAR2 primary article

The previous article explains how to build a foundation project. If you do not know, please read the previous article, here do not repeat.

First look at the directory structure:

Below we will write a list of the basics to display.

1. Create an array of heroes in App.component.ts:

Export class Hero {//Hero entity class
Id:number;
name:string;
}

Const heroes:hero[] = [//hero array
  {id:11, name: ' Mr Nice '},
  {id:12, Name: ' Narco '},
  {id:13, name: ' Bomba Sto '},
  {id:14, Name: ' Celeritas '},
  {id:15, Name: ' Magneta '},
  {id:16, Name: ' Rubberman '},
  {ID: *, Name: ' Dynama '},
  {id:18, name: ' Dr IQ '},
  {id:19, Name: ' Magma '},
  {id:20, Name: ' Tornado '}
  ];

The above code is placed behind the import code.

2. Modify the app.component.ts to expose the hero array for binding:

Export class AppComponent {
    title = "Heroic Journey";
    Heroes = heroes;//Assign to heros and expose heros to bind
}

3, binding heros to the interface:

1) Modify App.component.ts

@Component ({
    moduleId:module.id,
    selector: ' My-app ',
    templateurl: ' app.component.html ',
    Styleurls: ['../assets/css/app.component.css ']
})

2), create app.component.html and modify

 
4. Create click-to-list click events and bind to the interface:


1), modify App.component.ts under appcomponent{...}

To create a custom variable and click event:


selectedhero:hero;//Custom variable-hero
onSelect (Hero:hero): void {//click event
  this.selectedhero = Hero;
}
2), modify app.component.html

<li *ngfor= "Let Hero of Heroes" (click) = "OnSelect (Hero)" >
  <span class= "badge" >{{hero.id}}</span > {{hero.name}}
</li>
 
Event binding detailed COPY CODE

(click) = "OnSelect (Hero)"
 
Parenthesis identifies the Click event on the <li> element as the target of the binding. The expression to the right of the equal sign calls Appcomponent's Onselect () method and passes in the template input variable hero as a parameter. It is the hero variable that we defined earlier in the ngfor.

5. Bind the selected hero to the interface:


<div *ngif= "Selectedhero" >
  
Remember that the ngif leading asterisk (*) is an important part of the syntax.
Finally, don't forget to add the style:


<li *ngfor= "Let Hero of Heroes"
  [class.selected]= "hero = = = Selectedhero"
  (click) = "OnSelect (Hero)" >
  <span class= "badge" >{{hero.id}}</span> {{hero.name}}
</li>
 

Here is the CSS


. Selected {background-color: #CFD8DC!important;
    Color:white;
      }. Heroes {margin:0 0 2em 0;
      List-style-type:none;
      padding:0;
    Width:15em;
      }. Heroes Li {cursor:pointer;
      position:relative;
      left:0;
      Background-color: #EEE;
      margin:. 5em;
      padding:. 3em 0;
      Height:1.6em;
    border-radius:4px;
      }. Heroes Li.selected:hover {background-color: #BBD8DC!important;
    Color:white;
      }. Heroes Li:hover {color: #607D8B;
      Background-color: #DDD;
    Left:. 1em;
      }. Heroes. text {position:relative;
    Top: -3px;
      }. Heroes. Badge {display:inline-block;
      Font-size:small;
      Color:white;
      Padding:0.8em 0.7em 0 0.7em;
      Background-color: #607D8B;
      Line-height:1em;
      position:relative;
      Left: -1px;
      Top: -4px;
      Height:1.8em;
      Margin-right:. 8em;
 border-radius:4px 0 0 4px;   } 
 

Add it to the appropriate file.


Reference: https://angular.cn/docs/ts/latest/tutorial/toh-pt2.html