How to detect changes from different component

Question

I need to detect the component change.

First check my code which work.

The problem here is that this is called init and it is unnecessary to call all the time ... you should only call for a change or when its data ( response ) is okay.

  ngOnInit() {

        this.calendarData(); 
      }
    
      detectChangeUser(){
        this.sharedService.selectedUserType$.subscribe(
          data =>  {  
            if(data === 'changed-view-user-trigger'){
              this.calendarData();
              this.calendarUsers();
            }
          },
          err => console.log(err)
        )
      }

I need to detect only when data has a response.

Check also my service.

export class SharedService {
  public latestViewSwither: any = null;
  selectedUserType$ = new BehaviorSubject<any>(this.latestViewSwither);
  training$ = this.selectedUserType$.asObservable();
  constructor(
    private http: HttpClient
    ) { }

  swithViewChanged(e){ 
    this.latestViewSwither = e; 
    this.selectedUserType$.next(e);
  }
}

only to detect when data has value.

data === 'changed-view-user-trigger' don't worry about this. I send it from another component only a string...this is not important. Only important thing is any hook which detects change... I am also trying with ngAfterViewChecked but my software crashes after this...

It is getting called everytime because you used an if statement inside your component. you should check if the response is ok to be sent from your service, otherwise your subscripition will always fire. As a side note, you could use a .pipe(filter(...)) to trigger subscription only on present data — CapitanFindus
– CapitanFindus, Commented Nov 19, 2020 at 20:58
When you call the switchViewChanged you should put an if statement if (!!e)... to call the next from the subject. Also you should make your subject private and your subscribe to the asObservable() property instead. — Jorge Mussato
– Jorge Mussato, Commented Nov 19, 2020 at 21:39

Kavinda Senarathne · Accepted Answer · 2020-11-20 00:08:16Z

1

You can use BehaviorSubject for this. The BehaviorSubject has the characteristic that it stores the “current” value. This means that you can always directly get the last emitted value from the BehaviorSubject. See the example below:

import * as Rx from "rxjs";

const subject = new Rx.BehaviorSubject();

// subscriber 1
subject.subscribe((data) => {
    console.log('Subscriber A:', data);
});

subject.next(Math.random());
subject.next(Math.random());

// subscriber 2
subject.subscribe((data) => {
    console.log('Subscriber B:', data);
});

subject.next(Math.random());

console.log(subject.value)

// output
// Subscriber A: 0.24957144215097515
// Subscriber A: 0.8751123892486292
// Subscriber B: 0.8751123892486292
// Subscriber A: 0.1901322109907977
// Subscriber B: 0.1901322109907977
// 0.1901322109907977

answered Nov 20, 2020 at 0:08

Kavinda Senarathne

2,01015 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eliseo Over a year ago

why not import only Subject import {Subject} from 'rxjs', then subject=new Subject<any>?

Tomliso Over a year ago

Okay i don't hear for this..can you provide me example with my code ?

Tomliso Over a year ago

@Kavinda can you provide me code help with my current code? I cant' understand your example

Jorge Mussato · Accepted Answer · 2020-11-22 13:37:45Z

0

I would try something like that to solve the problem.

service:

export class SharedService {
  public latestViewSwither: any = null;
  selectedUserType$ = new BehaviorSubject<any>(this.latestViewSwither);
  training$ = this.selectedUserType$.asObservable();
  constructor(private http: HttpClient) { }

  swithViewChanged(e){ 
    this.latestViewSwither = e; 
    if (!!e) {
      this.selectedUserType$.next(e);
    }
  }
}

answered Nov 22, 2020 at 13:37

Jorge Mussato

2,5942 gold badges13 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to detect changes from different component

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related