parentComponent.ts
import { Component } from '@angular/core';
@Component({
selector: 'main',
templateUrl: '../app/view/main.html'
})
export class AppMainComponent {
public crumbFromParent = "Login"
}
parentComponent.html
<navigation [crumb]="crumbFromParent">Loading navigation...</navigation>
<div class="uk-container uk-container-small uk-position-relative">
<banner>Loading banner...</banner>
<login>Loading login...</login>
<overview>Loading overview...</overview>
</div>
ChildComponent.ts
import { Component} from '@angular/core'
@Component({
selector: 'navigation',
templateUrl: '../app/view/navigation.html',
inputs: ['crumb']
})
export class NavigationComponent {
public crumb: string;
}
ChildComponent.html
<nav class="uk-navbar uk-navbar-container ">
<div class="uk-navbar-left">
<a class="uk-navbar-toggle" href="#offcanvas-push" uk-toggle>
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span>
</a>
<!--breadcrumb-->
<div class="uk-container uk-container-small uk-position-relative">
<div class="uk-text-center" uk-grid>
<div class="uk-width-auto@m">
<ul class="uk-breadcrumb">
<li class="uk-disabled"><a href="#">Menu</a></li>
<li class="uk-disabled"><a href="#">{{crumb}}</a></li>
</ul>
</div>
</div>
</div>
<!--breadcrumb end-->
</div>
</nav>