0

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.

user2271605
  • 135
  • 1
  • 10
  • 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 May 08 '18 at 19:59
  • Another thing to keep in mind, to render components dynamically, you will need to utilize the [Dynamic Component Loader](https://angular.io/guide/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 May 08 '18 at 20:01
  • Angular uses constructor parameters to resolve [dependencies](https://angular.io/guide/dependency-injection-pattern). 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`](https://angular.io/guide/component-interaction) to pass in a value from the hosting component. – R. Richards May 08 '18 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 May 08 '18 at 22:31

1 Answers1

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

eprats
  • 345
  • 3
  • 9