# How to give a custom object to an Angular component?

I have a little application that display counter, with the number of days between an event and the actual date. I made it for learning Angular.

I have a list of counters, and each counter can be seen, in the future with its own views, in a list. I want to delete a counter but for that task I need to give an object to a custom angular component. But when I try to retrieve it my component, it is undefined. Is Angular can only give primitive type ?

My counter model :

    export class Counter {
picture: string;
synopsis: string;
constructor(public title: string, public date: Date) {
}
}


I call my list of counter with that code :

     <div *ngFor="let counter of counters">
<app-display-test title="{{ counter.title }}"
date="{{ counter.date }}"
counter="{{counter}}">
</app-display-test>
</div>


My display model :

    export class DisplayTestComponent implements OnInit {

@Input() title: string;
@Input() date: Date;
@Input() counter: Counter;

constructor() {
}

ngOnInit() {
console.log(this.title);
this.calculateCUrrentDate(); // my method for calculate the time
console.log(this.counter);
console.log(this.date);
}
}


In the ngOnInit method the tittle and the date have a value but the counter input is undefined, and I don’t understand why

Source: New feed
Source Url How to give a custom object to an Angular component?