export const routeTransition = trigger(
  'routeTransition', [
  transition('* => *', [
    query(':enter', [
      style({ 
        opacity: 0, 
        scale: 0.9 
      }),
    ], { optional: true }),
    query(':leave', [
      animate('0.2s', style({ 
          opacity: 0, 
          scale: 0.9 
      }))
    ], { optional: true }),
    query(':enter', [
      animate('0.2s', style({ 
        opacity: 1, 
        scale: 1 
      }))
    ], { optional: true })
  ])
])

    <app-nav></app-nav>
    <div 
      [@routeTransition]="data" 
      style="display: contents"
    >
        <router-outlet></router-outlet>
    </div>

The @let operator allows you to define and assign variables directly within your Angular templates. This can help streamline your code, especially when working with asynchronous data. One of the biggest advantages is that it allows you to use the async pipe without worrying about unsubscribing from observables manually.