Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is a angular synthetic property?

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?

like image 764
zgue Avatar asked Nov 30 '17 22:11

zgue


1 Answers

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.

like image 159
SeanStanden Avatar answered Oct 23 '22 00:10

SeanStanden