How to show a message on click in angular4 when user clicks on a button

Question

i am struck in designing login page, i am using angular4 formmodule, i want to show some message on clicking sign in button but i am unable to do the same, please help me. Thank You in advance.

here is my html code,

<div class="container">
    <h1>Hi Champ</h1>
    <form #heroForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
       required>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="Password" class="form-control" id="password">
      </div>

      <div class="form-group">
      <label for="power">Role</label>
      <br>
      <select class="form-control" id="power" required>
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
      </select>
</div>

      <button type="button" class="btn btn-default" (click)="signin()">SignIn</button>
    </form>
</div>

and the code in component is totally empty, please help me,

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

import { Hero } from '../hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent{


   powers = ['Admin', 'Looser'];

   signin(){
   console.log("Hello");
   }

}

Answer 1

Change your <form> <button> tag and signin method like this:

<form (ngSubmit)="signin(heroForm)" #heroForm="ngForm">  
<button type="submit" class="btn btn-default">SignIn</button>

import { NgForm } from '@angular/forms'; 
export class HeroFormComponent{
   signin(form: NgForm){
   console.log("Hello");
   }  
}

Before proceeding, I strongly recommend you to read Submit the form with ngSubmit in order to gain a greater understanding of Angular form concepts.

And make sure that you have included FormsModule in your app.module.ts file

import { FormsModule } from '@angular/forms';

@NgModule({ 
  declarations: [ ],
  imports: [ FormsModule ],
  providers: [ ]
})