Event Binding

Chapter Objectives

• Understand event binding

  Learn how to handle user interactions in Angular components.

• Implement event handlers

  Create methods to respond to user events in your components.

• Use event binding syntax

  Master the syntax for binding events in Angular templates.

• Work with form submission events

  Learn how to properly handle form submissions using ngSubmit.

Event

An event is an action or occurrence, like a user clicking a button, typing in a field, or a page loading, that your application can respond to. The action of reacting to an event is called event listening.

Event binding

Event binding enables you to respond to user actions or occurrences by executing a function when an event is triggered. In the current situation, you will listen to the event triggered by clicking the ‘Create task’ button and execute a function.

Form Submission with ngSubmit

When working with Angular reactive forms, we use the (ngSubmit) directive instead of a simple (click) event on the submit button. The ngSubmit directive is specifically designed to handle form submissions properly.

To implement form submission, define an ngSubmit event handler on the <form> element. The ngSubmit event is emitted by the form directive when the form is submitted. This will invoke our component’s submit() method, which we’ll implement later.

On the HTML <button> tag, add type="submit" to ensure it triggers the form submission when clicked.

<form [formGroup]="form" (ngSubmit)="submit()" class="flex flex-col gap-2 m-auto">
    //...
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Why use ngSubmit instead of click?

We use (ngSubmit) instead of a normal (click) event because (ngSubmit) captures the form submission, whether by clicking the button or pressing “Enter”, and it works with Angular form validation. A button click event does not handle these cases and does not trigger the form submission in the standard way.

The ngSubmit directive ensures that Angular handles the form submission properly.

1. Update the file src/app/task-form/task-form.html.

   task-form.html

   
    <form [formGroup]="form" (ngSubmit)="submit()" class="flex flex-col gap-2 m-auto">
      <fieldset class="fieldset w-full">
        <legend class="fieldset-legend">Name</legend>
        <input formControlName="name" type="text" class="input w-full" placeholder="Type here" />
      </fieldset>
   
    <fieldset class="fieldset">
      <legend class="fieldset-legend">Description</legend>
      <textarea
        formControlName="description"
        class="textarea w-full h-24"
        placeholder="Description"
      ></textarea>
    </fieldset>
   
    <button type="submit" class="btn btn-primary" (click)="submit()">Submit</button>
    </form>

submit Function

You will create a submit function to handle form submission. For this step, you will only log the form value to the console.

1. Update the file src/app/task-form/task-form.ts.

   task-form.ts

   @Component({
     selector: "app-task-form",
     // ...
   })
   export class TaskForm {
     form = new FormGroup({
       title: new FormControl(''),
       description: new FormControl('')
     });
   
     submit() {
       console.log("Task created", this.form.value);
     }
   }

2. Open your browser’s Devtools console.

3. Fill in the title and description fields and click the ‘create task’ button.

4. When clicking the ‘create task’ button, you should see the form data displayed in the console.

What you've learned

You have learned how to listen for form submission events using ngSubmit to trigger a function and understand why this approach is preferred over simple click events when working with Angular reactive forms.