Example: Button State Change Animation

Scenario

Let’s create another button animation, but this time, the transition will be applied when the button’s state changes from its default clickable state to a disabled state.

This will be a slightly different approach from the previous examples in this chapter because this involves adding and removing a class to modify the style of the button and therefore, howthe transition is triggered. We’ll use Angular’s class binding to conditionally add the disabled class.

Note: We’ll create the animation in this lesson within a single component in the Angular application. We’ll use app.component.html, app.component.scss, and app.component.ts for the template, stylesheet, and any TypeScript-related logic, respectively.

Let’s take a look at how this works. In the code snippet below, the class disabled (the word following class. enclosed in square brackets) will be added if isDisabled is truthy and removed if it’s falsy (line 5).