CODEWITHSUNDEEP
angular
Antediluvian
Antediluvian

Reputation: 713

access my component's child, rebuild it and put it back

For any div or h1 or whatever within my own component like the following:

<app-my-comp>
    <div>original div</div>
</app-my-comp>

I would like to transform it to the following on rendering:

<div class="..." someAttribute="someValue">
   <div>original div</div>
   <div>a new div generated by my component</div>
   <div>another new div generated by my component</div>
</div>

How can I achieve this? I have absolutely no ideas at all so I don't even know how to google.

Upvotes: 0

Views: 45

Answers (2)

Geraint Anderson
Geraint Anderson

Reputation: 3393

Use ng-content to display the original content. Your template will look like this:

<div class="some-class" someAttribute="someValue">
  <ng-content></ng-content>
  <div>a new div generated by my component</div>
  <div>another new div generated by my component</div>
</div>

Here's a working example: https://stackblitz.com/edit/angular-ng-content-57868654

Upvotes: 1

Arne
Arne

Reputation: 842

That goes way beyond the use case of angular. For angular you'd just provide the "original div" as an @input. If you really want to achieve this with any tag you provide in your own custom component, you're going to have to work with @ViewChilds and the afterViewInit lifecycle where you use the Renderer2 to manipulate your DOM manually.

Upvotes: 0

Related Questions