I'd like to refresh my card set from navigation bar which is part of appponent.html so I prepared refresh() function.

When it is called it does update variable Cards but doesn't render it in ngFor on html element in mainView.html.

It does render updated set if I call from html element in mainView.html (as (click)="loadCards()") but not if the same ((click)="refresh()") is done in appponent.html.

export class MainView implements OnInit {

  constructor(private mMainController: MainController) {}

  Cards: any = [];

  ngOnInit() {
    this.loadCards();
  }

  loadCards() {
    this.mMainController.getAllCards().subscribe(
      (data) => {this.Cards = data); },
      (error) => {},
      () => {console.log(this.Cards));
  }

...
}

export class AppComponent {
  ...

  constructor(private router: Router, private mMainView: MainView) {}

  refresh(){
    console.log('done');
    this.mMainView.loadCards();
  }
  ...
}

Update

Tried with @Input() but couldn't get it work. I implemented RefreshService as explained in accepted answer and now I'm able to refresh content from other ponents.

Thank you all for quick response.

I'd like to refresh my card set from navigation bar which is part of app.ponent.html so I prepared refresh() function.

When it is called it does update variable Cards but doesn't render it in ngFor on html element in mainView.html.

It does render updated set if I call from html element in mainView.html (as (click)="loadCards()") but not if the same ((click)="refresh()") is done in app.ponent.html.

export class MainView implements OnInit {

  constructor(private mMainController: MainController) {}

  Cards: any = [];

  ngOnInit() {
    this.loadCards();
  }

  loadCards() {
    this.mMainController.getAllCards().subscribe(
      (data) => {this.Cards = data); },
      (error) => {},
      () => {console.log(this.Cards));
  }

...
}

export class AppComponent {
  ...

  constructor(private router: Router, private mMainView: MainView) {}

  refresh(){
    console.log('done');
    this.mMainView.loadCards();
  }
  ...
}

Update

Tried with @Input() but couldn't get it work. I implemented RefreshService as explained in accepted answer and now I'm able to refresh content from other ponents.

Thank you all for quick response.

• javascript
• angular

• I think the issue es from the way you call MainView, which doesn't seem to trigger a digest. I think the correct way to do this would be to pass your cards array as an input to your ponent [cards]=cards and then modifying the cards array directly from the child ponent. – Anton Bks Commented Aug 19, 2019 at 17:21

3 Answers 3

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.

You're attempting to use MainView as a dependency but it's not an injectable dependency. Try to use inputs/outputs between app ponent 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.

You can implement the ponent interaction in two ways

(i) If the ponents are related to each other use the mon 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 ponents are not related to each other you can use a shared service using subject to municate between the two ponents