After attempting to create a custom input component with debounce functionality, I decided to follow the advice provided in this helpful suggestion.
Although the debounce feature is working, I encountered an issue where the initial value of the input component was not being correctly set.
Below is my implementation:
app.component.ts
import { Component } from '@angular/core';
import { DebInputComponent } from './deb-input/deb-input.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
test:string ='test';
}
app.component.html
<deb-input [(ngModel)]="test" type="text" label="Test" ngDefaultControl>
</deb-input>
<div>{{test}}</div>
deb-input.component.ts
import { Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { Component, Input } from '@angular/core';
@Component({
selector: 'deb-input',
templateUrl: './deb-input.component.html',
styleUrls: ['./deb-input.component.css'],
providers: []
})
export class DebInputComponent {
@Input() label: string;
@Input() type: string="text";
@Input() model: string;
modelChanged: Subject<string> = new Subject<string>();
constructor() {
this.modelChanged
.pipe(debounceTime(1000))
.pipe(distinctUntilChanged())
.subscribe(newValue => {this.model = newValue;
console.log(this.model)});
}
changed(text: string) {
this.modelChanged.next(text);
}
}
deb-input.component.html
<div>
<span>{{label}}</span>
<input [(ngModel)]='model' (ngModelChange)='changed($event)' [type]='type' ngDefaultControl/>
</div>
In order to ensure that the model within the deb-input component is correctly set to "test," what steps should I take?