Angular - How to destroy dynamic component?

Question

I have a modal component with this html template:

<div class="modal">
  <div class="modal-body">
    <ng-content></ng-content>
  </div>

  <div class="modal-footer">
    <button (click)="sendMessage()">success</button>
    <button (click)="close()">abort</button>
  </div>
</div>

I have an ng-content where I pass a Component in an open function defined into a service:

export class ModalService {
  dialogComponentRef: ComponentRef<ModalComponent>;
  private subject = new Subject<any>();

  open(content: any, obj: any) {
    const contentComponentFactory = this.cfResolver.resolveComponentFactory(content);
    const modalComponentFactory = this.cfResolver.resolveComponentFactory(ModalComponent);

    const contentComponent = contentComponentFactory.create(this.injector);
    const modalComponent = modalComponentFactory.create(this.injector,[[contentComponent.location.nativeElement]]);

    modalComponent.instance.model = obj;

    this.dialogComponentRef = modalComponent;

    document.body.appendChild(modalComponent.location.nativeElement);

    this.appRef.attachView(contentComponent.hostView);
    this.appRef.attachView(modalComponent.hostView);
  }

  sendMessage() {
    this.subject.next();
  }



  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  close() {
    this.appRef.detachView(this.dialogComponentRef.hostView);
  }

  constructor(
    private appRef: ApplicationRef,
    private cfResolver: ComponentFactoryResolver,
    private injector: Injector
  ) {}
}

I need to use these modals several times. When I close the button I need to destroy the contentComponent. I see that when I subscribe to sendMessage on the click "SUCCESS" button I see that all the components that I opened subscribed to this next function.

Example, I have this situation. In more than one of my contentComponents I have these subscriptions:

this.mySubscription = this.modalService.getMessage().subscribe( () => {
  doing things;
)};

and in the ngOnDestroy I did

this.mySubscription.unsubscribe()

but on the close button nothing happens, I continue subscribing from modal that I just closed. How can I solve this issue?

question from:https://stackoverflow.com/questions/65831634/angular-how-to-destroy-dynamic-component

Answer 1

I think, I have an idea to solve your problem. To destroy contentComponent you just need to write contentComponent.destroy();. However, the thing is how do your ModalService get the information that Modal is closed. For that you can use an EventEmitter like @Output() closeModal: EventEmitter<any> = new EventEmitter<any>();. Finally, you have to subscribe that event like contentComponent.instance.closeModal.subscribe(() => this.removeDynamicComponent(component)); when you open a new modal in your ModalService, and removeDynamicComponent is a method where you will write contentComponent.destroy();.
Here, I have similar type of modal example in StackBlitz : Link
Please Check the code and let me.