title: How to give a custom object to an Angular component?
body: <p>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.</p>
  
  <p>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 ?</p>
  
  <p>My counter model :</p>
  
  <pre class="lang-js prettyprint-override"><code>    export class Counter {
        picture: string;
        synopsis: string;
        constructor(public title: string, public date: Date) {
        }
      }
  </code></pre>
  
  <p>I call my list of counter with that code :</p>
  
  <pre class="lang-html prettyprint-override"><code>     &lt;div *ngFor="let counter of counters"&gt;
          &lt;app-display-test title="{{ counter.title }}" 
                            date="{{ counter.date }}"
                            counter="{{counter}}"&gt;
          &lt;/app-display-test&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>My display model :</p>
  
  <pre class="lang-js prettyprint-override"><code>    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);
        }
      }
  </code></pre>
  
  <p>In the ngOnInit method the tittle and the date have a value but the counter input is undefined, and I don't understand why</p>