CODEWITHSUNDEEP
javascriptangulartypescriptangular7
Testing Anurag
Testing Anurag

Reputation: 643

changing the text on a button on click

I am working with Angular 7 and I want to change text on button every time It click either it should be login or logout

I am putting my code below:

ts file:

export class HeaderComponent implements OnInit {

  text: any;

  constructor() {
    this.loadDataFromApi();
  }

  ngOnInit() {
      if (this.token == null) {
        this.text == 'login';
        alert(this.text);

      } else if (this.token) {
         this.token == 'logout';
         alert(this.text);
      }
   }

}

An alert undefined is coming

html file: 

 <button type="button"> {{text}}</button>

Upvotes: 2

Views: 243

Answers (5)

Pranay Rana
Pranay Rana

Reputation: 176886

try , instead of this.token == null try !this.token(this checks for undefiend as well as null and it recommended way )

   if(!this.token){
      this.text = 'login';
      alert(this.text);

    } else if (this.token){
      this.text== 'logout';
      alert(this.text);
    }

Upvotes: 2

shuaib
shuaib

Reputation: 71

Basically, you are checking if auth token is there then you are making the text as logout and token is not their show login.

In your case seems this.token is undefined as default

that's why in the alert it's showing undefined.

Two conditions will not work

it should be like 

if (this.token) {//The user is logged in so log out should show.
    this.text = 'logout';
    alert(this.text);

  } else {//The user is logged out  in so login should show
     this.token == 'logout';
     alert(this.text);
  }

Please check first the value of this.token, whether the value is set or not.

Upvotes: 0

veben
veben

Reputation: 22262

After the else you are modifying this.token and not this.text.

Moreover, You should use =, not == to assign this.text. Change your code like that:

ngOnInit() {
    if (this.token === null) {
        this.text = 'login';
        alert(this.text);

    } else if (this.token) {
        this.text = 'logout';
        alert(this.text);
    }
}

PS: Where is defined your token variable? I can't see it in your .ts file.

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39432

You're using a Comparison Operator(==) instead of the assignment operator(=). Change that and it should work just fine. Something like this:

export class HeaderComponent implements OnInit {

  text: any;

  constructor() {}

  ngOnInit() {
    this.loadDataFromApi();
    if (this.token) {
      this.text = 'logout';
      alert(this.text);
    } else {
      this.text = 'login';
      alert(this.text);
    }
  }
}

PS: this.loadDataFromApi is most probably async in nature and the code below this call would get executed without waiting for it, thus leading to unexpected behavior. So in most of the cases, you would get login in the alert.

Upvotes: 4

Sivaramakrishnan
Sivaramakrishnan

Reputation: 739

You should use assignment = operator instead of comparison == operator

this.text ='login';

 export class HeaderComponent implements OnInit {

    text: any;
    constructor( );

        this.loadDataFromApi();
      }
    ngOnInit() {

        if(this.token == null){
          this.text ='login';
          alert(this.text);

        } else if (this.token){
          this.token = 'logout';
          alert(this.text);

        }
    }

Upvotes: 2

Related Questions