Why Angular animations matter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular animations module.

Angular

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [[1]]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

AFormsModule

BHttpClientModule

CBrowserAnimationsModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated modules like HttpClientModule or FormsModule.

Forgetting to import BrowserAnimationsModule causes animations not to work.

The BrowserAnimationsModule enables Angular animations in your app.

2fill in blank

medium

Complete the code to define a simple fade-in animation trigger.

Angular

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        [1]('500ms ease-in', style({ opacity: 1 }))
      ])
    ])
  ]
})
export class MyComponent {}

Drag options to blanks, or click blank then click option'

Aanimate

Bstyle

Ctrigger

Dtransition

Attempts:

3 left

💡 Hint

Common Mistakes

Using style instead of animate for timing.

Confusing trigger or transition here.

The animate function defines the animation duration and style changes.

3fill in blank

hard

Fix the error in the animation trigger name usage in the template.

Angular

<div [@[1]]="''">Content</div>

Drag options to blanks, or click blank then click option'

AFadeIn

BfadeIn

Cfade_in

Dfade-in

Attempts:

3 left

💡 Hint

Common Mistakes

Using kebab-case or snake_case instead of camelCase.

Capitalizing the first letter incorrectly.

The animation trigger name must match exactly the name defined in the component, which is fadeIn.

4fill in blank

hard

Fill both blanks to create a slide animation that moves an element from left to right.

Angular

animations: [
  trigger('slideRight', [
    transition(':enter', [
      style({ transform: '[1]' }),
      animate('300ms ease-out', style({ transform: '[2]' }))
    ])
  ])
]

Drag options to blanks, or click blank then click option'

AtranslateX(-100%)

BtranslateX(100%)

CtranslateX(0)

DtranslateY(0)

Attempts:

3 left

💡 Hint

Common Mistakes

Using translateY instead of translateX for horizontal movement.

Reversing the start and end transform values.

The element starts off-screen to the left with translateX(-100%) and slides to its original position translateX(0).

5fill in blank

hard

Fill all three blanks to create a toggle animation that changes height and opacity.

Angular

animations: [
  trigger('toggleHeight', [
    transition('void => *', [
      style({ height: '[1]', opacity: [2] }),
      animate('400ms ease-in-out', style({ height: '[3]', opacity: 1 }))
    ])
  ])
]

Drag options to blanks, or click blank then click option'

A0px

B0

C*

D100px

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed height like '100px' instead of '*'.

Using string '0' instead of number 0 for opacity.

The element starts with zero height and invisible opacity, then animates to its natural height * and full opacity.