Injecting Angular2 Components as a class or attribute rather than a tag

Question

In Angular1 you could directly insert the HTML into the index.html or index.php like this:

<div ng-controller="pricingController">
  {{price}} - Total Cost
</div>

In Angular2 you have to use a component which forces you to use a TemplateURL in the component.

I want to do something more similar to Angular 1's format.

Something like this directly in the HTML:

<div ngComponent="pricing-component">
  {{price}} - Total Price
</div>

Rather than this:

<pricing-component></pricing-component>

Answer 1

If you want to use an attribute you can use the attribute selector, and a directive. A directive is a component without a template. Or better said, a component is a directive with a template:

<div pricing>
  {{price}} - Total Price
</div>

And your Pricing will have this selector in the directive annotation:

@Directive({
  selector : '[pricing]'
})
export class PricingDirective {}