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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With