Can an angular attribute directive replace parent and child elements?

Question

This is what I mean. Can i create one directive that will replace the 'parent-stylings' and 'child-stylings' below

<div class="parent-stylings">
    <div class="child-stylings"></div>
</div>

into something like this

<div #myCustomDirective></div>

To manipulate the DOM like you want you need to create a directive and use the renderer2. [checkthis](https://alligator.io/angular/using-renderer2/). but still I think that you need to use your code.. [someInfoAboutNgTemplate](https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/) — noririco, Oct 07 '19 at 12:53

score 1 · Accepted Answer · answered Oct 07 '19 at 12:58

1

Yes, you just have to change the selector of a component. It's that easy.

@Component({
  selector: '[myCustomDirective]',
  template: `
<div class="parent-stylings">
    <div class="child-stylings"></div>
</div>`
}) export class MyComponent {}

See it working live !

answered Oct 07 '19 at 12:58

I was actually looking for how to reuse a component using ng-content( I now know)... but I did not know how to word my question. But your answer answers my question the way it is asked. Thanks. – YulePale Oct 07 '19 at 21:27
Component and Directives are different in Angular perpective... – Mehmet_ Apr 25 '20 at 05:07

Can an angular attribute directive replace parent and child elements?

1 Answers1