flex-layout
flex-layout copied to clipboard
feat(api): improve support for responsive alias
Currently Layout syntax is enhanced with parametric responsive markup (selector suffices):
<div fx-layout="row">
==> <div fx-layout="column" fx-layout.gt-sm="row">
The directive implementations use faux @Input
properties to support easy bindings to these optional parametric expressions/values:
@Directive({
selector: '[fx-layout]'
})
export class LayoutDirective {
/**
* Default layout property with default direction value
*/
@Input('fx-layout') layout = 'row';
// *******************************************************
// Optional input variations to support mediaQuery triggers
// *******************************************************
@Input('fx-layout.xs') layoutXs;
@Input('fx-layout.gt-xs') layoutGtXs;
@Input('fx-layout.sm') layoutSm;
@Input('fx-layout.gt-sm') layoutGtSm;
@Input('fx-layout.md') layoutMd;
@Input('fx-layout.gt-md') layoutGtMd;
@Input('fx-layout.lg') layoutLg;
@Input('fx-layout.gt-lg') layoutGtLg;
@Input('fx-layout.xl') layoutXl;
}
To support responsive APIs - within Angular (5.x + 6.x) - these suffices must be hard-coded into the directive. This also means that any new/additionally suffices must be defined in a new sub-class. e.g
@Directive({
selector: '[fx-layout.sm-landscape, fx-layout.sm-portrait]'
})
export class LayoutWithOrientationDirective extends LayoutDirective {
// *******************************************************
// Specify new selectors in subsclass
// *******************************************************
@Input('fx-layout.sm-landscape') layoutSmLandscape;
@Input('fx-layout.sm-portraint') layoutSmPortrait;
}
Obviously this ^ is not ideal nor dynamic. A better solution is need that would ideally only require a single @Input
:
@Directive({
selector: '[fx-layout]'
})
export class LayoutDirective {
@Input('fx-layout') layout = 'row';
}
This will be possible with the resolution of a pending feature in Angular: Attribute Selectors with Dot Notations should write to @Input object maps.
Refs https://github.com/angular/angular/issues/13355