Directives should support multiple selectors

[ThomasBurleson]

Currently only a single directive syntax is supported. Consider the Layout directive

@Directive({selector: '[fx-layout]'})
export class LayoutDirective {  
  @Input('fx-layout') layout = 'row';
  @Input('fx-layout.xs') layoutXs;
  @Input('fx-layout.gt-xs') layoutGtXs;
}

and its markup usage:

<div  fx-layout="row" fx-layout.xs="column"></div>

All ^ works fine.

Issue

Consider the use of multiple selectors with non-default used in markup

@Directive({selector: '[fx-layout], [fx-layout.xs], [fx-layout.gt-xs]'})
export class LayoutDirective {  
}

The following does NOT throw any errors:

 <div [fx-layout]="direction" [fx-layout.xs]="'column'"></div>

But consider this scenario:

<div  [fx-layout.xs]="direction"></div>

or

<div  [fx-layout.xs]="'column'"></div>

In ^ this case, the expectation is a Layout directive instance would be created, and the @Input('fx-layout.xs') layoutXs would be assigned the value of the direction variable ( or 'column' string).

Instead, we get this error:

Template parse errors:(…) Error: Template parse errors:
Invalid property name 'fx-layout.xs' ("
          <div [ERROR ->][fx-layout.xs]="direction"></div>

Note that the default value/input @Input('fx-layout') would not need to be defined in the markup, but would still be used (since its default value is assigned).

Desired Result:

This should work without any errors:

<div  [fx-layout.xs]="direction"></div>

[ThomasBurleson]

@tbosch - I really need your help with this one!

[emoralesb05]

Not sure if this helps, but this happens because of the . in the selector.

Angular2 appears to complain and not want to recognize it as part of a directives selector. Maybe because . is used in [class.className], [style.styleProperty], [attr.attributeName] or [keyup.key] to select specific ones.

You would have to probably use it as fx-layout-xs and so on.

[ThomasBurleson]

@emoralesb05 - You are correct. The . notation is the issue. The parser expects the input to be property of an object... and now I have an interesting idea to avoid this issue. ;-)

[ThomasBurleson]

@tbosch - converting the input property to a map also does not work and continues to throw a template parsing error!

@Directive({ selector: '[fx-layout]' })
export class LayoutDirective {
  public layout = { 'default' : 'row' };

  /**
   * Layout property: map default direction value and responsive keys that are optional
   */
  @Input('fx-layout') set defaultLayout(direction) {
    this.layout.default = direction || "row";
  }
}

and markup with <div fx-layout="row" [fx-layout.xs]="firstColXs"></div> throws

Invalid property name 'fx-layout.xs' (" fx-layout="row" *ngIf="isVisible">
              <div  [fx-layout]="firstCol" 
                    [ERROR ->][fx-layout.xs]="firstColXs" 
                    [fx-layout.md]="firstColMd" 

[ThomasBurleson]

Support for both full property assignment or property chain assignments is in-progress.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}