Stack Exchange
Angular 10: how to close the preloader?
I have a preloader that should close as soon as I receive the message
import { Component, OnInit } from '@angular/core';
import { PreloaderService } from 'src/app/services/preloader.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit{
  constructor(private preloaderService: PreloaderService) {}
  
  ngOnInit(): void {
    this.preloaderService.showPreloader();
    window.addEventListener('message', function(event) {      
          console.log(event);      
  });
  
  }   
}

The preloader is closed using the function
this.preloaderService.hidePreloader();

my PreloaderService:
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class PreloaderService {
    private isPreloaderVisibleSubject: BehaviorSubject<boolean> = new BehaviorSubject(false);
    private preloaderProgressSubject: BehaviorSubject<number> = new BehaviorSubject(0);

    isPreloaderVisible: Observable<boolean> = this.isPreloaderVisibleSubject.asObservable();
    preloaderProgress: Observable<number> = this.preloaderProgressSubject.asObservable();

    constructor() {}

    updatePreloaderProgress(value: number) {
        this.preloaderProgressSubject.next(value);
    }

    showPreloader() {
        this.isPreloaderVisibleSubject.next(true);
    }

    hidePreloader() {
        this.isPreloaderVisibleSubject.next(false);
    }
}

But i don't understand in any way how to combine message and preloader

It's really not clear what your asking but I think you just want to add this.preloaderService.hidePreloader(); to where you have console.log(event);

Try below code. I am sure this will solved your issue.
ngOnInit(): void {
  var self = this;
  this.preloaderService.showPreloader();
  window.addEventListener('message', function(event) {
    self.preloaderService.hidePreloader();
  }); 
}


If your event means it is load, then put it like that:
ngOnInit(): void {
  this.preloaderService.showPreloader();
  window.addEventListener('message', function(event) {
    this.preloaderService.hidePreloader();
  }); 
}


Property 'preloaderService' does not exist on type 'Window'.
16           this.preloaderService.hidePreloader();
                  ~~~~~~~~~~~~~~~~


I don't know what is preloaderService.
I also can't see your error - it is hard to help you

use this.preloaderService

If this is error from your service, maybe your library have an error?

I added preloaderService

ERROR in src/app/components/home/home.component.ts:16:16 - error TS2339: Property 'preloaderService' does not exist on type 'Window'.
16           this.preloaderService.hidePreloader();
                  ~~~~~~~~~~~~~~~~

