Angular No provider for NgControl found in NodeInjector

Question

I'm trying to use a custom select component based on Angular Material in a reactive form. Here is my custom select component:

SelectInputComponent.ts

export class SelectInputComponent implements OnInit {

@Input() data: any;
@Input() label: string;
@Input() optionsKey: any;
@Input() optionsValue: any;

constructor(@Self() public ngCongrol: NgControl) {
  this.ngCongrol.valueAccessor = this;
}

ngOnInit() {
}

writeValue(obj: any): void {}
registerOnChange(fn: any): void {}
registerOnTouched(fn: any): void {}

}

SelectInputComponent.html

<mat-form-field class="{{classNamesParent}}" appearance="fill" >
  <mat-label>{{label}}</mat-label>
  <mat-select value="{{data}}" [formControl]="ngCongrol.control">
    <mat-option *ngFor="let option of optionsKey" value="option">
       {{optionsValue[option]}}
    </mat-option>
  </mat-select>
</mat-form-field>

And this is the way I'm using it in EditProfileComponent.html:

  <app-select-input [label]='"Gender"' [optionsKey]="enumGenderKeys" 
     [optionsValue]="enumGenderValues" [data]="member.gender">
  </app-select-input>

Having to say that I have another text Input custom component as well, which is declared in the same module as the select component but there is no problem with the text Input component.

Shared Module.ts

@NgModule({
 declarations: [
   NavComponent,
   SelectInputComponent,
   TextInputComponent,
 ],
 imports: [
  CommonModule,
  RouterModule,
  ReactiveFormsModule,
  MatDatepickerModule,
  MatNativeDateModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatAutocompleteModule,
 ],
 exports:[
   ToastrModule,
   NavComponent,
   SelectInputComponent,
   TextInputComponent,
 ]
})
export class SharedModule { }

I get the following error in the console and as far as I know, it's related to services and in my case injecting @Self() public ngCongrol: NgControl in the constructor is the reason for the problem.

core.js:6498

   ERROR Error: NG0201: No provider for NgControl found in NodeInjector. Find more at https://angular.io/errors/NG0201
at throwProviderNotFoundError (core.js:245:1)
at notFoundValueOrThrow (core.js:3329:1)
at lookupTokenUsingModuleInjector (core.js:3364:1)
at getOrCreateInjectable (core.js:3466:1)
at Module.ɵɵdirectiveInject (core.js:14756:1)
at NodeInjectorFactory.SelectInputComponent_Factory [as factory] (select-input.component.ts:10:34)
at getNodeInjectable (core.js:3561:1)
at instantiateAllDirectives (core.js:10298:1)
at createDirectivesInstances (core.js:9647:1)
at ɵɵelementStart (core.js:14900:1)