Problem showing content below a particular button ? Using Angular 9 and factory resolver

Published

I have a problem that my component is rendered inside a button? Why does it matter? Because the button position is relative and the component is absolute. I need to center popup div (component) inside button to set position relative -> absolute. Check code:

        <button *ngFor="let button of buttons; let i = index"
                class="btn btn-primary position-relative"
                [disabled]="button.disabled"
                [ngClass]="{'disabled-filter filter-active': button.disabled }"
                (click)="createComponent(i)">
            {{ button.component }} 

                <ng-template  ad-host></ng-template> 
        </button>

This is html code:

Check position relative for button.

<ng-template is rendered content ( popup component ) which need to be absolute positioned based on its relative parent.

  public buttons: Ibuttons[] = [
    { name: 'Component 1', component: 'Name', disabled: false, active: false },
    { name: 'Component 2', component: 'Status', disabled: false, active: false },
    { name: 'Component 3', component: 'Type', disabled: false, active: false },
  ]

properties as active and disabled is important if I click on any of buttons but for current situation is maybe not important.

Right now code for create component:

  public createComponent(component: number): void { 
    const currentComponent = this.components[component];
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(currentComponent as any);
    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef: any = viewContainerRef.createComponent(componentFactory);
  }

What is main problem…
When I create component my component is positioned below first button…I wan’t it.

Check image:

enter image description here

You can see three buttons.
I clicked on second button and I want to open component inside second button.. But you can see on photo component is created inside first button. Component name is ‘app-status’

Just let the newly created component open inside my clicked button. This is all problem.
I don’t more ideas how to do it…

Source: Angular Questions

Published
Categorized as angular, css, html, javascript, typescript Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq