How to properly override a method in a service that is inherited from a service that uses observable?

Question

I want to override the add method of the MessagingService.
For this, I create my own MsgService that extends the MessagingService:

@Injectable({
    providedIn: 'root'
})
export class MsgService extends MessageService {
    constructor() {
        super();
    }

    public add(msg: Message) {
        console.log(msg);
        super.add(msg);        
    }
}

I see confirmation in the console that the method is being called, but the message itself does not appear.
Messagservice uses Observable and under the debugger I see that the observers array is empty:

Can someone explain why this is happening and how to properly override a method in an inherited service?

Answer 1

This is how your component should look to override service class :-

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [
    {
      provide: MessageService,
      useClass: MsgService
    }
  ]
})
export class AppComponent {
  // constructor(private messageService: MessageService, private primengConfig: PrimeNGConfig) {}
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}

  ngOnInit() {
    this.primengConfig.ripple = true;
  }

  showViaService() {
    this.messageService.add({
      severity: 'success',
      summary: 'Service Message',
      detail: 'Via MessageService'
    });
  }
}

Working Stackblitz :- https://stackblitz.com/edit/primeng-messages-demo-qukwyz?file=src/app/app.component.ts