Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

297
Views
NG-bootstrap close popover from container

I have a container component (called file-container) with an ngbPopover button. The content of the popover is another component. (It is used to select a file for upload).

<button type="button" 
        class="btn btn-secondary popover-btn" 
        placement="top"
        [ngbPopover]="popContent" 
        popoverTitle="Click to add files - will be a label" 
        container="body" 
        trigger="manual"
        #popover="ngbPopover"
        (click)="populateDropdownList()">
  Click to add files
</button>
<template #popContent>
  <app-file-uploader [maxFiles]="maxFiles"
                      [fileNames]="fileNames"
                      (onUpload)="uploadEboxAttachment($event)">
  </app-file-uploader>
</template>

The app-file-uploader emits an event when the Upload button is clicked. The container component handles the actual file upload to the server.
I want the file-container TypeScript code to handle closing the popover too. So that after it recieves a reply from the server, it closes the popover.
How can I pass the popover to the .ts file so that I can call .close() on it?
EDIT- ts code:

createEboxAttachment(event):Observable<any>{
  return new Observable<any>(observer => {
    this.jsConnection.sobject("EBOX_Attachment__c").create({Name : event.selectedFile, Tender_Reply__c : this.tender.Reply.Id})
      .then(ret => observer.next(ret))
      .catch(error => observer.error(error));
  });
}

createAttachment(base64data, event, ret):Observable<any>{
  let name = event.selectedFile == this.$Label.EBOX_Other ? event.file.name : event.selectedFile;
  return new Observable<any>(observer => {
    this.jsConnection.sobject("Attachment").create({
        ParentId : ret.id,
        Name : name,
        Body : base64data.substring(base64data.lastIndexOf('base64,')+7),
        ContentType : event.file.type
      })
      .then(ret => observer.next(ret))
      .catch(error => observer.error(error));
  });
}

sendAttachToSF(base64data, event){
  this.createEboxAttachment(event).subscribe(
    ret => {
      this.createAttachment(base64data, event, ret).subscribe(att => {
        this.fileUploaded(att, event);
      });
    },
    error => this.toastr.error(error)
  );
}

uploadEboxAttachment(event){
  if (!this.jsConnection){
    this.jsConnection = window["jsConnection"];
  }
  let reader: FileReader = new FileReader();
  reader.onloadend = (e) => (this.sendAttachToSF(reader.result, event));
  reader.readAsDataURL(event.file);
}

fileUploaded(result, event){
  // this.popover.close(); would like to close popover here.
  this.onFileUploaded.emit(att); //emit event to parent component. works
}
8 months ago · Santiago Trujillo
2 answers
Answer question

0

Demo is available here:https://stackblitz.com/edit/angular-gjunnt?file=app/popover-basic.ts

Output can be seen in below link: https://angular-gjunnt.stackblitz.io

You can follow the below code:

  1. html template file

    <ng-template #popContent>
    <ngb-alert *ngIf="maskEditorAppliedMessage" type="success" (close)="closePopover()">{{ maskEditorAppliedMessage }}</ngb-alert>
    </ng-template>
    <div [ngbPopover]="popContent" #popOver="ngbPopover" triggers="manual" placement="bottom"></div>
    
    
    <button type="button" class="btn btn-outline-secondary mr-2" (click)="openPopover()">
      Apply
    </button>
    
  2. You can have the below code in your ts file.

    import { Component, ViewChild } from '@angular/core';
    import { NgbPopover } from '@ng-bootstrap/ng-bootstrap';
    
    @Component({
      selector: 'ngbd-popover-basic',
      templateUrl: './popover-basic.html'
    })
    export class NgbdPopoverBasic {
      maskEditorAppliedMessage: string;
      @ViewChild('popOver') public popover: NgbPopover;
    
      public closePopover(): void {
        this.maskEditorAppliedMessage = null;
        if (this.popover.isOpen()) this.popover.close();
      }
    
      public openPopover(): void {
        console.log('open' + this.popover.isOpen());
        this.maskEditorAppliedMessage = "Successfully Applied";
        if (!this.popover.isOpen()) this.popover.open();
      }
    }
    
8 months ago · Santiago Trujillo Report

0

SOLUTION that I stumbled upon (thought of in the shower at 2 am).
Since I'm calling a function when the button is clicked and the popover is opened (to populate a dynamic dropdown menu), then I just call that function with the ngbPopover as a parameter.
(click)="populateDropdownList(popover)"
So, it may be ugly, but now I have the popover inside my TS code, and I can close the popver whenver I want.

8 months ago · Santiago Trujillo Report
Answer question
Find remote jobs