Angular2.js--master-slave structure

Learn the content of this article and return to our Fast-start Application.

Master-slave structure, We want to make a list of heroes, we want the user to select a hero in the list, and then the selected hero appears in the details VIEW. The main view is a list of heroes, from which the details of the selected hero are Chosen.

1. Create a Hero

Let's start by creating an array that is considered a hero:

To modify the app.component.ts file:

Import {Component} from '@angular/core';//Creating the Hero classExportclasshero{id:number; Name:string;}Constheroes:hero[]=[{id:1, name:'A'}, {id:2, name:'B'}, {id:3, name:'C'}, {id:4, name:'D'}, {id:5, name:'E'}, {id:6, name:'F'}, {id:7, name:'G'}, {id:8, name:'H'}, {id:9, name:'I'}, {id:Ten, name:'J'}]; @Component ({selector:'My-app', Template: '    `}) ExportclassAppComponent1 {}

Heroes is an array of instances of the hero class.

2. Exposing Heroes

Create a property in App.component.ts for calling

class AppComponent1 {    Heroes= heroes;}

3. Show Heroes in templates

With the heroes attribute in our component, we can create an unordered list of heroes in the template

App.component.ts

class="Heroes">        <li *ngfor="letHero of Heroes  ">            class="badge">{{hero.id}}</span>{{ hero.name}}        </li>    </ul>

So we see a list of heroes on the Page.

4. Add Style

Create a style.css file and introduce it in index.html

. heroes{margin:000; list-style:none;padding:0; width:200px;}. Heroes Li{cursor:pointer;background: #eee; margin:5px;padding:3px 5px;}. Heroes Li.selected:hover{background: #bbd8dc; color: #fff;}. Heroes Li:hover{color: #607d8b; background: #ddd;}. Heroes. badge{    Font-size:16px;    Color: #fff;    Display:inline-block;    padding:5px;    Background: #607d8b;    width:15px;    Text-align:center;    Margin:000;}

We need to click on a hero in the list to display its details at the bottom, when we need to click on the Event.

5. Click events

<ul class= "heroes" >        <li *ngfor= "let hero of heroes" (click) = "onSelect (hero)" >            <span class= " Badge ">{{hero.id}}</span>{{hero.name}}        </li>        <!--parenthesis identification <li> The Click event on the element is the target of the binding, The expression to the right of the equal sign calls Appcomponent's Onselect method and passes the template variable hero as a parameter-    </ul>

6. Adding event handlers

Our event binds the onselect method, and we are going to add it to the Component.

Export class AppComponent1 {    heroes= heroes;    selectedhero:hero;    OnSelect (hero:hero):void{    this. selectedhero=hero;}} 

7. Display the selected heroes in the template

<div *ngif= "selectedhero" >        
When elected, Selectedhero becomes the true value, adding the hero details to the DOM.
Now the basic effect is realized
We want to select a hero and then have a background color change that highlights it.
Add in App.component.ts:
<ul class= "heroes" >        <li *ngfor= "let hero of heroes" (click) = "onSelect (hero)" [class.selected]=] hero=== Selectedhero ">            <span class=" badge ">{{hero.id}}</span>{{hero.name}}        </li>        < The Click event on the!--parenthesis identification <li> element is the target of the binding, the expression to the right of the equal sign calls the Onselect method of appcomponent and passes the template variable hero as a parameter-    </ul>
We add a property binding for the selected class on class, and we set the value of the binding to the comparison of Selectedhero and Hero.
When Hero===selectedhero is selected, the selected class is added
Add in CSS
. Heroes Li.selected{background: #666; color: #fff;}
When this is clicked, the chosen hero has a background color change with the other Heroes.
Reference: https://angular.cn/docs/ts/latest/tutorial/toh-pt2.html
Angular2.js--master-slave structure