CODEWITHSUNDEEP
angular
di99er
di99er

Reputation: 73

Angular2 : ContentChildren+QueryList error

I want use @ContentChildren in Angular2 to navigate in a wizard. But when i use it, i have this error : "zone.js?fad3:158 Uncaught Error: Can't construct a query for the property "steps" of "ExtendedWizard" since the query selector wasn't defined."

wizard.component.ts

import { Component, ContentChildren, QueryList } from '@angular/core';

@Component({
    selector: 'extended-wizard',
    template: `
            <ul>
                <li *ngFor="let step of steps">
                    {{step.title}}
                </li>
            </ul>
            <ng-content></ng-content>
    `
})
export class ExtendedWizard {
    @ContentChildren(ExtendedStep) steps: QueryList<ExtendedStep>;
}

@Component({
    selector: 'extended-step',
    template: `
        <fieldset>
            {{title}}
            <ng-content></ng-content>
        </fieldset>
    `
})
export class ExtendedStep {
    title: string;
}

app.component.html

<extended-wizard>
    <extended-step title="Step 1"></extended-step>
    <extended-step title="Step 2"></extended-step>
</extended-wizard>

Thanks for your help

Upvotes: 3

Views: 2547

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

You need to move the class declaration export class ExtendedStep above it's first use, otherwise it will not be recognized. (only if you have several classes in the same file).

If you move 

export class ExtendedStep {
    title: string;
}

just below the imports, it should work.

Upvotes: 3

Related Questions