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
}
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:
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>
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();
}
}
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.