Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

feat(api): improve support for responsive alias #17

Open
ThomasBurleson opened this issue Nov 3, 2016 · 1 comment
Open

feat(api): improve support for responsive alias #17

ThomasBurleson opened this issue Nov 3, 2016 · 1 comment
Assignees
Labels
blocked custom breakpoints Issues with Custom Breakpoint configuration and use feature P5 Low-priority issue that needs consideration related: angular-core

Comments

@ThomasBurleson
Copy link
Contributor

ThomasBurleson commented Nov 3, 2016

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';

}
@ThomasBurleson ThomasBurleson changed the title Improve use of responsive alias Improve support for responsive alias Nov 3, 2016
@ThomasBurleson
Copy link
Contributor Author

ThomasBurleson commented Dec 14, 2016

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 angular/angular#13355

@ThomasBurleson ThomasBurleson added this to the v1.0.0-beta.2 milestone Dec 14, 2016
@ThomasBurleson ThomasBurleson assigned vicb and unassigned tbosch Dec 14, 2016
@ThomasBurleson ThomasBurleson changed the title Improve support for responsive alias feat(api): improve support for responsive alias Dec 15, 2016
@ThomasBurleson ThomasBurleson modified the milestones: v2.0.0-beta.5, v2.0.0-rc.1 Feb 10, 2017
@ThomasBurleson ThomasBurleson modified the milestones: v2.0.0-rc.1, v2.0.0-rc.2 Mar 2, 2017
@ThomasBurleson ThomasBurleson modified the milestones: Backlog, v2.0.0-beta.7 Mar 16, 2017
@ThomasBurleson ThomasBurleson added the P5 Low-priority issue that needs consideration label Jun 22, 2017
@CaerusKaru CaerusKaru removed this from the Backlog milestone Dec 31, 2018
@CaerusKaru CaerusKaru added the custom breakpoints Issues with Custom Breakpoint configuration and use label Jan 13, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
blocked custom breakpoints Issues with Custom Breakpoint configuration and use feature P5 Low-priority issue that needs consideration related: angular-core
Projects
None yet
Development

No branches or pull requests

4 participants