javascript - Angular2: replace component element entirely -

i looking around while , cannot seem find right answer... should trivial... , documented everywhere... seems cannot find it...

so, have very, easy component/directive called navitem

this how call it

<ul>     <nav-item route="/aboutus">about us</nav-item>     <nav-item route="/contactus">contact us</nav-item> </ul> 

and inside (nav-item.html):

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

so have this:

import { component, input } '@angular/core'; import { router_directives } '@angular/router';  @component({     moduleid: module.id,     selector: 'nav-item',     template: require('./nav-item.html'),     directives: [router_directives] }) export class navitem {     @input() route = '/';       constructor(){} } 

what

<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 don't want.

what want replacing <nav-item> </nav-item> entirely <li><a></a></li>

in angularjs simple.

this not supported , i'm pretty sure won't in future. replace: true deprecated in angular1 since quite time.

what can 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 like

<ul>     <li nav-item route="/aboutus">about us</li>     <li nav-item route="/contactus">contact us</li> </ul>