what is the use of "@" symbol in the view file while property binding?

Question

@Component({
  selector: 'app-hero-list-basic',
  template: `
<ul>
  <li *ngFor="let hero of heroes"
      [@heroState]="hero.state"
      (click)="hero.toggleState()">
    {{hero.name}}
  </li>
</ul>`,

I tried angular animations and it works fine, I don't understand this template part, why are they using @-symbol infront of the trigger in the view.

Docs: here

Answer 1

That is used for triggering animations, which would load the specific styles from the styling file when you need it,

In the above when the variable heroState is inactive it will load the particular style with the animation

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

Answer 2

Without the "@" you would be binding values to the component.

With the "@" you indicate that the variable (in this example heroState) is an animaton-state and not a value-bind, it will trigger animations you declare.