How to implement a clear icon on my own input component?

I have created a input component which implements the control value accesor. The clearInput() function is not executing at all (I verified this by adding a breakpoint). I have tried adding the stopPropagation before the clearInput in the HTML, but it did not work. How do I make my clearInput() execute when being clicked on?

@Component({
selector: 'my-input',
standalone: true,
imports: [FormsModule, FormErrorComponent, FormControlPipe, InfoIconComponent, CommonModule],
templateUrl: './input.component.html',
styleUrl: './input.component.scss',
})
export class InputComponent implements ControlValueAccessor {
@Input() label: string = '';
@Input() placeholder: string = '';
@Input() info: string = '';

value: string = '';
disabled: boolean = false;

isFocused = signal<boolean>(false);
isTyping = signal<boolean>(false);
isHovering = signal<boolean>(false);
isClicked = signal<boolean>(false);

onChange: (value: string) => void = noop;
onTouched: () => void = noop;

constructor(
@Optional() @Self() public ngControl: NgControl
) {
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}

/** ControlValueAccessor Methods */

writeValue(value: string): void {
this.value = value || '';
}

registerOnChange(fn: any): void {
this.onChange = fn;
}

registerOnTouched(fn: any): void {
this.onTouched = fn;
}

setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}

/** Event Handlers */

onInput(event: Event): void {
const target = event.target as HTMLInputElement;
this.writeValue(target.value);
this.onChange(this.value);
this.isTyping.set(this.value.length > 0);
}

onFocus(): void {
this.isFocused.set(true);
}

onBlur(): void {
this.isFocused.set(false);
this.isTyping.set(false);
this.onTouched();
}

clearInput(): void {
console.log('I expect this to run')
this.value = '';
this.onChange(this.value);
}

/** Utility Methods */

get hasError(): boolean {
return !!this.ngControl?.invalid && !!this.ngControl.touched;
}

@memoize()
isNgControl(): boolean {
return this.ngControl !== null;
}
}


html

<div
class="input-wrapper"
[class.disabled]="disabled"
[class.error]="hasError"
[class.focused]="isFocused()"
[class.typing]="isTyping()"
>
@if (label) {
<label class="input-label" [class.active]="isFocused || value">
{{ label }}
</label>
}
<div class="input-container">
<input
type="text"
class="input"
[placeholder]="placeholder"
[disabled]="disabled"
[(ngModel)]="value"
(input)="onInput($event)"
(focus)="onFocus()"
(blur)="onBlur()"
/>
@if (value && !disabled && isFocused()) {
<i
class="fa fa-solid fa-circle-xmark clear-icon"
(click)=" $event.stopPropagation(); clearInput();"
tabindex="0"
aria-label="Clear input"
></i>
}
</div>

@if (isNgControl()) {
<my-form-error [control]="ngControl.control! | formControl"></my-form-error>
}
</div>

Continue reading...