kaveer
9/27/2017 - 6:56 PM

Pass data between component method 2

<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>
import { Component } from '@angular/core';

@Component({
  selector: 'main',
  templateUrl: '../app/view/main.html'
})
export class AppMainComponent {
    public crumbFromParent = "Login"
}
<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>
import { Component, Input} from '@angular/core'

@Component({
    selector: 'navigation',
    templateUrl: '../app/view/navigation.html',

})
export class NavigationComponent {
    @Input() crumb: string;
}