Currently working on an Angular assignment as part of my online course and encountered a roadblock that I can't seem to overcome. My goal is to establish a ClickComponent object with a distinct identifier so that each instance increments the id (e.g., 1, 2, 3, etc). Unfortunately, I'm facing an error when attempting to introduce parameters into the constructor to retrieve this unique id from the calling class. Below are snippets from the two relevant files:
task.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 issue disappears when I eliminate the parameter from the click component's constructor and simply set the id to 0. It appears to be related to how I structured the constructor, but being relatively new to Angular, I'm struggling to grasp what exactly is wrong with it. Any advice would be greatly appreciated. Thanks.