How can I pass an *ngIf value from one component to another?

user_3416512 0
Viewed 3151

I have a common component called PreloaderComponent and I have included it in another component. I need to know how to pass a variable from the parent component to the PreloaderComponent in order to work with an *ngIf statement in the template.

Here is my code:

<div id="preloader" *ngIf="loader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>

export class PreloaderComponent implements OnInit {
  constructor() {}

  loader:any;

  ngOnInit() {}

  startLoader(){
    this.loader = true;
    //console.log("start loader="+this.loader);
  }
}

export class NativeExecutiveSummaryComponent implements OnInit {
  ngOnInit() {
    this.preloader.startLoader();
  }
}
angular6 angular
3 Answers

Create a common service which has loaderSource as a BehaviourSubject and inject the service into the constructor of your component and subscribe to the loader Observable.

loader.service.ts

import { BehaviorSubject } from 'rxjs';

@Injectable()
export class LoaderService {

  private _loaderSource:any = new BehaviourSubject<any>({});
  public loader = this._loaderSource.asObservable();

  //set the loader value
  setLoader(loader){
    this._loaderSource.next(loader);
  }
}

preloader.component.ts

import { LoaderService } from '../services/loader.service.ts'

export class PreloaderComponent implements OnInit {

  constructor(private _loaderService: LoaderService) {}

  public loader:any;

  ngOnInit() {
    this._loaderService.loader.subscribe(load => { this.loader = load });
  }
}

parent.component.ts

import { LoaderService } from '../services/loader.service.ts'

export class ParentComponent implements OnInit {

  constructor(private _loaderService: LoaderService) {}

  ngOnInit() {
    this._loaderService.setLoader(true); // this will set the loader value
  }
}

Your loader var will now contain the value true and will work with your *ngIf

user_28589780

You can use ViewChild component method to call method from one component to another component. Write this code in your NativeExecutiveSummaryComponent class. See below code:

// declaration
@BaseImport.ViewChild(PreloaderComponent)
private preloaderComponent: PreloaderComponent;

// use
this.preloaderComponent.startLoader();
user_74290770

In your NativeExecutiveSummaryComponent's HTML file, you might be having code something like this:

<app-preloader></app-preloader>

Give this tag an Id like this:

<app-preloader #preloaderId></app-preloader>

Then inside your NativeExecutiveSummaryComponent, You can access this element using Viewchild like this:

import {ViewChild} from '@angular/core';
.
.
export class NativeExecutiveSummaryComponent implements OnInit {
  @ViewChild('preloaderId') preloaderElement: PreloaderComponent;

  ngOnInit() {
    this.preloader.startLoader();
  }
}

This should solve your problem.

user_77514750
Related