Recently embarking on a new project, I decided to dive into Angular 2. Coming from a background in Backbone development, I find myself encountering unfamiliar challenges.
The goal is to create a simple app where there is a classroom object with a list of students. Each component (classroom and student) should have its own template for better organization.
I envision the templates being completely separated, with the classroom template iterating through the students and rendering the student template.
For example, the structure would look like this:
@Component({
selector : 'classroom',
templateUrl : 'app/classroom.component.html',
directives : [Classroom]
})
export class MainContainer implements OnInit {
students : Student[]; // assuming an array of students here
constructor() {}
}
The Classroom template:
<div>
<student *ngFor="let student of students"></student>
</div>
The Student component:
@Component({
selector : 'student',
templateUrl : 'build/component/main-box/student.component.html'
})
export class Student {
name : string;
id: number;
grade:number;
constructor() {
}
};
The student template:
<div>
name : {{name}}
id : {{id}}
grade : {{grade}}
</div>
However, when implementing the code above, no data shows up. It appears that the student data is not being passed correctly to the student object. I've seen examples passing the entire object down like this:
[student]="student"
But it doesn't feel right. In my experience with Backbone, I would render the parent view and then append the child views inside it. This approach feels strange to me.
Another suggestion I came across was simply adding the student template to the classroom template instead of keeping them in separate files. Personally, I strongly disagree with this practice as I believe each component should have its own file.
Additionally, what does @Input() signify? I couldn't quite grasp from the documentation why @Input() grants access to data.
At this juncture, I find myself more confused than clear-headed. Any tips, feedback, or best practices for tackling these tasks are greatly appreciated!
Thank you!