typescript - Angular2 nested components and template hierarchy -

iv'e started new project , decided give angular 2 chance. former backbone developer, facing types of work new me.

i trying build simple app: want have class room object, , within list of students. in point of view, each of them (classroom, student) should different components, such each component has it's own template.

i wish have templates separated, , on classroom template loop through students , render student template.

for instance: classroom component like that: import {component, oninit} '@angular/core'; import {student} 'app/student.component';

@component({   selector      :   'classroom',   templateurl   :   'app/classroom.component.html',   directives    :   [classroom] })  export class maincontainer implements oninit {   students : student[]; // assume have array of students here   constructor() {} } 

the classroom template look:

<div>     <student *ngfor="let student of students"></student> </div> 

the student component:

import {component, input, output} '@angular/core';  @component({   selector      :   'student',   templateurl   :   'build/component/main-box/student.component.html' })  export class student {   name : string;   id: number;   grade:number;   constructor() {   } }; 

and student template, simple as:

<div>       name : {{name}}       id : {{id}}       grade : {{grade}} </div> 

but above code shows me nothing. seems student data not passed student object. iv'e seen examples passed entire object down, way:

[student]="student" 

but it feels wrong. in backbone instance, render parent view, , inside append child views. here feels odd.

another solution iv'e seen add student template classroom template, instead of holding them in separate files. must really don't practice since believe these components should'nt live in same file.

another things, doest @input() stand for? did not understand docs why @input() gives access data.

at point more confused not :] appreciate tips , feedback , learn practices dealling such tasks.

thanks lot!

each instance of <student> tag has associated student object contains data. written, however, student object doesn't data anywhere - sits there empty values. angular not assume want data come from, there sorts of possibilities , doesn't want in way.

so, have tell angular want student objects data from. @input 1 way that. when tag component's member variable @input, telling angular value variable should come same-name property of associated template tag. if don't specify @input, angular not make relation between property , variable.

having done that, need supply said property. example, provide value @input name, put [name]="somename" in <student> tag.

the directive *ngfor="let student of students" not set property. creates variable named student available in tag's scope in template, not automatically used anywhere else, in child templates. snippet [student]="student" assign variable property of same name, student template able use @input variable.

i wrong, don't think adding [student]="student" code work. maybe angular recognize matching name , replace whole component object, don't think so.

what should separate data , component classes. you'd have student data class fields written no annotation, , let's studentdisplay @component annotation , @input member variable of type student. hook variable property, , write student template in terms of variable.