Angular error: Can't resolve all parameters for Component

Question

I'm doing an Angular exercise for an Udemy course and ran into an issue I can't solve. I'm trying to create a ClickComponent object with a unique id so each one has the next iteration (i.e. 1, 2, 3, etc). However, I'm getting the above error when I try to add parameters to the constructor to take this id from the class that is calling it. Here are the two relevant files:

app.component.ts

import { Component } from '@angular/core';
import {ClickComponent} from './click/click.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  display = false;
  clicks = [];

  toggleDisplay() {
    this.clicks.push(new ClickComponent(this.clicks.length + 1));
    this.display = !this.display;
  }
}

click.component.ts

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

@Component({
  selector: 'app-click',
  templateUrl: './click.component.html',
  styleUrls: ['./click.component.css']
})
export class ClickComponent implements OnInit {
  id;
  timeStamp;

  constructor(id: number) {
    this.id = 0;
    this.timeStamp = new Date();
  }

  ngOnInit() {
  }

}

The error goes away if I remove the parameter from the click constructor and just set the id to 0, so it clearly has something to do with how I set up that constructor, but I don't understand what's wrong as I'm brand new to Angular. Thanks.

At very minimum, you aren't passing in anything to new ClickComponent() in app.component.ts. It's expecting a number to be passed such as new ClickComponent(123) based on the constructor your specified in click.component.ts. — Alexander Staroselsky
– Alexander Staroselsky, Commented May 8, 2018 at 19:59
Another thing to keep in mind, to render components dynamically, you will need to utilize the Dynamic Component Loader. You will not simply be able to instantiate new components and add them to the DOM to have them render/resolve/interpolate/etc. — Alexander Staroselsky
– Alexander Staroselsky, Commented May 8, 2018 at 20:01
Angular uses constructor parameters to resolve dependencies. If you want to set a value for use inside the component, use either a local variable that you initialize to what ever value directly, or @Input to pass in a value from the hosting component. — R. Richards
– R. Richards, Commented May 8, 2018 at 20:06
@AlexanderStaroselsky Sorry for the mixup. I was passing something in but took it out for troubleshooting purposes. I edited my post and added it back. — user2271605
– user2271605, Commented May 8, 2018 at 22:31

eprats · Accepted Answer · 2018-05-14 14:00:40Z

1

I think you should not put the id at the constructor but put the @Input() before the id field.
That's the way params are passed from parent to child in angular.

Edited:
If you want to know how to pass parameters to a dynamically created component, take a look at this other thread: Angular2 - Pass values to a dynamic component created with ComponentFactory

edited May 14, 2018 at 14:00

answered May 8, 2018 at 20:21

eprats

3453 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2271605 Over a year ago

So then how do I pass the value in when I create a new ClickComponent in the parent?

Collectives™ on Stack Overflow

Angular error: Can't resolve all parameters for Component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related