Angular 15: Introduction to Component Scoped Keyframes

Angular 15 was recently released and it brings with it a lot of exciting new features and improvements. One of the most significant changes in Angular 15 is the introduction of component scoped keyframes. In this article, we'll take a closer look at what component scoped keyframes are and how they work, and also provide an example to demonstrate their usage.

What are Component Scoped Keyframes?

Component scoped keyframes are a way to define CSS keyframes that are scoped to a specific component. This means that you can create keyframes that are only visible within the component that they are defined in, and they won't affect other components in the application. This allows you to create complex animations that are specific to a particular component, without having to worry about the keyframes affecting other parts of the application.

How to use Component Scoped Keyframes?

To use component scoped keyframes, you simply need to create a CSS keyframe animation within the component's styles. The keyframe animation should be defined using the @keyframes directive and the component should be decorated with the encapsulation property set to ViewEncapsulation.ShadowDom.

Example:

Let's take a look at a simple example that demonstrates how component scoped keyframes can be used. In this example, we'll create a component that displays a simple rotating square.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div class="square"></div>
  `,
  styles: [`
    .square {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: rotate 1s infinite linear;
    }
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class ExampleComponent { }

In this example, the component is decorated with the encapsulation property set to ViewEncapsulation.ShadowDom, which means that the keyframe animation defined in the component's styles will only be visible within the component. The component also contains a simple div element with a class of square that is animated using the keyframe animation rotate. The keyframe animation rotate rotates the square 360 degrees every second.

Conclusion:

Component scoped keyframes are a great way to create complex animations that are specific to a particular component. They allow you to define animations that won't affect other parts of the application and make it easier to manage and maintain your animations. With the release of Angular 15, developers now have the ability to create component scoped keyframes, making it easier to create animations that are specific to a particular component.