AngularJS 2: Updating variable in parent component using Router

Question

AngularJS 2: Updating variable in parent component using Router

My current app.component looks like the following:

import { Component, Input } from '@angular/core';

import {AuthTokenService} from './auth-token.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor(
        private Auth: AuthTokenService) { };

    isGuest: any = this.Auth.canActivate();
    title = 'app works!';
}

I want to update the isGuest variable from the child component login.component.

In my app.component.html, I have the following code:

<h1>
    {{isGuest}}
</h1>
<router-outlet></router-outlet>

I attempted to modify it using @Output and Emitter, but it didn't work due to angular router being used.

javascript angular typescript

Answer 1

Answer №1

In my opinion, I suggest implementing the Observable pattern in the auth service, similar to what is explained in the Angular documentation (https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service).

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class AuthService {
  /* ... */
  private authStatus = new Subject<string>();
  public authStatus$ = this.authStatus.asObservable();
  /* ... */
  authenticate() {
    /* ... */
    if (authenticated) {
      this.authStatus.next(true);
    } else {
      this.authStatus.next(false);
    }
    /* ... */
  }
  /* ... */
}

Subscribing in your app.component can be done like this:

this.Auth.authStatus$.subscribe(authenticated => {
  /* handle authentication status changes here */
});

To display in your template using the async pipe:

{{ Auth.authStatus$ | async }}

For more information about the Async Pipe, you can visit: https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

Answer 2

In my opinion, I suggest implementing the Observable pattern in the auth service, similar to what is explained in the Angular documentation (https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service).

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class AuthService {
  /* ... */
  private authStatus = new Subject<string>();
  public authStatus$ = this.authStatus.asObservable();
  /* ... */
  authenticate() {
    /* ... */
    if (authenticated) {
      this.authStatus.next(true);
    } else {
      this.authStatus.next(false);
    }
    /* ... */
  }
  /* ... */
}

Subscribing in your app.component can be done like this:

this.Auth.authStatus$.subscribe(authenticated => {
  /* handle authentication status changes here */
});

To display in your template using the async pipe:

{{ Auth.authStatus$ | async }}

For more information about the Async Pipe, you can visit: https://angular.io/docs/ts/latest/api/common/index/AsyncPipe-pipe.html

AngularJS 2: Updating variable in parent component using Router

Answer №1

Similar questions

Initiate the function one time

There is no value inputted into the file

Avoid reloading the page when submitting a form using @using Html.BeginForm in ASP.NET MVC

Is it possible for an angular directive to transmit arguments to functions within specified expressions in the directive's attributes?

Implement Material UI Card Component in your React Project

AsExpression Removes Undefined from Type More Swiftly Than I Prefer

Removing duplicate entries from a dropdown menu can be achieved by implementing

Error code E11000 is indicating that a duplicate key issue has occurred in the collection "blog-api.blogs" where the index "id_1" is

The process of retrieving data from Firebase Firestore

I'm curious about the meaning of "!" in pseudo-code. I understand that it represents factorial, but I'm unsure of how to properly interpret it

What is the best way to test a try/catch block within a useEffect hook?

Failure when running npm start command in Nest js

JavaScript preloader function isn't functioning properly when paired with a button

Leveraging the power of Firebase and JavaScript to easily include custom user fields during the user

What is the best method for automatically closing the modal window?

Resizing a webpage to fit within an IFRAME

How do I add a "Switch to Desktop Site" link on a mobile site that redirects to the desktop version without redirecting back to the mobile version once it loads?

When using the e.target.getAttribute() method in React, custom attributes may not be successfully retrieved

One click wonder: Easily print any webpage content with just the click of a button!

Tips for updating grid variables in Bootstrap 4 and Angular