title: How to pass object as component input in ngFor
body: <p>I'm trying to iterate over an array of Audio objects (contains 3 strings) and passing the audio in each iteration to a child component.</p>
  <p><strong>app.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>ngOnInit(){
      this.audios = new Array&lt;SoundBoardAudio&gt;();
      this.audios.push(new SoundBoardAudio('Western','La canción del Sheriff.','western.mp3'));
      this.audios.push(new SoundBoardAudio('Olvidelo Amigo','Busquese otro tonto amigo.','olvidelo_amigo.mp3'));
    }
  </code></pre>
  <p><strong>app.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
     &lt;app-soundcard *ngFor=&quot;let audio of audios&quot; soundBoardAudio=audio&gt;&lt;/app-soundcard&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>soundboard.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>export class SoundcardComponent implements OnInit {
  
    audio:any;
  
    constructor() {}
  
    @Input() soundBoardAudio;
  
    ngOnInit() {
      console.log(this.soundBoardAudio);
      let audioSrc = 'assets/audio/'+this.soundBoardAudio.filename;
      this.audio = new Audio(audioSrc);
    }
  ...
  </code></pre>
  <p><strong>soundboard.component.html</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;card&quot; &gt;
    &lt;div class=&quot;card-block&quot;&gt;
      &lt;h2 class=&quot;card-title&quot;&gt;{{soundBoardAudio.name}}&lt;/h2&gt;
      &lt;p&gt;{{soundBoardAudio.desc}}
    &lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  <p>But when I try to read the audio from the child component, I get an undefined value. If I only pass a string instead of an object, it works ok.</p>