78

I am getting started with the Angular 2 (version 2.0.0-alpha.46) and creating a few components.

When creating the component with the below code:

Typescript:

import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2';

@Component({
   selector: 'my-component'
})

@View({
     template: '<div class="myClass">Hello My component</div>'
 })

export class MyCompoent{
    constructor() {
        console.info('My Component Mounted Successfully');
    }
}

HTML:

<my-component></my-component>

It works fine, but when i do Inspect element, I can see a tag generated like this:

Output HTML 

<my-component>
    <div>Hello My component</div>
<my-component>

Problem

it keeps the <my-component> tag in the HTML, and some of my CSS are not working as expected.

Question

Is there a way to remove the <my-component> tag similar to angular 1 (replace: true in the directive)?

Improve this question
2
  • 3
    Just FYI, this has been asked at least 3 times already: 1, 2, 3. Commented Jan 5, 2016 at 3:12
  • 1
    The duplicates simply highlight the various scenarios this feature is required in. As this question points out, the CSS libraries don't work as expected with Angular because of this. Commented Sep 20, 2017 at 18:44

2 Answers 2

Reset to default
68

Replace was deprecated in AngularJS 1.x according to https://github.com/angular/angular/issues/3866 because it seemed to not be a good idea.

As a workaround you can use an attribute selector in your component like 

selector: '[my-component]'


selector: '[myComponent]'

and then use it like 

<div my-component>Hello My component</div>


<div myComponent>Hello My component</div>

hint

Directive selectors should be camelCase instead of snake-case. Snake-case is only used for element selectors, because the - is required for custom elements. Angular doesn't depend on components being custom elements, but it's considered good practice to comply with this rule anyway. Angular works fine with camelCase attributes and uses them with all directives (*ngFor, ngModel, ...), and is also suggested by the Angular style guide.

Improve this answer
Sign up to request clarification or add additional context in comments.

16 Comments

camelCase is not the preferred style for selectors of components. See Style 05-02
That only applies to tag names. For attribute selectors there is no reason not to use camelCase. They would prefer camelCase names for tag selectors as well but this wouldn't match the WebComponents naming style where a - in the name is required. This doesn't cause much harm though because Angular doesn't depend on WebComponents features. The only minor difference is that Tags that don't have a - inherit from HTMLUnknownElement instead of HTMLElement See also html5rocks.com/en/tutorials/webcomponents/customelements/…
It is suggested to avoid this according to Angular 2's style guide 05-03, angular.io/docs/ts/latest/guide/style-guide.html#!#05-03
Sure, but there are situations where that is mandatory. How would you otherwise be able to make a <tr> or a <li> a component where no other tag names are supported?
See Gunters comment right under mine, he explains one scenario where you can't avoid this. It is suggested to avoid, but if you have to do it, you can
|
11

To quote the Angular 1 to Angular 2 Upgrade Strategy doc:

Directives that replace their host element (replace: true directives in Angular 1) are not supported in Angular 2. In many cases these directives can be upgraded over to regular component directives.

In fact, it depends on what you want to do and you need to be aware that Angular2 supports several things:

According to what you want to do, you can choose different approaches. For your simple sample, it seems that the @Günter solution is the better ;-)

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.