How to change text value after button click event Angular 4

Question

After click event on this button (code below)

<button (click)="login()" routerLink="/dashboard" class="btn btn-primary 
primary-login">Login with Google</button>

I wanted to change text value in header h1 to for example dashboard

<h1 class="oap__header--title"  >Welcome in Organizer App</h1>

Below is TypeScript code

login() {
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

Is anyone knows how to achieve that ?? Probably this is really easy but I don't know how to start with this problem

bugs · Accepted Answer · 2018-05-04 10:08:38Z

1

Don't hardcode the string in your HTML, use a property of your component, like this:

<h1 class="oap__header--title">{{ myString }}</h1>

in the TS file you'll have:

myString: string = 'Welcome in Organizer App'
login() {
  this.myString = 'Dashboard'
  this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

answered May 4, 2018 at 10:08

bugs

15.4k6 gold badges53 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change text value after button click event Angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related