Angular 9: Abstract component's children not inheriting its attributes

Question

I have a module that has components with similar attributes, so I created an abstract MyFilter<T> component that has a set of attributes with an @Injectable decorater. After upgrading to Angular 9 I'm getting warnings in the console

Can't bind to 'form' since it isn't a known property of 'my-text-filter'.

and errors because the children components are not recognizing the parent's attributes. Here's some code:

@Injectable()
export abstract class MyFilter<T> {

  @Input() form: FormGroup;
  @Input() filterOpened: boolean;
  @Input() enableSubmit: boolean;
  @Output() filterUsed = new EventEmitter<T>();

  abstract useFilter();
}

and here's a child component:

@Component({
  selector: 'my-text-filter',
  templateUrl: './text-filter.html',
  styleUrls: ['./text-filter.scss']
})
export class MyTextFilter extends MyFilter<TextFilter> implements OnInit, OnChanges {

  constructor() {
    super();
  }

  ngOnInit() {
    this.form.get('value').valueChanges.pipe( // ERROR: cannot find 'get' of undefined
        debounceTime(50)
    ).subscribe(() => this.useFilter());
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes) // this doesn't get logged in the console, 
                         // even if I comment out what's in ngOnInit
  }

  useFilter() {
  }

}

Answer 1

You need to use the @Directive decorator to be able to extend it from another component:

@Directive()
export abstract class MyFilter<T> {

  @Input() form: FormGroup;
  @Input() filterOpened: boolean;
  @Input() enableSubmit: boolean;
  @Output() filterUsed = new EventEmitter<T>();

  abstract useFilter();
}