CODEWITHSUNDEEP
htmlangulartypescriptdomdom-manipulation
YulePale
YulePale

Reputation: 7706

Angular: How can I remove wrapper (parent element) without removing the child?

I have seen this answer but it answers for jquery and not angular/typescript.

My question is similar to this question, but my question is seeking a solution for angular.

How can I remove wrapper (parent element) without removing the child in Angular using typescript or scss? (If it is possible by both kindly show both methods).

For example how to programatically manupulate the dom below from

<div class="wrapper">
  <span>This is It!</span>
</div>

<div class="button">Remove wrapper</div>

to: (After clicking on the button I would like to have the dom iook like below)

<span>This is It!</span>

<div class="button">Remove wrapper</div>

EDIT: Kindly also show how to set it so that it can add the wrapper div back when I click the button again. Basically toggling the wrapper div.

Upvotes: 1

Views: 3126

Answers (1)

Eliseo
Eliseo

Reputation: 57939

I think you can simulate using ng-template and two divs, some like

<div *ngIf="toogle" class="wrapper">
    <ng-content *ngTemplateOutlet="template"></ng-content>
</div>

<ng-content *ngTemplateOutlet="!toogle?template:null"></ng-content>

<ng-template #template>
    <hello name="{{ name }}"></hello>
</ng-template>
<button (click)="toogle=!toogle">toogle</button>

See a example in stackblitz

Upvotes: 4

Related Questions