Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call function on input text change in angular 2

I want to call the type script function on input change of text box, and its working for me. But it call on every change, I want to call when the minimum number of character in the text box are 5.

export class StudentMaintenanceComponent implements OnInit {
    @Component({
        selector: 'app-student-management',
        template: `<input placeholder="" class="form-control" type="text" [maxlength]="5" (input)="SearchData($event.target.value)">`,
        styleUrls: ['./app-student-management.css']
    })

    SearchData(_no: string) { // should be called when minimum no of character are 5 in the text field.
        console.log(_no);
    }
}
like image 633
Usf Noor Avatar asked Jan 03 '18 18:01

Usf Noor


People also ask

How do I detect a text input change event with angular?

When we enter tags one character at a time, Angular performs change detection after every character is entered. So, if we type in “foo”, the Angular binding records for the <input> element value attribute will follow this sequence: "" , "f" , "fo" , "foo" .

How does Onchange work in angular?

Onchange is a property of an input element in Angular 2 that specifies what should happen when the user types into it or selects a value from its dropdown list. The argument SimpleChanges is passed to the method ngOnChanges() which returns the new and previous input values following modifications.

What is Keyup event in angular?

(keyup): (keyup) is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls. When a user presses and releases a key, the (keyup) event occurs.


1 Answers

You can write something like this

(input)="$event.target.value.length > 5 && SearchData($event.target.value)"

You can also use template reference variable like this

<input placeholder="" #textInput class="form-control" type="text" [maxlength]="5" (input)="textInput.value.length > 5 && SearchData(textInput.value)">
like image 61
Arshmeet Avatar answered Oct 12 '22 21:10

Arshmeet