angular 5 - how to remove dynamically added components from the dom

Question

I'm a beginner in Angular 5, and I'm having the following problem in my project:

I have a modal which is always present on the body (hidden when not active), and I'm generating the modal's contents dynamically in the modal component.

The problem is that after closing the modal, and trying to destroy the content, the content is not removed from the dom, and opening the modal again just appends the content to the modal which now contains several elements of the content.

So far, I've tried doing it in several ways, including using *ngTemplateOutlet with a template, and also by having a custom directive on the container I want to place the content in, and using viewContainerRef and componentFactoryResolver to create the content component dynamically as can be seen here:
Dynamically ADDING and REMOVING Components in Angular.

Here is my modal component's template (All of the code here refers to the 2nd method):

<div class="modal-backdrop show" (click)="hideModal()"></div>
 <div class="modal-dialog show">
  <div class="modal-content">
   <ng-container content></ng-container>
   <button type="button" class="close" data-dismiss="modal" 
     (click)="hideModal()">&times;</button>
  </div>
 </div>

Here is the content directive, the creation of the component is done here:

@Directive({
  selector: '[content]'
 })
export class ContentDirective {
  constructor(
    public viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

createModalContent(content: { new (): Component }): ComponentRef<{}> {
  const sample = this.viewContainerRef;
  this.viewContainerRef.clear();
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
  content);
  const componentRef = this.viewContainerRef.createComponent(componentFactory);
  return componentRef;
 } 
}

Here is the modal component ts code, trying to destroy the component is in the hideModal method:

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
  entryComponents: [SuggestSkillComponent]
})

export class ModalComponent implements OnInit {

newComponent: ComponentRef<{}>;
@Input() opened: boolean;
@Input() modalType: string;
@ViewChild(ContentDirective) content: ContentDirective;
modalState: string;
subscription: any;

constructor(private modalService: ModalService) {}

hideModal() {
  this.modalService.closeModal();
  this.newComponent.destroy();
}

ngOnInit() {
   this.subscription = this.modalService.getModalState()
   .subscribe(([modalState, modalContent]) => {
    if (modalState === 'shown') {
      this.newComponent = this.content.createModalContent(modalContent);
    }
  });
 }
}

The modal is opened through a different component using a modal service method, which recieves the type of component for the content as parameter:

 openModal(content: any) {
  this.modalOpened = true;
  this.modalState = 'shown';
  this.emitter.emit([this.modalState, content]);
 }

In all ways I've tried so far, I can't get the component I created for the modal's content destroyed after the user is finished with it. Obviously, I'm missing something...
Any help will be greatly appreciated.

Thanks!

score 3 · Answer 1 · answered Jan 10 '18 at 07:04

You can call this.viewContainerRef.detach to remove the content(ViewRef) from your container and keep a reference to is for later. This will eventually be destroyed. If you are not interested in keeping a reference to it just call this.viewContainerRef.clear()

angular 5 - how to remove dynamically added components from the dom

1 Answers1