I currently have the following line in my HTML:
<p> this is my first line </p>
Using a wrapper directive I want to add a second paragraph and wrap it in a div so it will look like this:
<p wrapper> this is my first line </p>
And then the directive will add the wrapper and second line to make the final HTML look like this:
<div>
<p> this is my first line </p>
<p> this is my second </p>
</div>
From what I understand from angular.io I will need to create a structural directive and use a TemplateRef and a ViewContainerRef, but I can't find an example on how to use them to wrap an existing part of the dom and add a second line.
I'm using Angular 5 in this project.
I made the directive like so:
the templateRef has property called "elementRef" you can throw it access the native dom like this:
So you can get the access to your element like above and use the built in Renderer class providing by angular.
check the below link please
https://angular.io/api/core/Renderer2