How to stop the spinner after the loading finishes in an angular app?

I am implementing a spinner which is working fine initially, but it continues to spin even after the page has been loaded.

loader.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
    public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    display(value: boolean) {
        this.status.next(value);
    }
}

app.module.ts

imported the LoadService and added it to the providers array

app.component.html

I am checking the value of showLoader to see if it is true or false as true would show the loader and false wouldn't.

<router-outlet>
   <span *ngIf="showLoader" class="loading"></span>{{showLoader}}
</router-outlet>

app.component.ts

imported LoaderService

export class AppComponent {
  //for the spinner
  showLoader: boolean;
  //LoaderService is for the spinner
  constructorprivate loaderService: LoaderService) { }
  //for the spinner
  ngOnInit() {
    this.loaderService.status.subscribe((val: boolean) => {
      this.showLoader = val;
    });
  }
}

custom.component.ts

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css']
})
export class CustomComponent implements OnInit {

    //LoaderService is for the spinner
    constructor(private loaderService: LoaderService) { }

    ngOnInit() {
        //http call starts
        this.loaderService.display(true);
    }

    ngAfterViewInit() {
        d3.json("https://...", function(data) {
            createChart(data);
        });
        function createChart(data) {
            ...

            dc.renderAll();
        }//end of function  
    }//end of ngAfterView
}//end of export class

I am showing some dc charts and I want the spinner to stop once the charts are displayed.

I need to stop the spinner with this.loaderService.display(false); but using it right after dc.renderAll(); is showing the value of showLoader as false and thereby no spinner appears.

Any kind of help would be greatly appreciated. Thanks.

One option would be to add a default value for showLoader in your AppComponent. You can set it to true as a default with showLoader: boolean = true;

export class AppComponent {
  //for the spinner
  showLoader: boolean = true;
  //LoaderService is for the spinner
  constructorprivate loaderService: LoaderService) { }
  //for the spinner
  ngOnInit() {
    this.loaderService.status.subscribe((val: boolean) => {
      this.showLoader = val;
    });
  }
}

The spinner will be shown by default. Then you can set it like this.

custom.component.ts

  ngAfterViewInit() {
    let loaderService = this.loaderService;
    d3.json("https://...", function(data) {
        createChart(data);
    });
    function createChart(data) {
        ...

        dc.renderAll();
        loaderService.display(false);
    }//end of function  
  }//end of ngAfterView