Angular button (onClick) event not working

Question

I have a button that should call a function that logs the user out. For some reason, the event is not working at all. Here is the code: TS File:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.sass']
})
export class LoginComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private auth: AuthService) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      email: '',
      password: ''
    })
  }

  submit(){
    this.auth.tryLogin(this.form.getRawValue())
    .subscribe(res => {
      console.log(res);
    })
  }

  public logout(){
    console.log("logout")
    this.auth.tryLogout()
    .subscribe(res => {
      console.log(res);
    })
  }

  // public testJWT(){
  //   alert("asd")
  //   this.auth.testAuth()
  //   .subscribe(res => {
  //     console.log(res)
  //   })
  // }
}

And the HTML:

<form [formGroup]="form" (submit)="submit()">
    <h1>Anmelden</h1>
    <input formControlName="email" type="email" placeholder="Email Addresse" required> 
    <br>
    <input formControlName="password" type="password" placeholder="Passwort" required>
    <br>
    <button type="submit">Anmelden</button>
</form>

<button (onClick)='logout()'>log out</button>

I have no idea what I am doing wrong, I tried using this.logout(), I tried type="button" in the html, but nothing worked for me.

deepakchethan · Accepted Answer · 2021-10-06 12:39:20Z

18

It should be click and not onClick.

<button (click)='logout()'>log out</button>

Syntax reference:

syntax

You can refer to the official wiki https://angular.io/guide/event-binding for more info

edited Oct 6, 2021 at 12:39

answered Oct 6, 2021 at 12:17

deepakchethan

5,6401 gold badge26 silver badges34 bronze badges

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

2 Comments

Kleecarim Over a year ago

Thank you! I totally missed that when I read the docs

Ghost Rider Over a year ago

With the latest version of Material, it has added pointer-events rule and sets it to None. So we have to override, to allow the click events. In html like "class=allow-pointer-events" and inside style sheet .allow-pointer-events { pointer-events: all; }

deepakchethan · Accepted Answer · 2021-10-14 12:52:05Z

3

The event is "click". you are using onClick which is incorrect. Please change onclick to click and check.

<button (click)='logout()'>log out </button>

Reference: https://angular.io/guide/user-input#binding-to-user-input-events

edited Oct 14, 2021 at 12:52

deepakchethan

5,6401 gold badge26 silver badges34 bronze badges

answered Oct 6, 2021 at 13:42

Shweta Badhe

762 bronze badges

1 Comment

Kleecarim Over a year ago

thank you, I totally missed that. I looked at the docs but apparenlty I didnt read the code properly.

Collectives™ on Stack Overflow

Angular button (onClick) event not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related