replace component with its content - angular 2 [duplicate]

Question

I am looking for a way to have a component that is rendered only with its content. For example, Given the component:

@Component({selector: 'my-cmp', template: '<div> my-cmp </div>'})
class MyComponent {
}

rendering it with angular2 will add the following to the DOM:

<my-cmp>
    <div> my-cmp </div>
</my-cmp>

While I want to find a way to render it directly as:

<div> my-cmp </div>

Sadly since angular 2 is relatively new (just went beta) - Google is not so helpful, not to mention how lacking the current documentation is..

Answer 1

Sort of the same can be achieved by using an attribute selector

camelCasing is mandatory for attributes since alpha.52

@Component({
     selector: '[myCmp]', //attribute selector
     template: 'my-cmp'
})
class MyComponent {
}

And use this to call it:

<div myCmp></div>

Answer 2

You can do somethink like the following:

@Component({selector: 'div.my-cmp', template: 'my-cmp'})
class MyComponent {
}

and in your HTML:

 <div class="my-cmp" />

Answer 3

According to documentation of angular 1.x

Replace the directive's element itself (if replace is true - DEPRECATED).

So i think this feature won't be available it angular 2