Currently working on an Angular app using TypeScript:
The app.component features a top navigation bar, followed by the router-outlet for other components
<navigation></navigation>
<router-outlet></router-outlet>
Navigation Section
@Component({
selector: 'navigation',
directives: [ROUTER_DIRECTIVES],
template: `{{ HERE SHOULD BE USERNAME }} <a [routerLink]="['Home']">Home</a> | <a [routerLink]="['Logout']">Logout</a>`
})
export class NavigationComponent {}
Login Form (loaded within the router-outlet)
@Component({
selector: 'login-component',
templateUrl: 'app/components/login/login.html',
})
export class LoginComponent {
username ;
constructor(public router: Router, public http: Http) {
}
...
}
The purpose of the login.component is to handle user logins. Once a user has logged in, I want to display their username in the Navigation.component. Is there a way to pass the User-Name from login.component to Navigation.component? Alternatively, is it possible to access the variable username within the login.component from the Navigation.component?