Here is the setup I have for a text input and a warning message:
<input
id="tenancyName"
#tenancyName="ngModel"
class="register__form__control"
autoFocus
type="text"
placeholder="Business Name"
[(ngModel)]="model.tenancyName"
name="tenancyName"
required
maxlength="64" />
The warning div displays if the business name entered is already taken:
<div [class.taken]="taken === true" class="register__warning">
<p>Sorry, Business Name is already taken</p>
</div>
In my component.ts file, I have implemented debouncing using lodash:
import ... from ...
import * as _ from 'lodash';
@component...
export class...
taken: boolean;
ngOnInt() {
const businessInput = <HTMLInputElement>document.getElementById('tenancyName');
businessInput.addEventListener('keyup', _.debounce(this.checkTenantName, 1000));
}
checkTenantName() {
this.taken = true;
}
Although the function works, the CSS class doesn't get applied to the warning div. Any help would be great.
EDIT
I added a console.log() in the checkTenantName() function:
checkTenantName() {
this.taken = true;
console.log(this.taken);
}
The console outputs true, so I'm unsure why the .taken class isn't being added to the div.
Thank you