Hide buttons in navbar

Question

I have application in angular 2 with typescript. I create some navbar and auth page in head.

This is my structure:

• app
  • login.comoponent.ts
  • login.template.html
  • navbar.component.ts
  • navbar.template.html

The first page of my app is auth page with navbar. And in navbar i have 2 buttons, my task is hide this button in login page, and show on next page (when user is auth in app).

I create this var - showButtons: boolean = false in navbar.component, and in navbar.template i add this directive: *ngIf="showButtons". And after that, my buttons hide permamently, and its normal, because i dont create a true value in login.component. This is my login.component:

import { Component } from "@angular/core";
import { Router } from "@angular/router";
import { Observable } from "rxjs/Rx";

import "rxjs/add/observable/of";
import "rxjs/add/operator/catch";

import { ServerDataComponent } from "../work_with_server/src/server.data.component";
import { IUsernamePasswordModelType } from "../work_with_server/src/types.component";

@Component({
    templateUrl: "./login.template.html",
})
export class LoginComponent {

    public model: IUsernamePasswordModelType = { password: "", username: "" };
    public loading: boolean = false;
    public error: string = "";
    private router: Router;
    private authenticationService: ServerDataComponent;

    constructor(router: Router, authenticationService: ServerDataComponent) {
        this.router = router;
        this.authenticationService = authenticationService;
    }

    public login(): void {
        this.loading = true;
        this.authenticationService.isLogin(this.model.username, this.model.password)
            .catch((err: boolean) => Observable.of(false))
            .subscribe((result: boolean) => {
                if (result === true) {
                    this.router.navigate(["/table_per"]);
                } else {
                    this.error = "Wrong password or login";
                    this.loading = false;
                }
            });
    }
}

And this is my navbar.template:

<nav class="navbar-fixed-top navbar-inverse ">
<div class="container-fluid" style="vertical-align: center">
<div class="navbar-header">
  <b class="navbar-brand">Ласковость</b>
</div>
<ul class="nav navbar-nav">
  <li>
    <a style="padding-left: 3px; padding-right: 3px">
      <button class="btn btn-default" (click)="backClicked()">
        <a class="glyphicon glyphicon-arrow-left"></a>
      </button>
    </a>
  </li>
  <li>
    <a style="padding-left: 3px"> 
      <button class="btn btn-default" (click)="reloadPage()">
        <a class="glyphicon glyphicon-refresh"></a>
        </button>
    </a>
  </li>
</ul>
<ul class="nav navbar-nav navbar-right">
  <li>
    <a><span></span>
      <logout>
      </logout>
     </a>
  </li>
</ul>

But i really dont know how to bind one value or variable in one component.

Answer 1

service

import { Injectable } from '@angular/core';
import {Subject} from 'rxjs/Subject';

@Injectable()
export class ShowService {
    // Observable string sources
    private newShowSource = new Subject<boolean>();

    // Observable string streams
    newShow = this.newShowSource.asObservable();

  constructor() { }
  changeShow(show: boolean) {
        this.newShowSource.next(show);
    }


}

in NavbarComponent

import {Subscription} from 'rxjs/Subscription';
import {ShowService} from './services/show.service';

export class NavbarComponent { 
  subscription: Subscription;
  public loading: boolean = false;

  constructor(private showService : ShowService){
       this.subscription = showService.newShow.subscribe(
            loading => {
                this.loading = loading;
            }
}
}

then in Login Component

import {ShowService} from './services/show.service';

export class LoginComponent { 


  constructor(private showService : ShowService){

}
 changeLoad(){
      this.showService.changeShow(true);// ucan call this and you can chenge the value
  }
}