My target is to set or remove class depending on ponent boolean with Angular 2. For example: isRed = true > add class "red", if isRed = false > remove class "red". How is that possible? Code tried:

isRed: boolean;

constructor() {
    $(document).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(window.location.hash) {

        } else{
            this.isRed = true;
        }
        if(scrollTop > 50) {
            this.isRed = true;
        }
        else  {
            this.isRed = false;
        }
    });
}

and html:

[ngClass]="{red: isRed}"

My target is to set or remove class depending on ponent boolean with Angular 2. For example: isRed = true > add class "red", if isRed = false > remove class "red". How is that possible? Code tried:

isRed: boolean;

constructor() {
    $(document).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(window.location.hash) {

        } else{
            this.isRed = true;
        }
        if(scrollTop > 50) {
            this.isRed = true;
        }
        else  {
            this.isRed = false;
        }
    });
}

and html:

[ngClass]="{red: isRed}"

• javascript
• angular
• ng-class

Share Improve this question Follow edited Jan 17, 2017 at 15:01 IntoTheDeep asked Jan 17, 2017 at 14:32 IntoTheDeepIntoTheDeep 4,1181515 gold badges4545 silver badges8787 bronze badges 3

• Your code should work, does it not? – Günter Zöchbauer Commented Jan 17, 2017 at 14:34
• Is the different variable naming in the constructor a copy/paste issue? If not isRed might be always undefined. – Philipp Commented Jan 17, 2017 at 14:35
• Can you please share more code (full class and template) – Günter Zöchbauer Commented Jan 17, 2017 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

The most concise way is IMHO

[class.red]="isRed"

update

The cause of your problem is function in

 $(document).scroll(function(){

it should use arrow function

 $(document).scroll(() => {

otherwise this within the callback won't point to the current class, but instead to the caller.

I'd suggest you try to avoid jQuery with Angular2. Use instead

class MyComponent {

  constructor(private elRef:ElementRef) {}

  isRed:boolean;

  @HostListener('document:scroll', ['$event'])
  onScroll(event:any) {
    var scrollTop = this.elRef.nativeElement.scrollTop;
    // or
    $(this.elRef.nativeElement).scrollTop();

    if(window.location.hash) {

    } else{
        this.isRed = true;
    }
    if(scrollTop > 50) {
        this.isRed = true;
    }
    else  {
        this.isRed = false;
    }
  }
}

This is javascript so I would try something like:

isRed; // there's no need to initialize this variable
          since the constructor has its own scope but hey,
          do it if you wish so

Also it doesn't seem that you are working inside an object since you are using ; instead of , which means that you shouldnt use ":" but rather "="