angular - Call function from one component to another to update the button

Question

AuthComponent

    import { TopnavComponent } from './../topnav/topnav.component';
    import { Component, OnInit,ViewContainerRef } from '@angular/core';
    import {AuthService} from "./auth.service";
    import { NgForm } from '@angular/forms';
    import {Router} from "@angular/router";
    import {Profile} from "./auth.model";
    import {Http,Request,Response,Headers, RequestOptions} from "@angular/http";
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { Observable } from 'rxjs';

    @Component({
        selector: 'app-auth',
        templateUrl: './auth.component.html',
        styleUrls: ['./auth.component.css'],
        providers:[TopnavComponent]
    })
    export class AuthComponent implements OnInit {
    constructor(private authUser: AuthService, private router: Router,public topnav:TopnavComponent) {};
    callMethod() {

           document.cookie = 'uid='+ this.isAuthSuccess.profile[0].guProfileId;
                    document.cookie = 'isInstructor='+ this.isAuthSuccess.profile[0].isInstructor;
                    document.cookie = 'isStudent='+ this.isAuthSuccess.profile[0].isStudent;
                    this.topnav.changeState();
                    this.router.navigateByUrl('/home');
            });
        }
    }

TopnavComponent

import { Component, OnInit } from '@angular/core';
import {Http,Request,Response,Headers, RequestOptions} from "@angular/http";
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Router, ActivatedRoute} from "@angular/router";
import { Observable } from 'rxjs';
import {AuthService} from "../auth/auth.service"

@Component({
    selector: 'app-topnav',
    templateUrl: './topnav.component.html',
    styleUrls: ['./topnav.component.css']
})
export class TopnavComponent implements OnInit {
    hideCourse=false;
    constructor(private router: Router,private auth:AuthService) { }
    changeState(){
        this.hideCourse=!this.hideCourse;
    }
}

TopnavComponent.html

<button (click)="callMethod()">Submit</button>
<ul class="navbar-nav mr-auto" *ngIf="hideCourse">
    <li class="nav-item dropdown">
        <a class="nav-link" routerLink="/auth">Sign In</a>
    </li>
</ul>

I have above components in my Angular 2 website,where I'm calling callMethod where I do certains things and then calling topnavComponent's changeState to hide the Sign In button from navigation bar. I'm getting the correct value for hideCourse property which is assigned to *ngIf, but it's not updating the view as wanted.

Can anyone tell me a solution for my scenario.

Thanks.

Answer 1

I won't try to understand your code, but simply give you the code to inject a component instance into another component (remember to import the unkown key words).

constructor(
  @Inject(forwardRef(() => TopnavComponent)) private topnav: TopnavComponent
)

Now you can use

this.topnav.changeState();