Angular 2 add class conditionally

Question

My target is to set or remove class depending on component 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}"

Answer 1

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

Answer 2

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 "="