Error: src/app/app.module.ts:18:5 - error NG6001:

Question

This is EmployeeCountComponent it is declared in AppMpdule Declaration Array successfully and i am using this as a nested component in Employee-listComponent I wanted to pass the Employee-listComponent data to the three properties declared in the EmployeeCountComponent i.e from Employee-listComponent to EmployeeCountComponent for that I have added Input decorators to EmployeeCount Class as it is getting input data from Employee-listComponent

but i am encountering the following error

The class 'EmployeeCountComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator

 EmployeeCountComponent
   ~~~~~~~~~~~~~~~~~~~~~~

src/app/employee-count/employee-count.component.ts:10:14
10 export class EmployeeCountComponent implements OnInit { ~~~~~~~~~~~~~~~~~~~~~~ 'EmployeeCountComponent' is declared here.

Error: src/app/employee-count/employee-count.component.ts:21:15 - error NG2003: No suitable injection token for parameter 'all' of class 'EmployeeCountComponent'. Consider using the @Inject decorator to specify an injection token.

21 constructor(all:number, male:number, female:number) { ~~~

src/app/employee-count/employee-count.component.ts:21:19 21 constructor(all:number, male:number, female:number) { ~~~~~~ This type is not supported as injection token.

1.EmployeeCountComponent

EmployeeCountComponent

2. EmployeeeListComponent EmployeeeListComponent

Answer 1

You have to run npm install when creating new components. Hot reload doesn't seem to be able to add the component.

You can check the same here

You can also ng serve

Answer 2

Remove the arguments to the employee-count.component.ts constructor

export class EmployeeCountComponent implements OnInit {

    @Input()
    all: number;
    @Input()
    male: number;
    @Input()
    female: number;

    constructor(){
      //remove the arguments
    }
    ngOnInit():void{

    }
}

and if you haven't already, set the inputs for all, male and female in employee-list.component.html

<app-employee-count [all]="countAllEmployees" [male]="countMaleEmployees" [female]="countFemaleEmployees"></app-employee-count>

Explanation

If you're constructing the class with html, e.g. by adding <app-employee-count></app-employee-count>, you can't pass it any arguments to the constructor. The constructor for a component is for dependancy injection, e.g. adding services.

Answer 3

Remove the parameters which you have used in the parameters of the constructor.

If you want to pass data from child component (EmployeeCountComponent) to parent component(EmployeelistComponent ) then you have to use @output and EventEmitter. It helps to pass the data from the EmployeeCountComponent to EmployeelistComponent

Refer this link : https://angular.io/guide/inputs-outputs