CODEWITHSUNDEEP
angularbootstrap-modalbootstrap-4angular5
sreeraj
sreeraj

Reputation: 61

How to show a bootstrap modal popup in angular 5 when clicking a button in different component and bind a data in modal popup

I have two component , in one component i have a button and in other component i have a popup which is bootstrap modal popup. i need to popup this modal popup and bind a data in that popup when click on this button. can you guys show me a example or sample project how to show popup and data transfer between two components.

<div id="parentdiv">            
            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" (click)="submit()">Submit</button> 
     <popup></popup>
</div>

  ngOnInit(){    
    this.commservice.attachSubscribers(['popupevent']);     
     this.commservice.getSubscriber('popupevent').subscribe((data) => {
       this.rolesList = data; 
       const modalRef = this.modalservice.open(guidanceComponent);
       modalRef.componentInstance.data = this.rolesList;
     })      
  }

Upvotes: 0

Views: 8953

Answers (3)

Elham Dabiri
Elham Dabiri

Reputation: 415

I hope this code helps you :

ParentComponent.html:

<div id="parentdiv">            
   <button type="button"  (click)="addEditHandler($event)"> Submit </button> 
     <popup *ngIf="showModal" (OnCloseModal)="closeModal()" 
     [getModelId]="modelDataItem" > 
     </popup>
</div>

parentComponent.ts:

     public showModal: boolean = false;
        public modelDataItem: any = {};
    
        // Send Id for New or Edit ------------------------
   public addEditHandler({ dataItem }) {
     this.modelDataItem=(typeof dataItem=="undefined") ? {Id: 0} : {Id: dataItem.Id };
     this.showModal = true;
         }
     // Close Modal ---------------------------------
      closeModal() {
        this.showModal = false;
      }

popup Component.html:

    <div class="modal" id="myModal">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body p-0">
                 <button mat-button  (click)="onCancel()"> close Modal</button>
                   //your code ...
                </div>
            </div>
        </div>
    </div>

popup Component.ts

// Get data From Parent ----------------------------------
      @Input() public set getModelId(_model: any) {
        if (_model != undefined) {
          //get data ...........
        }
      }

 // Close Modal ----------------------------------
   @Output() public OnCloseModal: EventEmitter<any> = new EventEmitter();
   onCancel() {
     this.OnCloseModal.emit(true);
   }

Upvotes: 0

Akshay Kapoor
Akshay Kapoor

Reputation: 183

steps :

  1. Make your pop up a seperate parent component.

  2. use output component to track the child click event and fire parent method to open pop up using event emitter. Also you can send data using output event.

Upvotes: 0

alt255
alt255

Reputation: 3576

In your parent component

@ViewChild(Popup) popup: Popup;
click() {
  this.popup.showModal(newData)
}

your child component 

showModal(newData) {
this.oldData = newData;
//code to show modal etc
}

You can find more help at: https://alligator.io/angular/viewchild-access-component/

Upvotes: 0

Related Questions