Angular 4 - property value isn't being updated in the view

Question

I have a HomePage page with a property shouldNavBeTransparent: boolean = true which indicates if the navbar of the page should have a class="transparent or not.

After the window has reached 90% of its height, I set the property shouldNavBeTransparent to true.

My problem is that the property isn't being changed in the view. In the view, it's always false, while in the component, it's being changed.

This is my home.ts file:

import {Component} from '@angular/core';
import {IonicPage} from 'ionic-angular';

@IonicPage({segment: "/"})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  services: Array<{ icon: string, title: string, subhead: string, content: string }>;

  shouldNavBeTransparent: boolean = true;

  scrollHandler($event) {
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    console.log(this.shouldNavBeTransparent);
  }
}

The console.log in scrollHandler outputs true and false, which indicates it is changing:

The part where I check the property in my view is (home.html):

<ion-header [class.transparent]="shouldNavBeTransparent">

The part where I trigger the scroll event:

<ion-content (ionScroll)="scrollHandler($event)">

Even when I write {{ shouldNavBeTransparent }} all I get is true.

---

I'm using Ionic v3.19.1

Answer 1

After doing some research I found that you need to use ngZone.

Scroll events happen outside of Angular's Zones. This is for performance reasons. So if you're trying to bind a value to any scroll event, it will need to be wrapped in a zone.run()

import { Component, NgZone } from '@angular/core';
 constructor( public zone: NgZone){}
scrollHandler($event) {
   this.zone.run(()=>{
     // the update needs to happen in zone
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    console.log(this.shouldNavBeTransparent);
   })

Answer 2

You can use ngClass to assign classes conditionally:

<div [ngClass]="{'yourclass':yourcondition}">

For your specific problem:

<ion-header [ngClass]="{'transparent':shouldNavBeTransparent}">

Edit:

import { ChangeDetectorRef } from '@angular/core';

constructor (private ref: ChangeDetectorRef) {}

scrollHandler($event) {
    this.shouldNavBeTransparent = ($event.scrollWidth * 0.9) < $event.scrollTop;
    this.ref.detectChanges();
}

this.ref.detectChanges(); should manually update your variable.