Emit property value between two components in angular

Question

I have two angular components Login and navbar and in my app.component.html in do this

app.component.html

    <app-nav-bar></app-nav-bar>
    <router-outlet></router-outlet>
    navbar.component.html
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <h3 [style.color]="'white'">Admin Portal</h3>
        <div class="parent">
          <div class="children right-children">
              <div class="child" [hidden]="!loggedIn"><a mat-flat-button style="cursor: pointer;">Logout</a></div>
         </div>
        </div>
      </mat-toolbar-row>
    </mat-toolbar>

navbar.component.ts

    export class NavBarComponent implements OnInit {
    
      loggedIn = false;
    
      constructor(private loginService:LoginService) {}
    
      ngOnInit(): void {}
    
      toggleDisplay() {
        this.loggedIn = !this.loggedIn;
      }
    }

I want to emit the value of loggedIn property to navbar component when in the login component the user login successfully and display logout button which hidden.

login.component.html

    <div class="container">
      <div [hidden]="loggedIn">
        <mat-grid-list cols="6" [style.margin-top]="'20px'">
          <mat-grid-tile [colspan]="1"></mat-grid-tile>
          <mat-grid-tile [colspan]="4">
            <form (ngSubmit)="onSubmit()">
              <mat-form-field class="example-full-width">
                <mat-label>Username</mat-label>
                <input
                  type="text"
                  matInput
                  [(ngModel)]="credential.username"
                  name="username"
                  id="username"
                  placeholder="Your Username"
                />
              </mat-form-field>
    
              <mat-form-field class="example-full-width">
                <mat-label>Password</mat-label>
                <input
                  type="password"
                  matInput
                  [(ngModel)]="credential.password"
                  name="password"
                  id="password"
                  placeholder="Your Password"
                />
              </mat-form-field>
              <button mat-raised-button type="submit" class="mat-primary">
                Login
              </button>
            </form>
          </mat-grid-tile>
        </mat-grid-list>
      </div>
      <div [hidden]="!loggedIn">
        <h2>You have logged in!</h2>
    </div>
    </div>

login.component.ts

    export class LoginComponent implements OnInit {
    
       credential = {'username':'', 'password' : ''};
       loggedIn = false;
    
      constructor(private loginService: LoginService) { }
    
      onSubmit() {
        this.loginService.login(this.credential.username, this.credential.password).subscribe(
            res => {
            let obj: MyObj = JSON.parse(JSON.stringify(res));
            localStorage.setItem("xAuthToken", obj.token);
                this.loggedIn = true;
            },
            error => {
                console.log(error);
            }
        );
      }
    
      ngOnInit() {
        this.loginService.checkSession().subscribe(
            res => {
            this.loggedIn=true;
            },
            error => {
            this.loggedIn=false;
            }
        );
      }
    }

I want when the logged property has the true value that this can be passed to the navbar component and make the logout button visible. I don't know how to transmit this data between the login component and the navbar.

can you tell me that what you want to achieve in `navbar` component by getting `loggedIn ` variable value? — Fahad Subzwari, Oct 28 '20 at 10:56
Hello @Fahad Subzwari, I want to display the logout button if loggedIn variable value is true. — obela06, Oct 28 '20 at 11:03

score 0 · Answer 1 · answered Oct 28 '20 at 11:09

0

you are already saving your token n localStorage in your login like this

localStorage.setItem("xAuthToken", obj.token);

So in your nav.component.ts just do this

loggedIn: boolean = false;

ngOnInit(){
   this.loggedIn = localStorage.getItem('xAuthToken') ? true : false; 
   // it will be false token will not be there in local storage
}

and then in your navbar.component.html just do this

<div class="children right-children">
      <div class="child" *ngIf="loggedIn"><a mat-flat-button style="cursor: pointer;">Logout</a></div>
</div>

answered Oct 28 '20 at 11:09

Fahad Subzwari

2,109
3
24
52

Hello @Fahad Subzwari, the problem herethe logout button will be displayed all the time, because at the level of my routing I have this const routes: Routes = [ { path : '', redirectTo: '/login', pathMatch: 'full' }, { path: 'login', component: LoginComponent } ];and I have not yet created the logout component to erase the localstorage – obela06 Oct 28 '20 at 12:22

score 0 · Answer 2 · answered Oct 28 '20 at 14:45

0

a usual approach is to use a shared service with an rxjs subject: your login component sets data there and the nav-bar subscribes to changes

answered Oct 28 '20 at 14:45

D Pro

1,756
1
8
15

Hello @D Pro, can you give me an example with my context – obela06 Oct 28 '20 at 14:53
sure. let's say you have `user: Subject` in your LoginService (or any other service). so upon successful login your LoginComponent does `this.loginService.user.next(userInfo)`; meanwhile in the NavbarComponent `this.loginService.user.subscribe(user => this.user = user)` – D Pro Oct 28 '20 at 14:58
@obela06 This is the way to go. You can also find some explanation on how to use a service for intra components communication implementing that kind of solution here: https://stackoverflow.com/questions/58749172/angular-circular-dependency-warning – Luis Oct 28 '20 at 15:13
Hi @D Pro, in my loginService, i have a login login(username: string, password: string) { let url = "http://localhost:8181/token"; let encodedCredentials = btoa(username+":"+password); let basicHeader = "Basic "+encodedCredentials; const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Authorization' : basicHeader }) }; return this.http.get(url,httpOptions); } and in my login.component.ts i create an object credential = {'username':'', 'password' : ''}; my goal is to set loggedIn if the lgin is succes – obela06 Oct 28 '20 at 15:13
right, so in the navbar component this.loginService.user.subscribe(user => this.loggedIn = !!user) – D Pro Oct 28 '20 at 15:20
Hi @D Pro sorry , can you write the complete code with the examples you gave me by looking at the code I put on the post, I don't see how to do it – obela06 Oct 28 '20 at 15:24

Emit property value between two components in angular

2 Answers2