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

Question

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

What about using an attribute on <a> as selector instead of a tag like <a trigger-resize class="hidden-xs"... > and then in the component annotation [trigger-resize] as selector? — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 27, 2015 at 12:17
i dont want to make all "a" tags to become "trigger-resize", is that possible? — happyZZR1400
– happyZZR1400, Commented Dec 27, 2015 at 12:18
The way I explained it above all tags with the trigger-resize attribute become trigger-resize, but maybe you want to use a directive instead anyway. If you want to add resizable behavior a component is not the right way. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 27, 2015 at 12:21

Poul Kruijt · Accepted Answer · 2015-12-27 12:28:20Z

5

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

answered Dec 27, 2015 at 12:28

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:32:32Z

1

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.

Comments

Günter Zöchbauer · Accepted Answer · 2017-02-14 10:27:22Z

1

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>

edited Feb 14, 2017 at 10:27

answered Dec 27, 2015 at 12:25

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related