CODEWITHSUNDEEP
angular
Alessandro_Russo
Alessandro_Russo

Reputation: 2231

How to put a component inside the host container of a directive in Angular 2?

I need to put a dynamic component inside the container of a structural directive. When the value of the directive is true I need to hide the content inside the container and put a component, when is false I need to show the container and its content.

This is my html:

 <div *placeholder="false" class="margin-2">here</div>

This is the code inside the directive:

ngOnInit(): any {
    // If the element its hided
    if (this.placeholder) {
        const temp = this.viewContainerRef.createEmbeddedView(this.templateRef);
        const containerFactory = this.componentFactoryResolver.resolveComponentFactory(EntryComponent);
        this.viewContainerRef.createComponent(containerFactory);
    } else {  // If its showed
        this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
}

With this code when it's true I see the element host and a sibling that is the component, but I want that the component is inside the host. How I can do that?

Upvotes: 0

Views: 219

Answers (1)

TemaTre
TemaTre

Reputation: 1424

please use *ngIf. As on this example 

@Component({
selector: 'ng-if-simple',
template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})
export class NgIfSimple {
  show: boolean = true;
}

More info here https://angular.io/api/common/NgIf

Upvotes: 2

Related Questions