To start with Angular2, you will have to follow the guidelines given at the below location, I followed the same:
https://angular.io/docs/ts/latest/quickstart.html
I have created a small demo of People management application here.
The application has basic app component inside which we have imported components – header, member edit and member details. So assuming that the components are created in their respective typescript file. we will have following lines at the top of our app.component.ts file.
import { Component } from ‘@angular/core’;
import {SocMem} from ‘./member’;
import {MemberDetailsComponent} from ‘./member-details.component’;
import {Header} from ‘./header.component’;
import {MemberEditComponent} from ‘./member-edit.component’;
Above all lines import the components.
Then we will create a class AppComponent.
export class AppComponent {
members= MEMBERS;
selectedMember = MEMBERS[0];
onselect(member){ console.log(member);this.selectedMember = member;}
}
In the class definition we have assigned MEMBER of const type to member property to be usable to display on the grid. Onselect method associated with this class is used to get the selected member from the grid.
Above this class definition we have decorator function for the class which decorates the class by adding the template in the defined selector which takes the following from:
@Component({
selector:[selector in the HTML file],
template:[template to add to the selector]
})
For our application we will have decorator in the following form:
@Component({ /* Component decorator*/
selector: ‘my-app’,
template: `<div class=”container”><app-header [titleapp]=”apptitle”></app-header>
<div class=”row”>
<div class=”col-md-6″>
<table class=”table-bordered table”>
<tr><th>Name</th><th>Flat</th><th>Contact</th></tr>
<tr *ngFor = “let member of members” (click)=”onselect(member)” [class.warning]=”member==selectedMember” >
<td>{{member.name}}</td>
<td>{{member.Flat}}</td>
<td>{{member.contact}}</td>
</tr>
</table>
</div>
<div class=”col-md-6″>
<member-detail [member] = “selectedMember”></member-detail>
<edit-member [member] = “selectedMember”></edit-member>
</div></div></div>`,
directives: [Header,MemberDetailsComponent,MemberEditComponent]
})
In the above code snippet *ngFor is used to iterate over the objects, we used to have ng-repeat in the previous versions. The let keyword inside *ngFor is ES6 feature for scoping the variable.
my-app is the root component inside which we defined different components like header, member details and member edit. We are listing the directives to be included in the root component in the array.
The complete application code is available at the git repository here.