Uncaught Error: Can’t resolve all parameters for CountdownComponent: (?)

i am trying to build a simple component within my app for a countdown. i keep getting this uncaught error whenever i ng serve. please a little help, i am stomped

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ContentComponent } from './content/content.component';
import { CountdownComponent } from './countdown/countdown.component';

@NgModule({
 declarations: [
    AppComponent,
    ContentComponent,
    CountdownComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-count></app-count>

countdown.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-count',
templateUrl: './countdown.component.html',
styleUrls: ['./countdown.component.css']
})

export class CountdownComponent {
dayleft: 100;

constructor(days: any) {
    setTimeout(() => {
        days = this.dayleft;
        days--;
    }, 1000);
}
}

countdown.component.html

<p>{{ daysleft }}</p>

Answer

Yes that right to add days as a pramater to class constructor but here you are not the one how create and initialise the CountdownComponent instant angular do that for you,that why you got an error Can’t resolve all parameters for CountdownComponent: (?) , when you add a pramater to componenet constracter angular try to inject by Angular DI system,in this case you may create inject value and provid this to class constructor by @Inject decorator.

create inject value

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent, CountComponent ],
  bootstrap:    [ AppComponent ],
  providers:[{provide:'days',useValue:100}]
})
export class AppModule { }

component

export class CountComponent implements OnInit {

  id: any; // to clear setInterval 
  constructor( @Inject('days') private days: number) { }

  ngOnInit() {
    this.id = setInterval(() => {
      --this.days
      if (this.days === 0) {
        clearInterval(this.id)
      }
    }, 1000)
  }

}

count template

{{days}}

app component

<app-count></app-count>

stackblitz demo

Another solution is create Input property and use it like @Suren Srapyan said

Leave a Reply

Your email address will not be published. Required fields are marked *