Write less & code more!
Hey! good day!, One simple creation like Gmail composes a dialog box with Angular. It’s fully dynamic we able to access from any component and if the user redirects to any other page also it stays on the page, just like Gmail.
Before we get into the code, we should know “The files we needed”
Steps:
- Dialog box component
- Service file with BehaviorSubject
- Import component in app.component.ts (Main module)
- How to access from any component
Step 1: Dialog box component
Create dialog box component ng g c UploadExcelDetails
I have created component like UploadExcelDetails. you can create based on your needs. Please Keep in mind the following code file names based on UploadExcelDetails.
Step 2: Service file with BehaviorSubject
I have created a service as upload-zip.service.ts
Please find the following code for gmail dialog box component and communication service.
Step 3: Import in the main module
app.component.html
<router-outlet></router-outlet>
//import your component like following code :
<app-upload-excel-details [data]=’uploadExcelDetails’ class=”uploadDialoueBox” *ngIf=”isopenUploadBox”></app-upload-excel-details>
app.component.ts
import { Component } from ‘@angular/core’;
import { UploadZipService } from ‘./services/upload-zip/upload-zip.service’;
export class AppComponent {
isopenUploadBox = false;
title = ‘hubAdmin’;
uploadExcelDetails:any;
constructor(private uploadService:UploadZipService) {
this.uploadService.currentMessage.subscribe(message => {
if(message.status != ‘Initialized’){
// console.log(message);
this.isopenUploadBox = true;
this.uploadExcelDetails = message;
}
if(message.status == ‘close’){
this.isopenUploadBox = false;
}
})
}
}
Step 4: How to access from any component
YourComponent.ts
import { UploadZipService } from ‘src/app/services/upload-zip/upload-zip.service’;
constructor(private uploadFile:UploadZipService) { }
enableUploadDiv(data){
this.uploadFile.changeMessage({status:’upload’,data:data,url:this.apiConfig. uploadMultiRewards,module:’Rewards’,excelname:this.excelFileName});
}
Addition Tips
If you want to get uploading file size dynamically from the rest API(HTTP), you need to declare the following option in the API call.
{reportProgress: true,observe: ‘events’}
Good luck!
