Custom component using controlValueAccessor - ts-Lint error: component was used before defined

Question

this is the provider used in my @component decorator of RatingInputComponent.

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => RatingInputComponent),
      multi: true
    }
  ]

i am getting an ts-lint error: 'RatingInputComponent' was used before it was defined. but forwardRef Allows to refer to references which are not yet defined.

i am using Angular 9.1.3

whole ts file.

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'rating-input',
    templateUrl: './rating-input.component.html',
    styleUrls: ['./rating-input.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => RatingInputComponent),
            multi: true
        }
    ]
})
export class RatingInputComponent implements ControlValueAccessor {
    @Input() items: string[];
    @Input() defaultText = 'Select Item';

    public value: string;
    public isDisabled: boolean;

    private onChange;

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

    registerOnTouched(fn: any): void {
    }

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

    writeValue(value: any): void {
        this.value = value;
    }

    selectItem(item): void {
        this.onChange(item);
        this.value = item;
    }
}

any guidance appreciated.

Answer 1

The typescript code is valid, seems to be an issue with the linter. You can disable this lint rule by setting "no-use-before-declare": false .