Angular structural directive: wrap the host element with some another component

Question

I have simplest Angular structural directive:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[hello]' }) export class HelloDirective { constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { this.viewContainer.createEmbeddedView(this.templateRef); } }

I use it this way:

<div *hello>Hello Directive</div>

It shows me "Hello Directive" message as expected. Now I want to change the content by wrapping it with some another component:

<my-component>Hello Directive</my-component>

And I want the directive to do it for me. I know that I can use a Component paradigm and create HelloComponent instead of HelloDirective and use ng-template etc with the template defined by template or templateUrl property on the @Component decorator... But is there an approach that could be used with a Directive paradigm to achieve such a result?

Do you want to transclude directive's contents into component? — yurzui
– yurzui, Commented Nov 18, 2017 at 4:02
@yurzui Yes, and then pass the result into the initial template instead of directive's content. So that it could be interpreted as <div *hello><my-component>Hello Directive</my-component></div> at the end (instead of <div *hello>Hello Directive</div>). — dhilt
– dhilt, Commented Nov 18, 2017 at 4:13
@yurzui It could be fully customized to provide proper behavior. No limitations on my-component implementation in this task. — dhilt
– dhilt, Commented Nov 18, 2017 at 4:28

Reza · Accepted Answer · 2020-07-17 02:10:34Z

You can create component dynamically and pass projectable nodes to it. So it could look like

@Directive({ selector: '[hello]' }) export class HelloDirective implements OnInit, DoCheck { templateView: EmbeddedViewRef<any>; constructor( private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef, private resolver: ComponentFactoryResolver) { } ngOnInit() { this.templateView = this.templateRef.createEmbeddedView({}); const compFactory = this.resolver.resolveComponentFactory(MyComponent); this.viewContainer.createComponent( compFactory, null, this.viewContainer.injector, [this.templateView.rootNodes]) } ngDoCheck(): void { if (this.templateView) { this.templateView.detectChanges(); } } }

You have to add MyComponent to entryComponents array of your @NgModule

Complete example can be found on Stackblitz

Collectives™ on Stack Overflow

Angular structural directive: wrap the host element with some another component

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related