Component with attribute selector

[Maksim Popov]

Ability to create component with attribute selector

selector: '[payment-balance-history-record]'

It's important for table row component, that cant be used like

<table class="transaction-table">
        <thead>
            <th>Smth</th>
        </thead>

       <smth-component ng-repeat="record in $ctrl.records track by $index"
                       [record]="::record">
       </smth-component>
</table>

and requires this

<tr smth-component ng-repeat="record in $ctrl.records track by $index"
    [record]="::record">
</tr>

[Anthony Ciccarello]

As a workaround can you make the whole table a component rather than having a row attribute component?

[Maksim Popov]

I have table component and currenlty forced to put row logic there. But there is many use-cases when table row has a lot of logic/template code and it should be in separate component/components.

[pauldeweese]

I was able to get this working by utilizing the legacy option on the @Component declaration:
legacy: <any>{restrict: "EA"}

This overrides the ddo that gets created when the underlying directive is created so that it can be either element level or attribute level.

Example Component declaration:
@Component({
selector: 'my-component',
templateUrl: 'my-component.html',
legacy: <any>{restrict: "EA"}
})

You can then use it like:

<div my-component></div> or <my-component></my-component>