Passing modal form data to another component not working in Angular

Question

I have a modal (popup) and there is a form in that. When user fills that form and hit the Add button, I want to pass that form values to the component where is it showing.(result)

I tried it as below but it doesn't executing the this.modalRef.content.onClose.subscribe method. Can someone point out the issue here?

myComponent.ts

modalRef?: BsModalRef | null;
constructor(private modalService: BsModalService) { }

addItem(): void{
      const initialState = {
            backdrop: true,
            ignoreBackdropClick: true,
            class: 'modal-xl',
          };

          this.modalRef = this.modalService.show(ItemProfileComponent, { ...initialState, backdrop: true, ignoreBackdropClick: true, class: 'modal-lg', });
          this.modalRef.content.onClose.subscribe((result: any) => {
            console.log(result); 
            if (result) {
              this.itemtList.push(result);
              this.itemAdd.emit(this.itemtList);
            }
          });

  }

ItemProfileComponent.ts (Modal Component)

public onClose: Subject<any> | undefined;
constructor(private bsModalRef: BsModalRef) {}

  ngOnInit(): void {
    this.onClose = new Subject();
  }
     close(): void {
      this.bsModalRef?.hide();
    }

ItemProfileComponent.html

<div class="modal-header">
    <h4 class="modal-title pull-left fw-bold" id="my-modal-title">Add New<span *ngIf="isItem"> Item</span></h4>
    <button role="button" class="btn-close close pull-right" aria-label="Close" (click)="close()">
        <span aria-hidden="true" class="visually-hidden">&times;</span>
    </button>
</div>
    
    <div class="p-2">
        <div class=" p-2">
     <!--Form-->
        <div *ngIf="!isCompany">
            <app-contact-profile [isContactHeader] = "false" [contactData] = "agentContactList" (saveContact) = "addAgentContact($event)"></app-contact-profile>
        </div>
    </div>
</div>

It's always be a good idea to share working sandbox link so other can understand it fully and give you appropriate solution with assuming anything — UniCoder
– UniCoder, Commented Feb 17, 2022 at 5:20

Chris Hamilton · Accepted Answer · 2022-02-17 04:57:43Z

1

You forgot to call next(), pass your form data as a parameter. You should also call complete() to unsubscribe all subscriptions.

close(): void {
   this.onClose.next(formData);
   this.onClose.complete();
   this.bsModalRef?.hide();
}

That's assuming you want to send the data on every close, you may want a separate function for when the user just wants to cancel. ie. a submit() and a close().

answered Feb 17, 2022 at 4:57

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing modal form data to another component not working in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related