Difference between angular submit and ngSubmit events? : <p>I'm building a form in an Angular 2 application.</p>

<p>Html gives me the submit event. In Angular I could listen to this event using a (submit) event binding. On top of that, Angular adds the ngSubmit event, which I could listen to, using (ngSubmit).</p>

<p>I understand that submit comes from html, and ngSubmit from Angular. What I don't understand is why I would need to listen to a special ngSubmit event, instead of the normal submit event.</p>

<p>I created a <a href="https://plnkr.co/edit/p8XsiS2YKtNAHjuwZHqx?p=preview" rel="noreferrer">plunker</a> that listens to both events and both seem to do the same thing.</p>

<p>What is the difference between listening to (submit) and (ngSubmit)?</p>

<pre><code>@Component({
  selector: 'my-app',
  template: `
    &lt;form (submit)='onSubmit(form)' (ngSubmit)='onNgSubmit(form)' novalidate #form='ngForm'&gt;
      &lt;input type='text' name='input' [(ngModel)]='input' required&gt;
      &lt;input type='submit' value='Submit' required&gt;
    &lt;/form&gt;
  `,
})
export class App {

  input : string;

  onSubmit(form): void {
    console.log(`submit: ${this.input}, valid: ${form.valid}`);
  }

  onNgSubmit(form): void {
    console.log(`ng-submit: ${this.input}, valid: ${form.valid}`);
  }
}
</code></pre>
