Can't combine static element and in Angular for getting ElementRef

Asked Aug 14 '21 at 13:27

Active Aug 17 '21 at 07:14

Viewed 99 times

I tried to get index of child component in ParentComponent. My structure of ParentComponent was

<mat-toolbar>
  <ng-container #buttonContainer>
    <chameleon-ng-button [config]="buttonAdd"></chameleon-ng-button>
  </ng-container>
</mat-toolbar>

<ng-template #tmpButton let-config>
  <chameleon-ng-button [config]="config"></chameleon-ng-button>
</ng-template>

I init buttonContainer like this

@ViewChild('buttonContainer', { read: ViewContainerRef, static: true })
protected buttonContainer: ViewContainerRef;

With this, I hope I could have default component (buttonAdd) and could load other button dynamicly using

const buttonTmp = this.tmpButton.createEmbeddedView({
   $implicit: config,
});

this.buttonContainer.insert(buttonTmp);

After seeks for a while, I still doesn't understand why I couldn't get index of my ButtonAdd by this way this.buttonContainer.length

I got empty array instead of 1. Any answer will be appreciate :)

edited Aug 17 '21 at 07:14

asked Aug 14 '21 at 13:27

Malvin Patrick

How do you initialize `buttonContainer` in your typescript?? – Get Off My Lawn Aug 14 '21 at 14:47
Try using a div instead of ng-template for your button container – Mir entafaz Ali Aug 14 '21 at 17:46
Yes, I have initialize button Container in my component.ts @ViewChild('buttonContainer', { read: ViewContainerRef, static: true }) protected buttonContainer: ViewContainerRef; – Malvin Patrick Aug 17 '21 at 07:13

Can't combine static element and in Angular for getting ElementRef

0 Answers0