Exchange value of a variable of another Angular component

Question

Hello, I have a Component that is called errorLog, inside it has a method called Logout, which is called when I click on 1 logout button, but after displacing you and redirected the login page, however I wanted to display a text on this login screen that is displayed after being dropped, so in my login templateHTML I created this following code:

<div *ngIf="deslogado" class="alert alert-warning">
          <span>Você foi deslogado</span>
</div>

then only will this div appear when the 'dropped' variable is TRUE, so how do I say in my Komponent that the Component login variable is true? when to redirect *ngIf to give true?

Answer 1

To share variables between components Angular recommends the use of services.

Service are singletons, that is, only one instance exists during the application lifecycle and should be used to maintain the status of information between components.

A classic example in the use of services is precisely to keep the user information logged in.

@Injectable()
export class AccountService {
  account?: Account

  login(): void {
    account = { id: 1111, name: 'Marcelo' }
  }

  isLoggedIn(): boolean {
    return !!account
  }

  loggout(): void {
    account = undefined
  }
}

In the above service we use the class member account to store logged user information.

The method login must execute its login process and store the result in the Account variable.

The method isLoggedIn validates the variable information account and returns true if it has been filled in, or if the user is logged in.

The method loggout only configures the variable account as undefined or by removing the logged-in user information.

Once defined the service, you need to inject it into your Komponent to display the information, so as I understand do the following

@Component({
  selector: 'page-login'
  ...
})
export class PaginaLoginComponent {

  constructor(
    private accountService: AccountService
  ) { }

  isLoggedIn() {
    return this.accountService.isLoggedIn()
  }

}

and in the Component template PaginaLoginComponent

<div *ngIf="isLoggedIn()" class="alert alert-warning">
  <span>Você foi deslogado</span>
</div>

Okay, I hope I’ve helped, remember to share information regarding the overall status of the application we use Angular services.

[]s

Answer 2

You can also pass a flag in the url

import { ActivatedRoute } from '@angular/core';

@Component(...)
export class SeuComponent {
    public justLogout = false;

    constructor(
        private route: ActivatedRoute
    ) {
        this.route.queryParams.subscribe(
            (params: any) => {
                if (params['logout'] === 'true') {
                    this.justLogout = true;
                }
            }
        );
    }
}

In your template

<div *ngIf="justLogout" class="alert alert-warning">
    <span>Você foi deslogado</span>
</div>

So just redirect like this

http://sua-url/login?logout=true

Or in the template using routerLink

<a routerLink="/login" [queryParams]="{logout: true}">link</a>

or by mandatory navigation

import { Router } from '@angular/core';

constructor(
        private route: ActivatedRoute
    ) {}

goToLogin() {
    this.route.navigate(['/login'], {queryParams: {'logout': 'true'}});

}

Reference:

https://www.youtube.com/watch?v=B7mc184O4x0