How can I implement a dynamic class in my view?

Question

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.logs on the ngAfterViewInit function, and I can confirm the variable is being changed correctly, but the class does not update.

Just add quotes to try? What I found in the doc trying to help you : angular.io/guide/template-syntax#binding-targets — Paul Leclerc
– Paul Leclerc, Commented Jul 24, 2017 at 14:54

Dean Chalk · Accepted Answer · 2017-07-24 14:49:54Z

2

Shouldn't it be:

[ngClass]="{'showBack': navBack}"

(you're missing single quotes)

answered Jul 24, 2017 at 14:49

Dean Chalk

20.5k6 gold badges66 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike Over a year ago

Quite possibly - I've tried it, but the class still does not appear. Likewise, if I default the value to true in my Typescript it always shows and is not updated by the ionScroll.subscribe event (which is definitely being called).

Dean Chalk Over a year ago

Wierd, why not try [class.showBack]="navBack" - which is often used when working with a single class

Mike Over a year ago

Nope - same with that too. I have put it on a div as well, just in case ion-header had some odd functionality on it preventing class manipulation, but it's the same deal there. It seems that changes made in the Typescript aren't updating the variable in the view.

Swapnil Patwa · Accepted Answer · 2017-07-24 15:16:46Z

1

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;
          }
    });
   });
}

}

edited Jul 24, 2017 at 15:16

answered Jul 24, 2017 at 15:03

Swapnil Patwa

4,0993 gold badges27 silver badges37 bronze badges

2 Comments

Mike Over a year ago

That's fixed it. Can you explain what the issue here was? It's a bit confusing, because this.navBack was updating, just not updating the view, so what is ngZone doing?

Swapnil Patwa Over a year ago

Somehow ionScroll code leaves Angulars zone and breaks change detection. So we are triggering change detection manually using ngZone.

Collectives™ on Stack Overflow

How can I implement a dynamic class in my view?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related