What is [@property] with @at sign in Angular?

Question

I came across angular components with this property: [@property_name] (with an at sign at the beginning).

What is this and what is it used for? How is it different from a regular [property_name] binding without the @?

Answer 1

From Angular doc Defining animations and attaching them to the HTML template:

When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an @ symbol.

html <div [@triggerName]="expression">...</div>;

Further borrowing the example from the docs:

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.8,
        backgroundColor: 'blue'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ])
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}

<nav>
  <button (click)="toggle()">Toggle Open/Close</button>
</nav>

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

In the above example, the animation trigger openClose has two states 'open' and 'closed' which are controlled by adjusting the boolean variable isOpen.