Supporting Complex Selectors for Transclusion in Components

[jforjava1981]

• I'm submitting a ...

• [x] feature request

  I have been writing code using AngularJs 1.5.5 components. Please see below Plunker:
  Components With Transclusion

I have a <user> component which can either contain <add-action> or <update-action> components. Only one of them will be included at any time. Now I want to transclude these components in main <user> component at the same transclusion slot.
I can't make any of them as default because there might be a case like view only page where none of them are shown. Both the sub-components are going to contain different buttons.
Problem is I have to use full name of the sub-component like either addAction OR updateAction.

what I want is something like a CSS selector which can select any of them. e.g $=action which will select any element present and having name ending with word "action". Is it possible at all? I have not included actual code but have included sample to demonstrate.

[gkalpak]

I'm not sure about custom CSS selectors (we would have to use querySelectorAll I guess, which might be possible now that IE8 is out, but could be slow).

Off the top of my head, the easiest solution would be allowing arrays of elements as values of the transclude object. E.g.:

// DDO
{
  ...
  template:
    '<div>' +
      '...' +
      '<div ng-transclude="action"></div>' +
    '</div>'
  transclude: {
    action: ['addAction', 'updateAction']
  }
}

WDYT, @petebacondarwin ?

BTW, you can currently achieve something similar, using ngIf and a little boilerplate: Demo

[jforjava1981]

@gkalpak I did that and for my case ng-if is not really required as only one element will be included at all times. However would really like to do this more declaratively using the api itself. Also what if i have more than couple of actions and such multiple slots where I want to inject one/more of multiple elements. It will be more complex I suppose.

[jforjava1981]

@gkalpak for an array solution I suppose optional notation "?" can be supported as well within array for each element

[gkalpak]

Supporting ? with arrays would be a little tricky. It might be easier to use a comma-separated string.