title: How can i prevent page reload on form submit angular 7
body: <p>I am not familiar with Angular .Am facing a problem with submit button .When i click on button where type is submit it is reloading the complete page .Instead of calling my service API.</p>
  
  <p>Even i added (keydown.enter)="$event.preventDefault()" on form tag and in Button click method also i tried with event.preventDefault() . But didn't worked.</p>
  
  <p>Please check my below code</p>
  
  <pre><code>&lt;form  #createForm="ngForm" class="login-form text-center" (ngSubmit)="Update()" (keydown.enter)="$event.preventDefault()"&gt;
         &lt;table cellpadding="5" class="mx-auto"&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;label class="white pr-2" for="email" autofocus&gt;Email&lt;/label&gt;
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input name="email" id="email" type="text" [(ngModel)]="email" required  #name="ngModel"class="d-inline-block w-100" &gt;
              &lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td class="text-left"&gt;
  
                  &lt;button class="d-inline-block text-left lh-100" id="login" type="submit"  [disabled]="!createForm.form.valid"&gt;Change Password
                   &lt;/button&gt;&amp;nbsp;
                   &lt;button class="float-right lh-100" style="background-color:grey" [routerLink]="'/login'" &gt;Back to Login&lt;/button&gt;
  
               &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>Here is my .ts code . button update method </p>
  
  <pre><code>Update()
    {
  
     this.userservice.changePassword(this.email).pipe(first())
      .subscribe(
          data =&gt; 
          {
              if(!data.message)
              {
                this.errorMsg = data.message;
              }
             else 
              {
                this.errorMsg = data.message;
              }
          },
          error =&gt; {
            this.errorMsg = error.Message;
          });
  
    }
  
  </code></pre>
  
  <p>Here is the service code</p>
  
  <pre><code> changePassword(EmailId: string) {
  
          return  this.http.get&lt;Validations&gt;(`${environment.apiUrl}/User/SendMail?userName=` + EmailId+`&amp;subject=`+''+`&amp;message=`+''+`&amp;mailType=`+'changepassword');
      }
  
  </code></pre>
  
  <p>app.module.ts File</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { GridModule } from '@progress/kendo-angular-grid';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  
  import { LoginComponent } from './common/login/login.component';
  import { ForgotPwdComponent } from './common/forgotPwd/forgotPwd.component';
  import { BlankComponent } from './common/blank/blank.component';
  import { ResetComponent } from './common/reset/reset.component';
  
  
  
  
  
  @NgModule({
    declarations: [
      AppComponent,
      LoginComponent,
      ForgotPwdComponent,
      ResetComponent,
      BlankComponent,
  
  
    ],
    imports: [
      BrowserModule,
  
      FormsModule,
      AppRoutingModule,
      GridModule,
      BrowserAnimationsModule,
      HttpClientModule,
  
  
    ],
  </code></pre>
  
  <p>please suggest how can i prevent page reload after submit button and execute my service call.</p>