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.

Naren Murali · Accepted Answer · 2023-12-21 04:01:09Z

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

Thuan Tran · Accepted Answer · 2023-12-21 04:23:14Z

0

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()
      }
    });

answered Dec 21, 2023 at 4:23

Thuan Tran

3291 silver badge16 bronze badges

4 Comments

Tushar Agarwal Over a year ago

Actually I tried using this,cdr.detectChanges(), but it's changing the value only when I am clicking on the screen. It's not changing by itself.

Thuan Tran Over a year ago

Try wrapping this.cdr.detectChanges() inside setTimeout(() => { this.cdr.detectChanges(); })

Tushar Agarwal Over a year ago

Even with setTimeout(), I am facing the same issue.

Thuan Tran Over a year ago

Instead setTimeout, try inject ngZone and then wrap the detectChanges inside ngZone.run

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related