Transition between states in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Angular animation triggers?

Consider this Angular component with a simple fade animation between two states. What will the user see when the state changes from 'open' to 'closed'?

Angular

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

@Component({
  selector: 'app-fade-box',
  template: `<div [@fadeState]="state" (click)="toggle()" tabindex="0" aria-label="Toggle box visibility">Click me</div>`,
  animations: [
    trigger('fadeState', [
      state('open', style({ opacity: 1 })),
      state('closed', style({ opacity: 0 })),
      transition('open => closed', [animate('500ms ease-out')]),
      transition('closed => open', [animate('300ms ease-in')])
    ])
  ]
})
export class FadeBoxComponent {
  state = 'open';
  toggle() {
    this.state = this.state === 'open' ? 'closed' : 'open';
  }
}

A The box smoothly fades out over 500ms when changing from 'open' to 'closed'.

B The box instantly disappears without animation when changing from 'open' to 'closed'.

C The box fades in over 300ms when changing from 'open' to 'closed'.

D The box fades out over 300ms when changing from 'open' to 'closed'.

💡 Hint

Look at the transition definitions and their timing.

The transition from 'open' to 'closed' uses animate('500ms ease-out'), so the box fades out smoothly over 500 milliseconds.

📝 Syntax

intermediate

Identify the syntax error in this Angular animation trigger

Which option correctly fixes the syntax error in this Angular animation trigger?

Angular

trigger('slideState', [
  state('start', style({ transform: 'translateX(0)' })),
  state('end', style({ transform: 'translateX(100%)' })),
  transition('start => end', animate('400ms ease-in')),
  transition('end => start' animate('400ms ease-out'))
])

A Replace '=>' with '->' in the transition definitions

B Add a comma between the last transition and animate: transition('end => start', animate('400ms ease-out'))

C Remove the comma after the first transition line

D Change 'animate' to 'animation' in the last transition

💡 Hint

Check punctuation between function arguments.

The last transition is missing a comma between the transition definition and the animate function call, causing a syntax error.

❓ state_output

advanced

What is the final state value after these toggles?

Given this Angular component code, what is the value of state after calling toggle() three times starting from 'closed'?

Angular

export class SlideComponent {
  state = 'closed';
  toggle() {
    this.state = this.state === 'open' ? 'closed' : 'open';
  }
}

A 'closed'

B null

C undefined

D 'open'

💡 Hint

Trace the toggle calls step by step.

Starting from 'closed', toggling three times changes state as: 'closed' -> 'open' -> 'closed' -> 'open'.

🔧 Debug

advanced

Why does this Angular animation not trigger on state change?

In this Angular component, the animation does not run when the state changes. What is the most likely cause?

Angular

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

@Component({
  selector: 'app-box',
  template: `<div [@boxState]="state" (click)="toggle()">Box</div>`,
  animations: [
    trigger('boxState', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('visible => hidden', animate('400ms')),
      transition('hidden => visible', animate('400ms'))
    ])
  ]
})
export class BoxComponent {
  state = 'visible';
  toggle() {
    this.state = this.state === 'visible' ? 'hidden' : 'visible';
  }
}

A The component is missing the BrowserAnimationsModule import in the app module.

B The animation durations are too short to notice.

C The toggle method does not update the state variable.

D The animation trigger name does not match the template binding.

💡 Hint

Check module imports required for animations.

Angular animations require importing BrowserAnimationsModule in the app module. Without it, animations won't run.

🧠 Conceptual

expert

Which Angular animation transition will NOT run?

Given these animation transitions, which one will never trigger during normal state changes?

Angular

trigger('moveState', [
  state('start', style({ transform: 'translateX(0)' })),
  state('middle', style({ transform: 'translateX(50%)' })),
  state('end', style({ transform: 'translateX(100%)' })),
  transition('start => middle', animate('300ms')),
  transition('middle => end', animate('300ms')),
  transition('start => end', animate('600ms'))
])

A Transition from 'middle' to 'end'

B Transition from 'start' to 'middle'

C Transition from 'end' to 'start'

D Transition from 'start' to 'end'

💡 Hint

Look at the defined transitions and their directions.

There is no transition defined from 'end' to 'start', so that animation will never run.