CODEWITHSUNDEEP
angularangular2-directives
happyZZR1400
happyZZR1400

Reputation: 2405

is there way to create component those HTML template replaces custom selector?

i'm trying to teach myself angular2. I trying to build component "trigger-resize", which i want to render 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 dont want custom selector to render)

In angular 1. i know it would be achieved by "replace:true" option, but is it possible to achieve it in angular2?

Kind Regards

Upvotes: 3

Views: 2222

Answers (3)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657416

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

<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 is also quite useable for other situations where specific tag names are required like <li> inside <ul> or <tr> inside `

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

Upvotes: 1

Mark Rajcok
Mark Rajcok

Reputation: 364697

The direct answer to the question is "no" – your custom element/selector will be in the HTML. 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.

That said, for your specific use case, as others have already mentioned, a component that uses an attribute selector would work.

See also

Upvotes: 1

Poul Kruijt
Poul Kruijt

Reputation: 71911

One way to do it is to use an attribute

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

Which 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 the proper syntax now for custom attributes in angular2

Upvotes: 5

Related Questions