I want to inject a spinner service and then make a call to indicate we're waiting for data to load, and then make another call to indicate we're done waiting. The service should handle dynamically loading the spinner component and overlaying it over the component from which it's being used. here is my spinner component html and ts file:
<div class="spinner-container">
<div class="spinner-content">
<div class="spinner-icon-container">
<div class="la-line-spin-fade-rotating la-2x spinner-icon">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div *ngIf="message" class="spinner-message">{{message}}</div>
</div>
</div>
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-spinner',
templateUrl: './spinner.component.html',
styleUrls: ['./spinner.component.scss']
})
export class SpinnerComponent implements OnInit {
constructor() {
}
message: string;
ngOnInit() {
}
}
//This is my component-spinner.service.ts file
import { Injectable } from '@angular/core';
import { SpinnerComponent } from '../components/spinner/spinner.component';
import { ComponentFactory, ComponentFactoryResolver, ComponentRef, Directive, HostListener, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ComponentSpinnerService implements OnInit {
private message: string;
showSpinner(spinning: boolean) {
this.container.clear();
if (spinning) {
this.container.createEmbeddedView(this.template);
this.spinnerComponent = this.container.createComponent(this.componentFactory);
this.spinnerComponent.instance.message = this.message;
} else {
this.container.createEmbeddedView(this.template);
}
}
spinnerMessage(message: string) {
this.message = message;
}
componentFactory: ComponentFactory<SpinnerComponent>;
spinnerComponent: ComponentRef<SpinnerComponent>;
constructor(private container: ViewContainerRef,
private template: TemplateRef<any>,
private componentFactoryResolver: ComponentFactoryResolver) {
this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);
}
ngOnInit(): void {
}
}
// This is my Appcomponnet.html file:
<div class="container">
<div class="row">
<div class="col-6">
<button class="btn btn-outline-primary" (click)="toggleDivALoading()">Toggle Loading for A</button>
</div>
<div class="col-6">
<button class="btn btn-outline-primary" (click)="toggleDivBLoading()">Toggle Loading for B</button>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-header">
DIV A
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header">
DIV B
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
// This is my Appcomponent.ts file:
import {Component} from '@angular/core';
import { ComponentSpinnerService } from '../app/services/component-spinner.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
divALoading: boolean;
divBLoading: boolean;
constructor(
private spinnerSvc: ComponentSpinnerService,
) {}
ngOnInit() {
}
toggleDivALoading() {
this.divALoading = !this.divALoading;
}
toggleDivBLoading() {
this.spinnerSvc.showSpinner(true);
}
}
So i want the spinner component to load if this.spinnerSvc.showSpinner(true);.. currently i have error main.ts:12 Error: StaticInjectorError(AppModule)[ComponentSpinnerService -> ViewContainerRef]: StaticInjectorError(Platform: core)[ComponentSpinnerService -> ViewContainerRef]: NullInjectorError: No provider for ViewContainerRef! at NullInjector.get (core.js:1354)
How do i achieve this?
