What is a angular synthetic property?

Question

Recently, while developing a animated component, I came across the term synthetic property.

<bmx-panel [@sidebarState]="state">

  <i bmxPanelHeader (click)="toggle($event)"
     class="fa fa-angle-double-right fa-lg"></i>
  ...    
</bmx-panel>

In my case the synthetic property [@sidebarState]="state" triggers the expanding/collapsing animation of my component when the state property is changed by the toggle function.

The first parameter of the trigger method is the name of the corresponding synthetic property @sidebarState.

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
  animations: [
    trigger('sidebarState', [
      state('expanded', style( { width: '240px' } )),
      state('collapsed', style({ width: '40px' })),
      transition('expanded => collapsed', animate('350ms ease-in')),
      transition('collapsed => expanded', animate('350ms ease-out'))
    ])
  ]
})
export class SidebarComponent  {  
  public state = 'expanded';

  constructor() {}

  toggle(event: any) {    
    this.state = this.state === "expanded" ? "collapsed" : "expanded";  
  }
}

A google search does not bring up much information about synthetic properties. Nothing is mentioned in the angular documentation, too. Does anybody have more insight in this concept?

Gripe

Answer 1

It's synthetic because it looks like an Angular property, but doesn't behave as one in the common sense. The term is simply descriptive.

Nonna

How can I create synthetic properties by my own? – Gripe

I don't know :) – Nonna