Angular2: replace component element entirely

Question

I was looking around for a while now and cannot seem to find the right answer... this should be something very trivial... and be documented everywhere... just seems cannot find it...

so, I have a very, very easy component/directive called navItem

This is how I call it

<ul>
    <nav-item route="/aboutus">About us</nav-item>
    <nav-item route="/contactUs">Contact us</nav-item>
</ul>

and this is what is inside it (nav-item.html):

<li><a [routerLink]="route"><ng-content></ng-content></a></li>

so basically I have just this:

import { Component, Input } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'nav-item',
    template: require('./nav-item.html'),
    directives: [ROUTER_DIRECTIVES]
})
export class NavItem {
    @Input() route = '/';


    constructor(){}
}

What I get is

<ul>
    <nav-item _ngcontent-xng-6="" route="/aboutus" ng-reflect-route="/aboutus"><li><a ng-reflect-router-link="/aboutus" ng-reflect-href="/aboutus" href="/aboutus">About us</a></li></nav-item>
    <nav-item _ngcontent-xng-6="" route="/contactus" ng-reflect-route="/contactus"><li><a ng-reflect-router-link="/aboutus" ng-reflect-href="/contactus" href="/contactus">Contact us</a></li></nav-item>
</ul>

Which of course I don't want.

What I want is replacing <nav-item> </nav-item> entirely with <li><a></a></li>

In AngularJs that was very simple.

What's in './nav-item.html'?

Günter Zöchbauer
– Günter Zöchbauer

2016-07-19 12:07:18 +00:00
Commented Jul 19, 2016 at 12:07 — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 19, 2016 at 12:07

Günter Zöchbauer · Accepted Answer · 2016-07-19 12:09:23Z

2

This is not supported and I'm pretty sure it won't be in the future. replace: true was deprecated also in Angular1 since quite some time.

What you can do is using attribute selectors like

@Component({
    moduleId: module.id,
    selector: '[nav-item]',
    template: require('./nav-item.html'),
    directives: [ROUTER_DIRECTIVES]
})
export class NavItem {
    @Input() route = '/';


    constructor(){}
}

<a [routerLink]="route"><ng-content></ng-content></a>

and use it like

<ul>
    <li nav-item route="/aboutus">About us</li>
    <li nav-item route="/contactUs">Contact us</li>
</ul>

answered Jul 19, 2016 at 12:09

Günter Zöchbauer

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

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

7 Comments

Demiro-FE-Architect Over a year ago

Hmm, this is not very component friendly... in optic to have comprehensive markup instead of html, non descriptive markup...so <tabset><tab>Tab1</tab><tab>Tab2</tab></tabset> is not possible anymore you would need to do <ul tabset><li tab>Tab1</li><li tab>Tab 2</li></ul> .... Not really clean... Very, very impressed by A2 so far, but this is quite a big let down :'(

Günter Zöchbauer Over a year ago

Replacing elements causes just to many issues. I'd rather not use <ul> in the first place, then you can have <nav-item> children or whatever you want.

Demiro-FE-Architect Over a year ago

I would, but bootstrap is styling basing (only) on the elements themselves and not classes... afaik (at least when targetting LIs in nav)

Günter Zöchbauer Over a year ago

Then the issue is that bootstrap is not flexible enough for Angular2 ;-)

Günter Zöchbauer Over a year ago

You can add @HostBinding('class.is-active') isActive:boolean = false; to NavItem and when you set this.isActive = true the is-active class gets added to <nav-item class="is-active">

|

Julian · Accepted Answer · 2017-03-14 10:27:43Z

0

I think what you want is an Attribute-directive not a component as suggested above.

answered Mar 14, 2017 at 10:27

Julian

6093 silver badges7 bronze badges

1 Comment

Nrzonline Over a year ago

Can you improve your answer with more information about why?

Collectives™ on Stack Overflow

Angular2: replace component element entirely

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related