Gmail compose dialog box.

Gmail compose dialog box in Angular 8.

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:

  1. Service file with BehaviorSubject
  2. Import component in app.component.ts (Main module)
  3. 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

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!

I am a UI developer ( Mobile & Web ) and basic experience in UX designing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store