Remove/replace a component's selector tag from HTML [duplicate]
Solution 1:
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.
Solution 2:
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:
- Attribute directives - see https://angular.io/guide/attribute-directives
- Structural directives - see https://angular.io/guide/structural-directives
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 ;-)