replace component with its content - angular 2

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..

score 15 · Answer 1 · answered Dec 24 '15 at 15:06

15

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>

answered Dec 24 '15 at 15:06

Poul Kruijt

69,713
12
145
149

3

this makes my markup ugly, as the tag and classes for the component are no longer a concern of the component.. :-( – NullVoxPopuli Apr 25 '16 at 16:19
@NullVoxPopuli you're right... I want to write a "custom" component tag name instead of html markup... :P – João Silva Jun 22 '17 at 17:05

score 3 · Answer 2 · answered Dec 24 '15 at 14:36

3

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" />

answered Dec 24 '15 at 14:36

Shai Aharoni

1,955
13
25

score 2 · Accepted Answer · answered Dec 24 '15 at 14:30

2

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

answered Dec 24 '15 at 14:30

Denis

747
4
13

score 0 · Answer 4 · answered Dec 24 '15 at 14:31

I remember asking a similar question for Angularjs a few years ago. The concensus seemed to be then, as it is might be now is you probably don't want to do that.

It breaks semantics: a <video/> or a <input/> does not decompose into its contents. Your Angular components should not either.

You can probably still achieve what you want by thinking more deeply about your markup/css? Perhaps if you flesh out your use case we might be able to give you an alternative?

replace component with its content - angular 2

4 Answers4

Linked