Frontend not reflecting changes when updating Angular component properties

Frontend
1

I’m working with Angular 16 and having trouble with component updates. I have a messenger widget that loads in my main app template so it can be used throughout the application.

<app-messenger [active]="this.activateWidget"></app-messenger>

My messenger component has several properties that can be modified from parent components using @Input() decorators:

export class MessengerComponent implements OnChanges {
    @Input() active: boolean = false;
    @Input() commandList: any[] = [];
    @Input() chatHistory: any[] = [];
    @Input() displayModal: boolean = false;
    @Input() hasAlert: boolean = false;
}

From a different component, I want to modify some of these messenger properties. I inject the messenger component in the constructor and try to change the values directly:

constructor(
    private widget: MessengerComponent
) {
    this.widget.hasAlert = true;
}

The problem is that when I update the property this way, nothing changes on the screen. The frontend doesn’t refresh to show the new value. How can I make sure the UI updates when I modify component properties from another component? What’s the proper way to trigger a frontend refresh in this situation?

2

hold up - i think you’re mixing up the component architecture. when you inject MessengerComponent directly like that, you’re not getting the same instance that’s rendered in your template. have you tried passing the values down through the component tree instead? just update activateWidget in your parent and let angular handle the rest.

3

Angular’s change detection won’t fire when you directly modify component properties through dependency injection. It only tracks changes through the component tree, not direct property manipulation. Don’t inject the component directly. Use a service with BehaviorSubject to manage the messenger state instead. Create a MessengerService that holds your widget properties as observables, then subscribe to these in your MessengerComponent. When other components need to update the messenger, they call service methods instead of hitting the component directly. This way Angular’s change detection actually catches the updates and shows them in the UI. The service becomes your centralized state manager that all components can safely interact with.

4

totally get what u mean! injecting is not the way to go, each comp is its own thing. try using a shared service with observables or something, that way your UI will stay in sync when u change stuff. works way better!