Reputation: 8877
I'm using Ionic 2, which sits on top of Angular 2. I would like to have a class added to my ion-header
element. This is to allow me to have the header have a transparent background initially, but a solid background on scroll.
I am setting a variable in my Typescript file, and updating that variable when the user scrolls.
I need to set the class based on the variable in my Typescript variable. I have done this elsewhere in my app with [ngClass]="{showBack: navBack}"
but this doesn't seem to work on this page.
Typescript:
import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({
selector: 'page-class',
templateUrl: 'class.html'
})
export class ClassPage {
@ViewChild(Content)
content: Content;
navBack: boolean = false;
constructor(...){}
ngAfterViewInit() {
this.content.ionScroll.subscribe((event) => {
if(event.scrollTop == 0) {
this.navBack = false;
} else {
this.navBack = true;
}
});
}
}
HTML:
<ion-header [ngClass]="{showBack: navBack}">
<ion-navbar>
<ion-title>Test</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p style="height: 300px">Long page of content here.</p>
<p style="height: 300px">Long page of content here.</p>
<p style="height: 300px">Long page of content here.</p>
</ion-content>
I would expect to see a showBack
CSS class on my ion-header
which appears on scroll, however it never appears, regardless of the value of event.scrollTop
.
I have done some debugging with console.log
s on the ngAfterViewInit
function, and I can confirm the variable is being changed correctly, but the class does not update.
Upvotes: 3
Views: 622
Reputation: 4099
In order for something to trigger change detection it needs to be executed within Angular’s zone.
import { Component, ViewChild, NgZone } from '@angular/core';
import { Content } from 'ionic-angular';
@Component({
selector: 'page-class',
templateUrl: 'class.html'
})
export class ClassPage {
@ViewChild(Content)
content: Content;
navBack: boolean = false;
constructor(private ngZone: NgZone){}
ngAfterViewInit() {
this.content.ionScroll.subscribe((event) => {
this.ngZone.run(() => {
if(event.scrollTop == 0) {
this.navBack = false;
} else {
this.navBack = true;
}
});
});
}
}
Upvotes: 1
Reputation: 20481
Shouldn't it be:
[ngClass]="{'showBack': navBack}"
(you're missing single quotes)
Upvotes: 2