Is there a way to create a component, this HTML template replaces a custom selector?

Question

I am trying to teach myself angular2. I am trying to create a trigger-resize component that I want to display as:

<a class="hidden-xs" href=""> <em class="fa fa-navicon"></em> </a> 

and NOT as:

 <trigger-resize> <a class="hidden-xs" href=""> <em class="fa fa-navicon"></em> </a> </trigger-resize> 

(I don't want the custom selector to display)

In angular 1. I know that this will be achieved with the "replace: true" option, but is it possible to do this in angular2?

respectfully

Answer 1

One way to do this is to use an attribute

 <a triggerResize class="hidden-xs" href=""></a> 

Who has a component like

 @Component({ selector : 'a[triggerResize]', //select all <a> tags with triggerResize attribute template : '<em class="fa fa-navicon"></em>' }) 

CamelCase attributes are now the correct syntax for custom attributes in angular2

Answer 2

You can use the <a> attribute as a selector instead of a tag of type <a trigger-resize class="hidden-xs"... > , and then use [trigger-resize] as a selector in the component annotation.

 <a trigger-resize class="hidden-xs" href=""> <em class="fa fa-navicon"></em> </a> 

 @Component({ selector : '[triggerResize]' template : '<em class="fa fa-navicon"></em>' }) 

This also applies to other situations where tag names are required, such as <li> inside <ul> or <tr> inside `

 <ul> <li myLi></li> </ul> 

Answer 3

The direct answer to the question is no. your custom element / selector will be in HTML. To quote Angular 1 to Angular 2 Update Strategy Document :

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 updated to standard component directives.

However, for your specific use case, as mentioned in other cases, a component that uses an attribute selector will work.

see also

• Remove host HTML element selector created by Angular component
• Angular2 table row as component