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);
}
}
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" .
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.
(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.
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)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With