Dart Angular 2 Transclusion using ng-content with multiple selectors

Question

I'm in the process of migrating some code from Polymer 1.0 the Angular 2, yey!, and I've run into something peculiar/odd.

I want to replace this polymer content selector:

<content id="ca_content_group1"
     select="custom-action[type^='icon'][group='1']">

I saw ng-content, and its wonderful "select" attribute...but, this does NOT work:

<ng-content select="custom-action[type^='icon'][group='1']"></ng-content>

The only way I've been able to get this working is by specifying multiple "select" attributes....which sounds odd...

<ng-content select="custom-action" select="[type=icon]" select="[group=1]"></ng-content>

I'm not sure if this is a bug, but none of these CSS selectors work inside the "select" attribute, "^=, *=, $=, |=, ~=".

I know that there are other ways that involve "collecting" the child nodes and then injecting them with a loop, but I kinda need to know if ng-content is even remotely capable of handling CSS selectors like my example, or if I should definitely look for an alternative.

Answer 1

Yup! This is a bug!

I've filed it on your behalf (we do know about it), but it wasn't tracked publicly yet - https://github.com/dart-lang/angular2/issues/237.

Thanks for trying out AngularDart, let me know if you have any other questions as you try to migrate. We're pretty active on Gitter (minus the upcoming holidays) if you have other questions:

https://gitter.im/dart-lang/angular2