CODEWITHSUNDEEP
javascriptangularng-class
IntoTheDeep
IntoTheDeep

Reputation: 4118

Angular 2 add class conditionally

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

Upvotes: 2

Views: 3609

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658235

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

Upvotes: 8

404answernotfound
404answernotfound

Reputation: 771

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

Upvotes: -1

Related Questions