Angular: call of componenr error : can't bind to xxx since it isn't a known property of yyy

Issue

I created in my Angular project a shared component named useraccount-type. I use it into a form but I have this error message :

Can't bind to 'selectedType' since it isn't a known property of 'app-useraccount-type'.

1. If 'app-useraccount-type' is an Angular component and it has 'selectedType' input, then verify that it is part of this module.
2. If 'app-useraccount-type' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

The html part looks this:

<div [formGroup]="myForm">
    <select class="form-select form-control" id="useraccountType"  formControlName="useraccountType" [(ngModel)]="selectedType">
        <option *ngFor="let t of types" [ngValue]="t.description" >{{t.description}}</option>
    </select>
</div>

The ts part looks this :

import { Component, Input, OnInit } from '@angular/core';
import { ControlContainer, FormGroup } from '@angular/forms';
import { ErrorHandlerService } from 'src/app/services/error-handler.service';
import { RepositoryService } from 'src/app/services/repository.service';
import { environment } from 'src/environments/environment';

// Classes
import { Useraccounttype } from './../../../model/useraccounttype.model';

@Component({
  selector: 'app-useraccount-type',
  templateUrl: './useraccount-type.component.html',
  styleUrls: ['./useraccount-type.component.css']
})
export class UseraccountTypeComponent implements OnInit {
public errorMessage: string = '';

@Input() public types: Useraccounttype[];
@Input() public selectedType?: string ="";
@Input() public myForm: FormGroup;

constructor(private repository: RepositoryService, private controlContainer: ControlContainer, private errorHandler: ErrorHandlerService) { }

  ngOnInit(): void {
    this.myForm = <FormGroup>this.controlContainer.control;
    this.getUserAccountTypes();
    console.log('Selected type' + this.selectedType);
  }

  getUserAccountTypes = () => {
    let apiType: string = environment.apiAddress + 'UserAccountType'; 
    this.repository.getData(apiType)
    .subscribe(response => {
      this.types = response as Useraccounttype[];
    },
    (error) => {
      this.errorHandler.handleError(error);
      this.errorMessage = this.errorHandler.errorMessage;
    })
  }
}

The compent is used in a form like this:

 <form [formGroup]="myForm" autocomplete="off" novalidate>
 ...
  <div class="col-md-12">
   <app-useraccount-type name="useraccountType" id="useraccountType" [formGroup]="myForm" [selectedType]="user?.userAccountType?.shortDescription"></app-useraccount-type>      
  </div>
 ...
 </form>

The error message is on this part :

[selectedType]="user?.userAccountType?.shortDescription"      

Is there anybody has an idee of the problem?

Thanks in advance for your help.

PS: for informations I have imported FormModule and ReactiveFormsModule in the app.module.ts

Solution

Ok problem is finaly solved. I forgot to declare the useraccounttypecomponent in the useraccount.module.ts (in the Declaration part and export part). Thanks

Answered By - Paintbox