How To Update View From Another Component In Angular 7?

I'd like to refresh my card set from navigation bar which is part of app.component.html so I prepared refresh() function. When it is called it does update variable Cards but doesn

Solution 1:

FIST WAY: USING A SHARED SERVICE

You need to introduce a service that manage the state of your car.

In this case it may be usefull to introduce for this a BehaviorSubject like this:

Your Service:

private refresh: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

public getRefresh(): Observable<boolean> {

   return this.refresh.asObservable();
}

public setRefresh(value: boolean): void {

   this.refresh.next(value);
} 

Inside your MainView class

• First: inject your service as dependency
• Second: Subscribe to your observable inside OnInit hook e.g like this:

this.myService.getRefresh().subscribe((value: boolean) => {
    if(value) {

      this.loadCards()
    }
  
})

Inside your AppComponent class

• First: inject your service as dependency
• Second: Set the value of your observable inside your refresh method.

e.g something like this:

public refresh(){
    this.myService.setRefresh(true);
}

SECOND WAY: USING @Input Decorator to pass value down.

Solution 2:

You're attempting to use MainView as a dependency but it's not an injectable dependency. Try to use inputs/outputs between app component and MainView, if possible. If MainView isn't a child of AppComponent then abstract the logic for loading cards into a service and inject it into both.

Solution 3:

You can implement the component interaction in two ways

(i) If the components are related to each other use the common and straightforward method of sharing data. It works by using the @Input() decorator to allow data to be passed via the template.

(ii) If the components are not related to each other you can use a shared service using subject to communicate between the two components