Detecting if a bootstrap navbar is collapsed or not in angular

Question

I have a navbar inside a its own component called menu . I created a service, to be able to detect later on from other components if the navbar is collapsed or not. So anytime from other components I can refer to the service and determine if the navbar is collapsed.

The navbar is not collapsed if it has the class show .

So I can refer to the navbar in the menu component:

@ViewChild("navbar") navbar: ElementRef;

And I can check if it is collapsed or not using:

this.navbar.nativeElement.classList.contains("show")

How can I detect from inside the service if the navbar is collapsed?

Here is a running code:

https://stackblitz.com/edit/angular-pyquht

Answer 1

Created a Subject with Boolean value in service. Triggering next for each update of menu expand and collapse please go through the updated stackblitz

https://stackblitz.com/edit/angular-l7hw7p