javascript - Generate child components from ngFor in Angular 2 -
is possible create independent child components ngfor iteration in angular 2?
i'm making quiz application structure, 1 quiz component have multiple categories, , 1 category have multiple questions.
angular generate form quiz retrieved rest api, user can navigate , forth between different categories of questions , save partial or submit complete form.
i sketched following pseudo-structure application template:
<html> <form> <category> <question *ngfor="let question of questions" /> <category> <navigate/> </form> </html> quiz component has list of categories , reference active category. category component has input binding reflect active category of quiz. category has list of questions, want encapsulate in distinct component. iterate through list of questions , create question tag.
now problem is, how populate question component each tag according question object creating tag? possible, or should merge question template category?
pass question object question component using input property. let's name input property qobj:
<question *ngfor="let questionobj of questions" [qobj]="questionobj"></question> in question component, declare input property:
import {component, input} '@angular/core'; @component({ selector: 'question', template: `<div>{{qobj.question}}` // i'm assuming has question property }) export class question { @input() qobj:object; }
Comments
Post a Comment