angular - Nativescript: Cannot overwrite ActionBar in template -

i learning nativescript , want implement sample android app angular2.

when route component shall overwrite default visible startpage actionbar in template custom title , navigation button, nothing happens.

my component custom actionbar:

@component({   template: `   <actionbar title="customtitle">     <navigationbutton text="back" android.systemicon="ic_menu_back"></navigationbutton>   </actionbar>     <stacklayout>         <label text="hello world" textwrap="true"></label>         <page-router-outlet></page-router-outlet>     </stacklayout>   ` }) export class testcomponent {} 

the title can changed programmatically page.actionbar.title = "mygoals", dont want in case.

i tried lean on nativescript actionbar doc , sample groceries seem implement similarly.

what must done differently change actionbar in template android app?

---

update

when take this code , separate testcomponent in feature module, action bar not work anymore testcomponent - shows default title.

// main.ts import { platformnativescriptdynamic, nativescriptmodule } "nativescript-angular/platform"; import { ngmodule, component } "@angular/core"; import { routes } "@angular/router"; import { nativescriptroutermodule } "nativescript-angular/router";  @component({     template: `<page-router-outlet></page-router-outlet>` }) export class appcomponent { }  @component({     template: `         <actionbar title="home"></actionbar>         <stacklayout>             <label text="home component" textwrap="true"></label>             <button text="test" [nsrouterlink]="['/test']"></button>         </stacklayout>     ` }) export class homecomponent { }  @component({     template: `         <actionbar title="test"></actionbar>         <stacklayout>             <label text="test component" textwrap="true"></label>             <button text="home" [nsrouterlink]="['/']"></button>         </stacklayout>     ` }) export class testcomponent { }   const testroutes: routes = [     {         path: "test",         component: testcomponent     } ]  @ngmodule({     declarations: [testcomponent],     imports: [         nativescriptroutermodule.forchild(testroutes)     ], }) class testcomponentmodule { }   const approutes: routes = [     {         path: "",         pathmatch: "full",         component: homecomponent     } ]  @ngmodule({     declarations: [appcomponent, homecomponent],     bootstrap: [appcomponent],     imports: [         nativescriptmodule,         nativescriptroutermodule,         nativescriptroutermodule.forroot(approutes),         testcomponentmodule     ], }) class appcomponentmodule { }  platformnativescriptdynamic().bootstrapmodule(appcomponentmodule); 

there! configuration seems working. although, <page-router-outlet> tag doesn't make sense in testcomponent. here simple nativescript-angular app correctly updates actionbar:

// main.ts import { platformnativescriptdynamic, nativescriptmodule } "nativescript-angular/platform"; import { ngmodule, component } "@angular/core"; import { routes } "@angular/router"; import { nativescriptroutermodule } "nativescript-angular/router";  @component({     template: `<page-router-outlet></page-router-outlet>` }) export class appcomponent { }  @component({     template: `         <actionbar title="home"></actionbar>         <stacklayout>             <label text="home component" textwrap="true"></label>             <button text="test" [nsrouterlink]="['/test']"></button>         </stacklayout>     ` }) export class homecomponent { }  @component({     template: `         <actionbar title="test"></actionbar>         <stacklayout>             <label text="test component" textwrap="true"></label>             <button text="home" [nsrouterlink]="['/']"></button>         </stacklayout>     ` }) export class testcomponent {}  const routes: routes = [     {         path: "",         pathmatch: "full",         component: homecomponent     },     {         path: "test",         component: testcomponent     } ]  @ngmodule({     declarations: [ appcomponent, homecomponent, testcomponent ],     bootstrap: [ appcomponent ],     imports: [         nativescriptmodule,         nativescriptroutermodule,         nativescriptroutermodule.forroot(routes)     ], }) class appcomponentmodule {}  platformnativescriptdynamic().bootstrapmodule(appcomponentmodule);