Angular 5: calling method from html

SK.

I am not getting why it is not working.

I am trying to show Login/Logout link based on condtion by calling a method from html. in console I can see it is returning "true", but it never changes the link to "Logout". it is always "Login" on the screen

<ul class="nav navbar-nav navbar-right">
    <li class="nav-item dropdown" [hidden]="!authenticated()">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user" aria-hidden="true"></i> Welcome, {{user}}!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="nav-link dropdown-item" (click)="logout()">Logout</a>
        </div>
    </li>
    <li class="nav-item dropdown" [hidden]="authenticated()">
        <a routerLinkActive="active" routerLink="/login">Login</a>
    </li>
</ul>

component.ts

authenticated() {
    console.log(localStorage.getItem('authenticated'));
    if(localStorage.getItem('authenticated') === 'true') {
        console.log("YES");
        return true;
    } else {
        console.log("NO");
        return false;    
    }
}

Before clicking on Login link enter image description here

After click on Login enter image description here

After entering correct username/password (Her you can see in console it returns true) enter image description here

Faisal

First of all you should not call a function with *ngIf directive, as it will run with every change detection. This can lead to performance overhead. Either use a variable or convert your method into a getter property e.g.

get authenticated(): boolean {
    return localStorage.getItem('authenticated') === true;
}

Secondly, use *ngIf instead of [hidden]:

<ul class="nav navbar-nav navbar-right">
    <li class="nav-item dropdown" *ngIf="authenticated">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-user" aria-hidden="true"></i> Welcome, {{user}}!
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="nav-link dropdown-item" (click)="logout()">Logout</a>
        </div>
    </li>
    <li class="nav-item dropdown" *ngIf="!authenticated">
        <a routerLinkActive="active" routerLink="/login">Login</a>
    </li>
</ul>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Calling an angular component method from classic HTML

From Dev

Multiple times method calling from angular template

From Dev

Angular 5:Calling service method inside custom validator

From Dev

Angular 5: how to refer to a subcomponent method from a parent component HTML template?

From Dev

Dependency Injection in Angular/ Calling a method that belongs to a service from a class

From Dev

HttpErrorResponse when calling .net core method from Angular 8

From

Calling method from a Angular 2 class inside template

From Dev

Calling a method from the constructor in Angular2/IONIC2

From Dev

Common method for calling a node function from Angular Controller

From Dev

calling method from one controller to another controller in angular js

From Dev

Angular 4 - Calling a parent method from a child component not working

From Dev

Angular - Calling method on service from component returns undefined

From Dev

Calling a method in an angular Component from an external JS file

From Dev

Facing issue while calling post method from angular

From Dev

Angular 14 calling Child Component method from Parent Component

From Dev

Calling a typescript method from your html button onclick event

From Dev

Calling a method from a superclass

From Dev

Calling method from view

From Java

Calling method from constructor

From Dev

Calling a method from arraylist

From Dev

Calling a method from a class

From Java

Calling a method from another method

From Dev

Angular 2 call super method from html

From Dev

Angular js Controller method from HTML with a parameter

From Dev

Ionic/Angular - Run method with name from html

From Dev

How to return HTML expression from Angular method?

From Dev

calling javascript function defined in html script tag from angular controller

From Dev

Calling Typescript function from html2canvas in angular 2

From Dev

calling variables from typescript file in html template [angular]

Related Related

  1. 1

    Calling an angular component method from classic HTML

  2. 2

    Multiple times method calling from angular template

  3. 3

    Angular 5:Calling service method inside custom validator

  4. 4

    Angular 5: how to refer to a subcomponent method from a parent component HTML template?

  5. 5

    Dependency Injection in Angular/ Calling a method that belongs to a service from a class

  6. 6

    HttpErrorResponse when calling .net core method from Angular 8

  7. 7

    Calling method from a Angular 2 class inside template

  8. 8

    Calling a method from the constructor in Angular2/IONIC2

  9. 9

    Common method for calling a node function from Angular Controller

  10. 10

    calling method from one controller to another controller in angular js

  11. 11

    Angular 4 - Calling a parent method from a child component not working

  12. 12

    Angular - Calling method on service from component returns undefined

  13. 13

    Calling a method in an angular Component from an external JS file

  14. 14

    Facing issue while calling post method from angular

  15. 15

    Angular 14 calling Child Component method from Parent Component

  16. 16

    Calling a typescript method from your html button onclick event

  17. 17

    Calling a method from a superclass

  18. 18

    Calling method from view

  19. 19

    Calling method from constructor

  20. 20

    Calling a method from arraylist

  21. 21

    Calling a method from a class

  22. 22

    Calling a method from another method

  23. 23

    Angular 2 call super method from html

  24. 24

    Angular js Controller method from HTML with a parameter

  25. 25

    Ionic/Angular - Run method with name from html

  26. 26

    How to return HTML expression from Angular method?

  27. 27

    calling javascript function defined in html script tag from angular controller

  28. 28

    Calling Typescript function from html2canvas in angular 2

  29. 29

    calling variables from typescript file in html template [angular]

HotTag

Archive