Listening for change to property in ngrx

In my first component I have set up a property like so:

  linkEnabled: boolean = false;

and when this is set to false, certain routes will not be able to be accessed by users which I've set up in my html file like so:

   <a class="nav-link" [routerLink]="linkEnabled ? ['/libraries']: null" [routerLinkActive]="linkEnabled ? 'active-route' : 'is-disabled'">

This is set to false until a project has been selected, this is done in another component

In the second component I've imported the first one like so:

import { NavSidebarComponent } from '../nav-sidebar/nav-sidebar.component';

and added it to the constructor:

   constructor(private store: Store<AppState>,
              ..........
              private navSidebarComponent: NavSidebarComponent
              ) { }

and in the ngOnit, where the project is set, I call the linkEnabled value and set to true for when project name is not null:

this.projectNameSub = this.store.pipe(select(ProjectSelectors.selectCurrentProjectName))
  .subscribe(projectName => {
    this.projectName = projectName;
    if(this.projectName !=null) {
      this.navSidebarComponent.linkEnabled = true;
    }
  });

The issue I am having, is that I am not sure how to get the first component to listen to the changes so that it know that linkEnabled has now been set to true? As at the moment it just sees it as false so I know I am missing a step but I'm just not sure what. Is there a way to subscribe to the value so that it can listen to it changing in the ngOnInit in the first component?

I had thought of creating a function like so within the first component:

public activateRoutes(): Observable<boolean> {
console.log("activate routes called");
return of(this.linkEnabled = true);
}

and then in the ngOnit do something like:

this.activateRoutes().subscribe((link) => {
this.linkEnabled = link;
})

and then in the ngOnit in the second component, instead of doing:
this.navSidebarComponent.linkEnabled = true;

I would do: this.navSidebarComponent.activateRoutes();

However all that is happening is that on page load, the linkEnabled is set to true and it's not working at all as I need it to

Solved this issue by creating new action, reducer and selectors file to store this in the store and could then do:

this.routeEnabledSub = this.store.pipe(select(RouteSelectors.selectRouteEnabled))
.subscribe(routeEnabled => {
  this.routeEnabled = routeEnabled;
});

in the first component

and then in the second one, update it like so:

    if(this.projectName !=null) {
      this.store.dispatch(RouteActions.setRouteActive(
        { routeActive: true }));
    } else {
      this.store.dispatch(RouteActions.setRouteActive(
        { routeActive: false }));

and in html check for linkEnabled being set like so:

[routerLinkActive]="linkEnabled ? 'active-route' : 'is-disabled'"