0

I am using the latest SPA template from within Visual Studio 2017:

https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/

The template project works just fine.

I completed the root module like this:

export class AppComponent {
   pageTitle: string = 'Angular 2';
}

And navmenu component like:

<a class='navbar-brand' [routerLink]="['/home']">{{pageTitle}}</a>

But the new title is not displayed

I am new at Angular 2, so I guess I misunderstand something. But I don't know what is different from the samples provided (fetchdata, counter)

Kostas Siabanis
  • 2,989
  • 2
  • 20
  • 22
Frédéric De Lène Mirouze
  • 545
  • 5
  • 25

2 Answers2

2

Note that you're trying to access a variable defined in the parent component (app is the parent of nav-menu).

This can be done using @Input as described in this answer: Angular2: child component access parent class variable/function

Add 'Input' as an import and create the title @Import.

    import { Component, Input } from '@angular/core';
    ...
    export class NavMenuComponent {
        @Input() sTitle;
    }

Pass through the title in the app html.

    <nav-menu [sTitle]="pageTitle"></nav-menu>

Update nav-menu html to use the child variable name.

    <a class='navbar-brand' [routerLink]="['/home']">{{sTitle}}</a>

See the following for more info on component interaction: https://angular.io/guide/component-interaction

Jaybird
  • 541
  • 4
  • 13
0

Ok - I've got it working in Visual Studio 2017 with the latest SPA Templates for dotnetcore2 and I will paste in the code for each of the sections that need to be in sync for this to be functional.

The variable names are very long so that its easier to track or follow what is where and why its there. Hope this helps

In the App component ts file I have the following code that defines a property for the page title:

export class AppComponent {
    strVarPageTitleFromAppComponent: string = 'Page Title - Parent App';
}

In the App Component HTML the Input hook is defined and it leverages this variable from the App component:

 <div class='col-sm-3'>
            <nav-menu [pageTitleInputFromParentComponentToChildComponent]="strVarPageTitleFromAppComponent"></nav-menu>
        </div>

Then in the Nav Component Typescript file add the Input and property as shown below:

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

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
    @Input('pageTitleInputFromParentComponentToChildComponent') pageTitleVarFromNavComponent: string;
}

Finally, the variable defined in Typescripts for the Child (Nav) component is leveraged in the HTML display template for that component:

 <li [routerLinkActive]="['link-active']">
                    <a [routerLink]="['/home']">
                        <span class='glyphicon glyphicon-home'></span> {{pageTitleVarFromNavComponent}}
                    </a>
                </li>

Hope that helps

Martin Palmer
  • 87
  • 7