Home / user-75993

jakama's questions

Martin Hope
jakama
Asked: 2020-02-20 11:21:04 +0800 CST
  • 0

I'm working with Ionic 3. When I change the value of a variable in a component, it doesn't update the view on a page where it's embedded.

I've looked at many answers to similar questions but I can't figure out how to do it.

My code is this:

PAGE: home.html

<div *ngIf="getLoading()" text-center>
<img src="http://spcdn1.whichairline.com/1c40c0f0542d7227719eccd99bd71fd172d36e0a/images/loaders/loader-search.gif">
<h1><span>Loading...</span></h1></div>
<component-myList></component-myList>

home.ts

constructor(
public navCtrl: NavController,
public myList: myListComponent) {}

public getLoading() {
  return this.myList.loading;
}

COMPONENT: myList.ts

    @Component({
       selector: 'component-myList',
       templateUrl: 'myList.html'
    })



export class myListComponent {

  public loading: boolean = false;

  constructor() {}

  putLoading() {
    this.loading = !this.loading;
    console.log(this.loading);
  }
}

myList.html

<button color="secondary" (click)="putLoading()" ion-button right>Put Loading</button>

When I press the button nothing happens, that is, the home div is not shown, although the value does change on the console.

Any ideas?

if