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?