When a user types a specific value into a text input, I want to display a specific div.
This is what my template looks like:
<input type="text" id="jobTitle"
(click)="autoCompleteClick()"
(keypress)="autoCompleteKeypress()" name="autocomplete"
placeholder="Job Title" value="" >
The autoCompleteKeyPress function is supposed to be triggered by the keypress event and looks like this:
autoCompleteKeypress() {
if (this.jobTitle == 'bar' || this.jobTitle == 'Bar'){
alert('BOO!');
}
}
Currently just testing with an alert to make sure it's working.
Here is my full component code:
import { Component } from '@angular/core';
import { Input } from '@angular/core';
@Component({
selector: 'sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['../variables.less', './sign-up.component.less']
})
export class SignUpComponent {
imgPath = 'assets/images/';
//acInput = document.getElementById('jobTitle');
@Input() jobTitle : string;
autoCompleteKeypress() {
if (this.jobTitle == 'bar' || this.jobTitle == 'Bar'){
alert('BOO!');
}
}
I am new to Angular2 and Typescript, so any suggestions are welcome. Thank you!