diff --git a/apps/angular/46-simple-animations/src/app/app.animations.ts b/apps/angular/46-simple-animations/src/app/app.animations.ts
new file mode 100644
index 000000000..408de3d91
--- /dev/null
+++ b/apps/angular/46-simple-animations/src/app/app.animations.ts
@@ -0,0 +1,44 @@
+import {
+  animate,
+  query,
+  stagger,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+
+export const fadeInFromLeft = trigger('fadeInFromLeft', [
+  transition(':enter', [
+    style({
+      opacity: 0,
+      transform: 'translateX(-100%)',
+    }),
+    animate(
+      '500ms ease-out',
+      style({
+        opacity: 1,
+        transform: 'translateX(0)',
+      }),
+    ),
+  ]),
+]);
+
+export const listAnimation = trigger('listAnimation', [
+  transition(':enter', [
+    query('.list-item', [
+      style({
+        opacity: 0,
+        transform: 'translateX(-50px)',
+      }),
+      stagger(100, [
+        animate(
+          '300ms ease-out',
+          style({
+            opacity: 1,
+            transform: 'translateX(0)',
+          }),
+        ),
+      ]),
+    ]),
+  ]),
+]);
diff --git a/apps/angular/46-simple-animations/src/app/app.component.ts b/apps/angular/46-simple-animations/src/app/app.component.ts
index 9f537b3fb..9ab1dd6a3 100644
--- a/apps/angular/46-simple-animations/src/app/app.component.ts
+++ b/apps/angular/46-simple-animations/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { fadeInFromLeft, listAnimation } from './app.animations';
 
 @Component({
   standalone: true,
-  imports: [],
   selector: 'app-root',
+  animations: [fadeInFromLeft, listAnimation],
   styles: `
     section {
       @apply flex flex-1 flex-col gap-5;
@@ -19,7 +20,7 @@ import { Component } from '@angular/core';
   `,
   template: `
     <div class="mx-20 my-40 flex gap-5">
-      <section>
+      <section [@fadeInFromLeft]>
         <div>
           <h3>2008</h3>
           <p>
@@ -51,7 +52,7 @@ import { Component } from '@angular/core';
         </div>
       </section>
 
-      <section>
+      <section [@listAnimation]>
         <div class="list-item">
           <span>Name:</span>
           <span>Samuel</span>
diff --git a/apps/angular/46-simple-animations/src/app/app.config.ts b/apps/angular/46-simple-animations/src/app/app.config.ts
index 81a6edde4..a536127b6 100644
--- a/apps/angular/46-simple-animations/src/app/app.config.ts
+++ b/apps/angular/46-simple-animations/src/app/app.config.ts
@@ -1,5 +1,6 @@
 import { ApplicationConfig } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
-  providers: [],
+  providers: [provideAnimationsAsync()],
 };