Angular 2 service subscription updates only after a second click on a component with routerLink (s)

Question

Angular 2.0 rc 5, router version 3.0.0 rc1

I have an angular 2 application that uses a service to communicate between components, a parent component with <router-outlet>and a child component that has routerLinks. I am using NgClass to update CSS classes for animation. I added the service so that NgClass is updated when one of the router links is clicked in addition to changing the output <router-outlet>. However, I managed to update NgClass after double-clicking on routerLinks. Clicking the same routerLink or the other does not matter if he double-clicked the subscription update.

gif page behavior

My parent component .ts:

import {Component} from '@angular/core';
import {NgClass} from '@angular/common';
import {NavService} from 'components/nav.service';
import {Subscription} from 'rxjs/Subscription';
import {ButtonComponent} from 'components/button.component';
import {MenuComponent} from 'components/menu.component';
import {CardContainerComponent} from 'components/cardcontainer.component';

@Component({
    selector: 'juan',
    templateUrl: 'app/components/app.component.html',
    directives: [ NgClass ,ButtonComponent, MenuComponent, CardContainerComponent],
    providers: [NavService]
})
export class AppComponent {
    isPushed = false;
    subscription: Subscription;
    public initiatePush(){
        this.isPushed = !this.isPushed;
    }
    constructor(private navService: NavService){
        this.subscription = this. navService.navToggle$.subscribe(
            isPushed => {
                this.isPushed = isPushed;
            }
        )   
    }
}

parent component .html:

<div class="frame" [ngClass]="{'pushed' : isPushed}">

    <div id="o-wrapper" class="o-wrapper">
        <div class="menu">

        </div>
        <div class="menu-cover">
        </div>
        <animated-button (triggerer)="initiatePush($event)"></animated-button>

    </div>
    <router-outlet></router-outlet>
    <div class="footer"><p class="credit">by <a href="mailto:[e-mail]?Subject=Site%20query" class= "email-link">Juan Asher</a></p></div>
    <div id="c-mask" class="c-mask" [ngClass]="{'is-active' : isPushed}"></div>
    <main-menu></main-menu>
</div>

.ts service:

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

@Injectable()
export class NavService{
    private navToggleSource = new Subject<boolean>();
    navToggle$ = this.navToggleSource.asObservable();
    toggleNav(isPushed: boolean) {
        this.navToggleSource.next(isPushed);
    }
}

.ts:

import {Component} from '@angular/core';
import {SlidingButtonComponent} from './sliding-button.component';
import {NgClass} from '@angular/common';
import {NavService} from './nav.service';

@Component({
    selector: 'main-menu',
    templateUrl: 'app/components/menu.component.html',
    directives: [SlidingButtonComponent, NgClass],
    providers: []
})
export class MenuComponent {
    isSlided = false;
    isClicked = false;
    public initiateSlide(){
        this.isSlided = !this.isSlided;
    }
    constructor(private navService: NavService) {}
    public toggleFocus(){
        this.isClicked = !this.isClicked;
        this.navService.toggleNav(this.isClicked);  
    }
}

.html:

<nav class="c-menu">
    <ul class="c-menu__items">
        <li class="c-menu__item"><a (click)="toggleFocus()" class="c-menu__link" routerLink="/card-container" routerLinkActive="active">Home</a></li>
        <li class="c-menu__item"><sliding-button (slider)="initiateSlide($event)"></sliding-button></li>
    </ul>
</nav>
<div class="login-slider" [ngClass]= "{'is-slided' : isSlided}">
    <div class="slider-content">
        <input type="email" class="input-field" placeholder="Email Address">

        <input type="password" class="input-field" placeholder="Password">  
        <button type="submit" class="button button-block">Login</button>
    </div>
    <div class="slider-tab">
        <ul class="c-menu__items">
            <li class="c-menu__item"><a (click)="toggleFocus()" class="c-menu__link last-item" routerLink="/join" routerLinkActive="active">Join</a></li>
        </ul>
    </div>
</div>

, ?

20/08/2016

@KrishnrajRana ?

constructor(private navService: NavService){}

ngOnInit() { 
    this.subscription = this. navService.navToggle$.subscribe(
        isPushed => {
            this.isPushed = isPushed;
        }
    )   
}

, .

Answer 1

, , , true, , false, .

export class MenuComponent {
    isSlided = false;
    isClicked = false;
    public initiateSlide(){
        this.isSlided = !this.isSlided;
    }
    constructor(private navService: NavService) {}
    public toggleFocus(){
        this.isClicked = !this.isClicked;
        this.navService.toggleNav(this.isClicked);  
    }
}

export class MenuComponent {
    isSlided = false;
    isClicked = false;
    public initiateSlide(){
        this.isSlided = !this.isSlided;
    }
    constructor(private navService: NavService) {}
    public toggleFocus(){
        this.navService.toggleNav(this.isClicked);  
    }
}