0

I have followed this solution, to create dynamic component inside leaflet popup. I can able to render my component. But when I try to use *ngFor getting following error enter image description here

My parent component code to render popup

let popup = L.popup();
        this.zone.run(() => {
            if (this.componentRef) {
                this.componentRef.destroy();
            }
            const compFactory = this.resolver.resolveComponentFactory(
                LeafletPopupComponent
            );
            this.componentRef = compFactory.create(this.injector);
            if (this.appRef["attachView"]) {
                // since 2.3.0
                this.appRef["attachView"](this.componentRef.hostView);
                this.componentRef.onDestroy(() => {
                    this.appRef["detachView"](this.componentRef.hostView);
                });
            } else {
                this.appRef["registerChangeDetector"](
                    this.componentRef.changeDetectorRef
                );
                this.componentRef.onDestroy(() => {
                    this.appRef["unregisterChangeDetector"](
                        this.componentRef.changeDetectorRef
                    );
                });
            }
            this.componentRef.instance.parent_text = "msg from parent";
            this.componentRef.instance.items = [
                "workstation 1",
                "workstation 2"
            ];
            let div = document.createElement("div");
            div.appendChild(this.componentRef.location.nativeElement);
            popup.setContent(div);
        });
        this.markerObj.bindPopup(popup).addTo(this.map);

dynamic component html code

<div class="container">
    <h5>Step 1</h5>
    <span>Name the selected type of workstation</span>
    {{ parent_text }}
    <div class="form-group w-100" *ngIf="items?.length">
        <select class="form-control">
            <option value="">Select</option>
            <option *ngFor="let item of items" [value]="item">
                {{item}}
            </option>
        </select>
    </div>
    <h5>Step 2</h5>
    <a> Mark Area <i class="fa fa-pencil"></i></a>
</div>

dynamic component ts file

export class LeafletPopupComponent{
    @Input() items;
    @Input() parent_text: string;
    constructor() {}
}

Note I can successfully render parent_text message from parent component. Please help on this.

Community
  • 1
  • 1
Sankar
  • 21
  • 1
  • 3

1 Answers1

0

Please ensure that the module the component belongs to imports CommonModule. And then try to debug it via json pipe.

<div class="container">
    <h5>Step 1</h5>
    <span>Name the selected type of workstation</span>
    {{ items | json }} <!-- <- add this -->
    {{ parent_text }}
</div>
satanTime
  • 12,631
  • 1
  • 25
  • 73
  • Hi @satanTime. if I comment out my ngFor code and check for `{{items | json }}` I can able to see array of data. So i think my view rendered before child component receives data form parent . how to fix this issue ? – Sankar Jun 03 '20 at 07:35
  • Aha, that's good, do you get `["workstation 1", "workstation 2"]`? Might you verify that the `CommonModule` was imported in the related module? – satanTime Jun 03 '20 at 07:38
  • Yes i have imported my dynamic component and commonModule in app.module.ts and I have added my dynamic component in both places declarations and entryComponent . level. – Sankar Jun 03 '20 at 07:50