Angular: Add fragment-like components

[ranquild]

I'll explain it with example. Let's say you have Button component that accepts ng-content, and want to have FilterButton, ShareButton components that use Button and just push svg icon inside. Currently it is not possible to use FilterButton in place of Button because each component in Angular adds another dom node. I would like to have ability to create components in such way so no extra root is created, but root node from component's template is considered as this component's root. As in older versions of React, you can require that each of those "fragment" components have only one root element in it's template.

Possible API:

@Component(
  selector: 'kit-filter-button',
  template: '<kit-button>Icon</kit-button>,
  directives: const [Button],
  fragment: true
) 
class FilterButton {}

In this case no dom node with tag kit-filter-button is created.

[ranquild]

Connected to https://github.com/dart-lang/angular/issues/494. If it was possible to create fragment component with input as root node issue would be solved.

[matanlurey]

Thanks for filing this! We've been talking about similar concepts at the office.

One idea was shifting template semantics to the template file (or string literal) itself:

@Component(
  template: '<kit-button>Icon</kit-button>',
  directives: const [KitButton],
)
class FilterButton {}

So, if you used this, as such:

<FilterButton></FilterButton>

... it would emit in the DOM:

<kit-button>Icon</kit-button>

... with no overhead or concept of a root ("host") component.

On the other hand, if you _wanted_ a host component, you could continue to use selector, but also you could use a new syntax for the host in the template file. For example:

// filter_button.html
<Host tag="filter-button">
  <!-- View Content -->
</Host>

Anyway, this is a little bike-sheddy. I will keep this filed for now!

[matanlurey]

/cc @TedSander @nshahan for angular_components input.

(Out of scope for next quarter, but we could talk about after that)

[matanlurey]

We're all a fan of this, but there isn't a compelling way to implement this yet.

We will revisit sometime next year.