Angular: Как удалить обертку (родительский элемент), не удаляя дочерний элемент?

Question

Я видел этот ответ , но он отвечает за jquery, а не angular / typcript.

Мой вопрос похож на этот вопрос , но мой вопрос ищетрешение для angular.

Как я могу удалить обертку (родительский элемент), не удаляя дочерний элемент в Angular, используя машинопись или scss?(Если это возможно обоими способами, пожалуйста, покажите оба метода).

Например, как программно манипулировать домом ниже от

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

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

до: (После нажатия на кнопку я хотел быДоминик, как показано ниже)

<span>This is It!</span>

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

РЕДАКТИРОВАТЬ : Пожалуйста, также покажите, как установить его, чтобы он мог добавить div обертки обратно, когда я снова нажму кнопку.В основном переключение обертки div.

Answer 1

Я думаю, что вы можете смоделировать, используя ng-template и два div, например,

<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>

См. пример в stackblitz