Utilizing class variables for animations in Angular 7 component

Question

Utilizing class variables for animations in Angular 7 component

Currently, I am facing an issue with an animation that is supposed to expand the height on hover. The problem arises because the height of the label is auto-generated and does not animate properly with just the :hover selector. Below is a snippet from my TypeScript @Component file where I have defined the animation:

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css'],
  animations: [
    trigger('buttonState', [
      state('inactive', style({
        height: '100%'
       })),
      state('active', style({
        height: this.buttonHeight
       })),
      transition('inactive => active', animate('1.5s ease-in')),
      transition('active => inactive', animate('1.5s ease-out'))
    ])
  ]
})

The current issue I am encountering is that when trying to access this.buttonHeight, I receive an error stating "Cannot read property 'buttonHeight' of undefined". This leads me to believe that 'this' refers to something other than the class in the @Component or it may not be defined yet. How can I resolve this?

This is how I am calculating the height:

  @ViewChild('button') button : ElementRef;
  buttonHeight : number;

  ngOnInit() {
    this.buttonHeight = this.button.nativeElement.offsetHeight
  }

In the HTML template:

<label [@buttonState]="state" (mouseover)="toggleState()" (mouseout)="toggleState()">

javascript angular typescript

Answer 1

Answer №1

Struggled to get the animation functioning properly, as using this.buttonHeight in the animation did not work. It is necessary to include a parameter:

HTML

<label [@buttonState]="{value: state, params: {buttonHeight: buttonHeight}}" (mouseover)="toggleState()"
    (mouseout)="toggleState()">LABEL</label>

TS

animations: [
    trigger('buttonState', [
      state('inactive', style({
        height: '100%'
      })),
      state('active', style({
        height: "{{buttonHeight}}px"
      }), { params: { buttonHeight: "4" } }),
      transition('inactive => active', animate('1.5s ease-in')),
      transition('active => inactive', animate('1.5s ease-out'))
    ])
  ]

Make sure to assign a default value for each parameter you define to prevent any errors.

I hope this guidance points you in the right direction! (:

Answer 2

Struggled to get the animation functioning properly, as using this.buttonHeight in the animation did not work. It is necessary to include a parameter:

HTML

<label [@buttonState]="{value: state, params: {buttonHeight: buttonHeight}}" (mouseover)="toggleState()"
    (mouseout)="toggleState()">LABEL</label>

TS

animations: [
    trigger('buttonState', [
      state('inactive', style({
        height: '100%'
      })),
      state('active', style({
        height: "{{buttonHeight}}px"
      }), { params: { buttonHeight: "4" } }),
      transition('inactive => active', animate('1.5s ease-in')),
      transition('active => inactive', animate('1.5s ease-out'))
    ])
  ]

Make sure to assign a default value for each parameter you define to prevent any errors.

I hope this guidance points you in the right direction! (:

Answer 3

Answer №2

There seems to be a challenge in binding this to the component instance because it is being used within an array instead of a function for potential binding. The documentation also does not provide information on this possibility. It might be possible to achieve your goal using CSS.

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class Create implements OnInit {
  @ViewChild('button') button : ElementRef;
  buttonHeight : number;
  isActive = false;

  animate() {
   isActive = !isActive;
   if (isActive) {
     this.buttonState.nativeElment.height = `${this.buttonHeight}px`;
   } else {
     this.buttonState.nativeElment.height = '100%';
   }
  }
  ngOnInit() {
    this.buttonHeight = this.button.nativeElement.offsetHeight
  }

.active {
  transition: all 1.5s ease-out;
}

.inactive {
  transition: all 1.5s ease-in;
}

<label [ngClass]="{active: isActive, inactive: !isActive}" (mouseover)="animate()" (mouseout)="animate()">

Answer 4

There seems to be a challenge in binding this to the component instance because it is being used within an array instead of a function for potential binding. The documentation also does not provide information on this possibility. It might be possible to achieve your goal using CSS.

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class Create implements OnInit {
  @ViewChild('button') button : ElementRef;
  buttonHeight : number;
  isActive = false;

  animate() {
   isActive = !isActive;
   if (isActive) {
     this.buttonState.nativeElment.height = `${this.buttonHeight}px`;
   } else {
     this.buttonState.nativeElment.height = '100%';
   }
  }
  ngOnInit() {
    this.buttonHeight = this.button.nativeElement.offsetHeight
  }

.active {
  transition: all 1.5s ease-out;
}

.inactive {
  transition: all 1.5s ease-in;
}

<label [ngClass]="{active: isActive, inactive: !isActive}" (mouseover)="animate()" (mouseout)="animate()">

Utilizing class variables for animations in Angular 7 component

Answer №1

Answer №2

Similar questions

Combining Two Models in Sails.js

Is it possible to retrieve all data stored in AsyncStorage using React Native, while excluding the

How can I tailor the child count in ag grid to fit my needs?

Ways to access the variables of an object that initiated a function, leading to another function being called

How can I optimize my Javascript applications for better search engine rankings?

Verifying the numerical value of a decimal place

Is it possible to implement the bootstrap grid system within my Angular components using grid classes?

Slider Image Fails to Align Properly

Manipulating attributes in a three.js vertex shader and storing values for future processing cycles

Redux does not cause the components to re-render

While conducting tests on a Vue single file component, Jest came across an unforeseen token

Issue with Discord.js (14.1) - Message Handling Unresponsive

The $.get route is failing to execute on the server-side, resulting in no data being retrieved. The server is not logging any information about this

Utilizing Three.js with interactive functionalities and advanced transformation controls

Getting the route parameter in Angular 2 is easy with the stable router

Fluctuating Values in Array Distribution

The React material-table only updates and rerenders the table when the data is updated twice

What is the method to set up the "materializecss" modal with the "before" (beforeload) feature?

AngularJS: dependent dropdown menus

How to deal with jQuery's set val() behavior on SELECT when there is no matching value