htmlangularscss-lint

Angular: Accessing Variables in a Function


I'm not sure how to access "this" from a function in Angular.

This is my HTML

    <img id="castle_frame_0" [ngClass]="this.frame == 0 ? 'show' : 'hide'" src="../../assets/FC_Frame_0.png">
    <img id="castle_frame_1" [ngClass]="this.frame == 1 ? 'show' : 'hide'" src="../../assets/FC_Frame_1.png">
    <img id="castle_frame_2" [ngClass]="this.frame == 2 ? 'show' : 'hide'" src="../../assets/FC_Frame_2.png">
    <img id="castle_frame_3" [ngClass]="this.frame == 3 ? 'show' : 'hide'" src="../../assets/FC_Frame_3.png">
    <img id="castle_frame_4" [ngClass]="this.frame == 4 ? 'show' : 'hide'" src="../../assets/FC_Frame_4.png">
    <img id="castle_frame_5" [ngClass]="this.frame == 5 ? 'show' : 'hide'" src="../../assets/FC_Frame_5.png">

I'm basically trying to change the frames every X seconds to make one of the characters blink. This is my component so far: enter image description here

Help is much appreciated!


Solution

  • It's basically the approach you have described, you just need to put it into your code. Below is one way you can do it

    export class HomeComponent implements OnInit {
      frame = 0;
      refresh = 2000;
      maxFrames = 5;
    
      constructor() {
        setInterval(() => {
          this.blink()
        }, this.refresh); // will call the blink function after every 2 seconds
      }
    
      ngOnInit() {
        this.frame = 1; 
        console.log(this.frame);
      }
    
      blink() {
        // If frame is 0 then set it to some other number between 1 and 5 else set it back to 0;
        this.frame = this.frame === 0 ? this.getRandom(1, this.maxFrames)  : 0;
      }
    
      getRandom(min: number, max: number){
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
    }
    

    After every 2 seconds it will change to 0 and stay 0 for 2 seconds then change to a random number between 1-5 and stay that for 2 seconds.

    Here is a Stackblitz Demo where you can play with this code and see this in action