Triggering one component after making changes in other component (no parent child) relationship

Question

I want to trigger changes in landing.component.ts once I make changes in cites.component.ts

mediator.service.ts

@Injectable()
export class MediatorService {
  private updateValue$: BehaviorSubject<any> = new BehaviorSubject('');
  valueObs = this.updateValue$.asObservable();
  constructor() {}

  setValue(value: any) {
    this.updateValue$.next(value);
  }
}

cites.component.ts

@Component({
  selector: 'cites',
  templateUrl: './cites.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CitesComponent {
 constructor(public mediator: MediatorService)
 {}
 private displayProgress(process: Promise<any>, message: string) {
    return process.then(() => {
      this.mediator.setValue(true);
    }).catch((error: Error) => console.error(error))
 }
}

landing.component.ts

@Component({
  selector: 'landing',
  templateUrl: 'landing.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LandingComponent {
 constructor(private mediator: MediatorService) {
  this.mediator.valueObs?.subscribe((data: any) => {
     if (data) {
       this.changeValue();
     }
  })

  changeValue()() {
      //logic
  }

 }
}

I want LandingComponent to detect changes whenever I am subscribing to the BehaviorSubject and data is true. It is working if I am keeping ChangeDetectionStrategy as default in LandingComponent, but I want to keep ChangeDetectionStrategy.OnPush to improve performance.

I am new in Angular, so please help me with this issue.

Answer 1

Since you are not matching the two criteria which trigger change detection for OnPush

On Push docs

Using OnPush OnPush change detection instructs Angular to run change detection for a component subtree only when:

• The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with ==
• Angular handles an event (for example using event binding, output binding, or @HostListener ) in the subtree's root component or any of its children whether they are using OnPush change detection or not.

You can set the change detection strategy of a component to OnPush in the @Component decorator:

please modify the code to

@Component({
  selector: 'cites',
  templateUrl: './cites.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CitesComponent {
 constructor(public navigation: NavigationService, private changeDetectorRef: ChangeDetectorRef)
 {}
 private displayProgress(process: Promise<any>, message: string) {
    return process.then(() => {
      this.navigation.setBreadcrumb(true);
      this.changeDetectorRef.detectChanges(); // make change detection fire manually! you can also use this.changeDetectorRef.markForCheck();
    }).catch((error: Error) => console.error(error))
 }

References:

change detection ref - angular

Answer 2

So you are subscribing to breadcrumbObs observable in AnalysisComponent, but the observable is part of the NavigationService and not the component, so Angular doesn't trigger change detection for Analysi Component.

So you should try to add cdr.detectChanges() inside the subscribe:

this.navigation.breadcrumbObs?.subscribe((data: any) => {
      if (data) {
        this.createBreadcrumbs();
        this.cdr.detectChanges(); // or markForCheck()
      }
    });