Angular Component Constructor Called Twice

Question

I am new to Angular and am running into an issue with the constructor on a child component being called twice, and the second time it is called it is clearing the properties set the first time.

This is the parent component:

@Component({
    selector: 'parent-item',
    templateUrl: '...',
    providers: [ItemService]
})
export class ParentItemComponent {
    public parentItemId;
    public model: ParentItem;

    constructor(itemService: ItemService, elm: ElementRef) {
        this.parentItemId = elm.nativeElement.getAttribute('parentItemId'); 
        itemService.getParentItem(this.parentItemId).subscribe(data => this.model = data);
    }
}

And in the template the child component is referenced:

<child-items [parentItemId]="parentItemId">Loading...</<child-items>

This is the child component:

@Component({
    selector: 'child-items',
    templateUrl: '...',
    providers: [ItemService]
})
export class ChildItemsComponent {
    @Input() public parentItemId: number;
    public items: Observable<ChildItem[]>;

    constructor(private itemService: ItemService) {
        console.log("constructor");
    }

    ngOnInit() {
        if (this.parentItemId) {
            this.items = this.itemService.getChildItems(this.parentItemId);
        }  
        else {
            console.log("Parent Id not set!");
        }
    }
}

And finally the child component template:

<tr *ngFor="let item of items | async">
    <td>...</td>
</tr>

The child components constructor is being called twice, and the second time it is called the parentItemId is set to null and the items property is cleared. If I hardcode the parentId instead of using the input the data is being properly received and displayed in the template, but using the input value the template shows no results.

I have created a plunker which shows the same behavior here: http://embed.plnkr.co/xaJtfNgbWCUPap2RCJUA/

`Loading...` is the `<` intentionally done that way? – smnbbrv Nov 21 '16 at 22:13 — smnbbrv, Nov 21 '16 at 22:13

score 10 · Accepted Answer · answered Nov 21 '16 at 22:13

10

Your problem is that in the app.module you bootstrap both parent and child component:

bootstrap:    [ ParentItemComponent, ChildItemsComponent ]

It has to be

  bootstrap:    [ ParentItemComponent]

answered Nov 21 '16 at 22:13

Yakov Fain

11,972
5
33
38

4

I used `platformBrowserDynamic().bootstrapModule(AppModule)` in both `main.ts` and `app.module.ts`. Removing the line from `app.module.ts` made it work in my case. – John Dec 31 '18 at 09:05

score 3 · Answer 2 · answered Jul 19 '18 at 12:08

3

child-items is not closed properly. Probably because of this error

This

<child-items [parentItemId]="parentItemId">Loading...</<child-items>

should be:

<child-items [parentItemId]="parentItemId">Loading...</child-items>

answered Jul 19 '18 at 12:08

Zameer Ansari

28,977
24
140
219

Angular Component Constructor Called Twice

2 Answers2