Angular,Not able to inject service in a parent class

Question

I have a wrapper toaster service created for ngx-toastr. I'm able to inject this in one of the derived class but not the parent class. In the parent class it comes as undefined.

toastr.service.ts

   import { Injectable } from '@angular/core';
    import { ToastrService, IndividualConfig } from 'ngx-toastr';
    
    @Injectable()
    export class MyToasterService {
    
        options: IndividualConfig;
    
        constructor(
            private toastr: ToastrService
        ) {
            this.options = this.toastr.toastrConfig;
            this.options.positionClass = 'toast-center-center';
            this.options.timeOut = 3000;
            this.options.closeButton = true;
        }
    
        showErrorToast() {
            let title = 'Technical Error'
            let message = "We are facing some technical issues. Please try agian later"
            this.toastr.error(message, title, this.options);
        }
    
    }

base.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { technicalErrorMessage, forbiddenMessage } from './message';
import { MyToasterService } from '../../common/toastr-service/toastr.service'


@Injectable({
  providedIn: 'root'
})
export class BaseService {

  constructor(private toastrService:MyToasterService) {
  
   }

  errorInfo = new Subject();
  errors = [];

  updateErrorDetails(errorInfo, title) {
    const errorDetails: any = {
      id: title,
      type: 'error',
      position: 'top-center',
      noTimeout: true
    };

    let errorMessage = '';

    if (errorInfo.status !== 412) {
      errorMessage += `${title} : ${technicalErrorMessage}`;
      errorDetails.msg = errorMessage;
      // write here a error message ui
    } else {
      errorMessage = forbiddenMessage;
      errorDetails.msg = errorMessage;
      // write here a error message ui
    }

  }

  displayServerError(message, title) {
    const errorDetails: any = {
      id: title,
      type: 'error',
      position: 'top-center',
      noTimeout: true
    };

    let errorMessage = '';
    errorMessage += `${title} : ${message}`;
    errorDetails.msg = errorMessage;
    this.toastrService.showErrorToast(); //here this.toastrService comes as undefined
    
  }

}

child.service.ts (Extending the base service)

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { APIService } from '../api/api.service';
import { HttpClient } from '@angular/common/http';
import { Store } from '@ngrx/store';
import { AppState } from '../store/app.store';
import { BaseService } from '../base-service/base-services.service';
import { MyToasterService } from '../../common/toastr-service/toastr.service'


@Injectable({
  providedIn: 'root'
})
export class ChildService extends BaseService {

    url: any = {
        someUrl : '/api/data-service/',
      };

  isError = new Subject();

  constructor(private api: APIService, private http: HttpClient,
              private store: Store<AppState>,private toastrService1:MyToasterService) {
                super();
  }


  getData(key: string): void {
   this.http.get(this.url.someUrl).subscribe((details: any) => {
        if (details.status) {
      //data usage
        }
      }, error =>  {
         this.displayServerError('ds','ds');  //calling parent method and inside that this.toastrService doesn't work
         this.toastrService1.showErrorToast(); //this works
      });
}
}

So basically I can inject the toastrService in child class(extending base.service.ts) and see the toastr. But when I inject in base.service.ts the toastr service is becoming undefined. There are multiple child service class extending the base service class. So I dont want to inject the toastr service in each service class

Answer 1

Dependency Injections are not inherited this way, also it must be marked as public in order to be inherited. You'll have to pass the toastrService from the child component up to the super's constructor for the Angular's DI system to work properly.

constructor(public toastrService:ToasterService) {
super(toastrService)
}