Angular - User Input

The term user input in Angular refers to the data or information that users provide to an Angular application through various means such as typing, clicking, or speaking. It helps users to interact with and control the application. Furthermore, it is necessary for a user-friendly and dynamic experience.

In Angular, you can make use of the DOM element structure of HTML to change the values of the elements at run time. This change occurs based on user input. You can use it to gather feedback, make decisions, and perform tasks based on user preferences and needs.

Taking User Input in Angular

In Angular, we can get input from user through the following ways −

• Using Template-Driven Forms
• Using Reactive Forms
• Using Event Binding
• Using Template Reference Variables

Using Template-Driven Forms

Template-driven forms are used for simple use cases where form validation and control are not too complex. These forms use the ngModel directive for two-way data binding between the form fields and the component class. Creating this type of form is very easy as it requires minimal setup.

Example

Let's see an example of template driven form where we take input from user.

app.component.html

 <form #userForm="ngForm"> <label for="name">Name:</label> <input type="text" id="name" [(ngModel)]="user.name" name="name" required> <label for="email">Email:</label> <input type="email" id="email" [(ngModel)]="user.email" name="email" required> <button (click)="submitForm()">Submit</button> </form> 

app.component.ts

 import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, FormsModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { user = { name: '', email: '' }; submitForm() { console.log(this.user); } } 

Using Reactive Forms

Reactive forms are used when you need more control over form validation, form elements, and form states. They are built using FormControl, FormGroup, and FormArray classes. These forms are used for larger, more complex forms.

Example

In this example, we will see a reactive form where we take input from user.

app.component.html

 <form [formGroup]="userForm" (ngSubmit)="submitForm()"> <label for="name">Name:</label> <input id="name" formControlName="name" required> <label for="email">Email:</label> <input id="email" formControlName="email" required> <button type="submit" [disabled]="!userForm.valid">Submit</button> </form> 

app.component.ts

 import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { userForm: FormGroup; constructor(private fb: FormBuilder) { this.userForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]], }); } submitForm() { console.log(this.userForm.value); } } 

Using Event Binding

Angular provides option to listen and fire action for each user initiated event in a typical web application. Event binding is the process of targeting an event in a HTML element/component and set a responder for the target event. An event can be set for an HTML element/component by including the event name inside the bracket (( )) and assigning a template statement. The template statement will execute once the event is fired by the user.

Example

Let us create a button and set an action to the button's click event.

Step 1: Create a submit button.

 <button type="submit>Submit</button> 

Step 2: Create an action method in the component.

 myAction() { alert('I am the action function for click event'); } 

Step 3: Bind our myAction() method to click event of the button as shown below −

 <button type="submit" (click)="myAction()">Submit</button> 

Now, myAction() will execute whenever the submit button is clicked by the user.

Using Template Reference Variables

The syntax to declare a template reference variables is #var (# along with variable name). Angular allows the variable to be declared as attributes of an element available in the template. The type and value of the template reference variable depend on where it is declared.

1. If a variable is declared inside an element, then it refers to the HTML element.

 <button #btn>Click Here</button> 

Here, btn refers to the button object of type HtmlButtonElement

2. If a variable is declared inside a component, then it refers to the component instance.

 <app-comp #mycomp></app-comp> 

Here, mycomp refers to the component instance and can access the internal of the referenced component.

3. If a variable is declared inside a template (ng-template, a tag used to create template within a template), then it refers to the instance of the template.

 <ng-template #mytemplate> <div>Hi, I am template within the template</div> </ng-template> 

Here, mytemplate refers to the instance of the template.

4. If a variable is declared inside a custom web component, then it refers to the custom HTML element.

 <my-card #mycard>Click Here</my-card> 

Here, mycard refers to the custom web component, my-card

Let us see how to create a template reference variable, firstname to refer to an input element as shown below −

 <input #firstname id="firstname" type="text" name="firstname" value="John" /> 

Here,

• firstname is the template reference variable

• firstname represents the instance of HtmlInputElement element. HtmlInputElement is a type in DOM to represent the input element.

• firstname can access all properties and methods of HtmlInputElement element

The template reference variable can be used in template statement and text interpolation.