Angular 4: Child component rendered twice

Question

I'm learning Angular 4 following and adapting the Angular heroes tutorial and I have a problem when rendering a child component.

The child component (QvSummaryComponent) should display two properties (code and versionNumber) of the model (QvSetup) loaded by the parent child (QvSetupComponent).

app.module.ts:

@NgModule({
imports: [BrowserModule],
declarations: [
    QvSetupComponent,
    QvSummaryComponent,
    QvOtherChildComponent],
bootstrap: [
    QvSetupComponent,
    QvSummaryComponent,
    QvOtherChildComponent]
})

setup.model.ts:

export class QvSetup {
    code: string;
    versionNumber: number;
}

setup.component.ts (parent component):

export class QvSetupComponent implements OnInit {
    private qvSetup: QvSetup;

    constructor(private readonly qvSetupService: QvSetupService) { }

    ngOnInit() {
        this.loadQvSetup();
    }

    loadQvSetup(): void {
        // Hardcoded for the moment. It will come from the service later.
        this.qvSetup = new QvSetup();
        this.qvSetup.code = "MYCODE";
        this.qvSetup.versionNumber = 1;

        // Debug message (to remove)
        console.info("QvSetupComponent: loaded " + this.qvSetup.code + "-" + this.qvSetup.versionNumber);
    }
}

setup.component.html:

<h1>Setup <small>{{qvSetup.code}}{{qvSetup.versionNumber}}</small></h1>
<qvSummary
    [code]="qvSetup.code"
    [versionNumber]="qvSetup.versionNumber">
    Loading summary...
</qvSummary>
<qvOtherChildComponent>
    Loading other child component...
</qvOtherChildComponent>

qvSummary.component.ts:

export class QvSummaryComponent implements OnInit {
    @Input() code: string;
    @Input() versionNumber: number;
    private qvSummary: QvSummary;

    constructor() {
        this.qvSummary = new QvSummary();
    }

    ngOnInit() {
        if (this.code != null) {
            console.info("QvSummaryComponent: Code-VersionNumber = " + this.code + "-" + this.versionNumber);
        } else {
            console.info("QvSummaryComponent: Code-VersionNumber = null");
        }
    }
}

qvSummary.component.html:

{{qvSetup.code}}-{{qvSetup.versionNumber}}

When I execute my script, I can see in the console:

QvSetupComponent: qvSetup loaded MYCODE-1
QvSummaryComponent: code-versionNumber = MYCODE-1
QvSummaryComponent: code-versionNumber = null

It seems that it is rendering twice the child component. What I'm doing wrong?

possible duplicate of https://stackoverflow.com/questions/38787795/why-ngoninit-called-twice — Benjamin Schäublin, Feb 05 '18 at 12:04
Possible duplicate of [why ngOnInit called twice?](https://stackoverflow.com/questions/38787795/why-ngoninit-called-twice) — Daniel B, Feb 05 '18 at 12:09
It's likely that dupe question applies here. It explains that this may happen with malformed template and here is broken ` — Estus Flask, Feb 05 '18 at 12:13
Thanks for your help. I'm trying to simplify my code to identify the issue. @estus I fixed the h1 tag in my question. Thanks for notification. — C0b0ll, Feb 05 '18 at 12:40

score 0 · Accepted Answer · answered Feb 05 '18 at 14:09

The problem comes from the app.model.ts. The QvSummaryComponent should not be in the bootstrap list.

The new app.module.ts:

@NgModule({
    imports: [BrowserModule],
    declarations: [
        QvSetupComponent,
        QvSummaryComponent,
        QvOtherChildComponent],
    bootstrap: [QvSetupComponent]
})

Angular 4: Child component rendered twice

1 Answers1