owrrpon

import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Subscription } from 'rxjs';
import { AppUtilityService } from 'src/app/app-utility.service';

@Component({
  selector: 'app-modhyobitto-file-uploader',
  templateUrl: './modhyobitto-file-uploader.component.html',
  styleUrls: ['./modhyobitto-file-uploader.component.scss']
})

owrrpon

<div class="modhyobitto-file-uploader" dragAndDrop (onFileDropped)="selectFiles($event)">
    <div class="file-uploader__instructions">
        Drag and drop the file(s) here or click on "Browse Files".
    </div>
    <div class="files-for-upload">
        <mat-expansion-panel 
            *ngFor="let selected_file of selected_files; index as i"
            class="selected-file" hideToggle disabled
            expanded="{{!!selected_file.upload_result}}">
            <mat-expansion-panel-header>

owrrpon

import { saveAs } from 'file-saver';

...

downloadFile(){
  return this.serviceWrapper(
    'POST',
    this.getAPI('file_download'),
    (response: any) => {
      let file_name = "dummy_file.pdf";

owrrpon

.loader-container{
    background: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

owrrpon

serviceWrapper(
    HTTP_method: string,
    API_URL: string,
    responseProcessing: any,
    request_data?: any,
    skip_loading_animation?: boolean
  ): Subject<any> {

    let response_subject = new Subject<any>();

owrrpon

ngAfterViewInit(){
    let loader_control = this.global_utilities.getGlobalData('loading_animation_control');
    this.loading_animation_control_sub = loader_control.subscribe(
      (to_show: any) => {
        // Show if the loader is not being shown already
        if(to_show && !this.is_loader_showing){
          this.is_loader_showing = true;
        }
        // Hide if the loader is being shown and there is no ongoing service call in next few seconds
        if(!to_show && this.is_loader_showing){

owrrpon

<div class="loader-container" *ngIf="is_loader_to_be_shown">
    <mat-spinner strokeWidth="4"></mat-spinner>   
    <p class="loader-container__text">Loading</p>
</div>

owrrpon

export class LoginComponent implements OnInit, OnDestroy {

  login_form!: FormGroup;

  // Subscription
  private initiate_login_sub!: Subscription;

  constructor(
    private global_utilities: AppUtilityService
  ) { }

owrrpon

login(user_credentials: any){
    let credentials = {...user_credentials};
    return this.serviceWrapper(
      'POST',
      this.getAPI('login'),
      (response: any) => {
        if(response.responseCode == 200){
          return {'data': response};
        }else{
          return {'error': response};

owrrpon

providers: [
    {
      provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true
    }
  ],