Change Md-card-title From App.component.html When Card Has Its Own Component

<app-card></app-card>

is in my app.component.html and displays the card component

<md-card class="card" style="box-shadow: none;">
<md-card-header>
  <md-card-title style="font-size:x-large;">
  </md-card-title>

</md-card-header>

<md-card-content>

  <p class="flow-text">
    {{placeholder}}  </p>
</md-card-content>
<md-card-actions>
  <button md-button>LIKE</button>
  <button md-button>SHARE</button>
</md-card-actions>

above is my card

I want to change the card title (ultimately also the content) without having the clutter of the card html code in my app.component.html . I cant seem to figure out how I pass a string from my card.component.ts into my cards when having more than one string.

1. Card should have title {{title1}} 2.nd card should have title {{title2}}

How do I use ngFor to repeat the number of cards displayed to the count of the strings in an array and therefore pass the string at which the index is into the card title?

You can have a component called card.component with:

import { Component } from '@angular/core';
@Component({    
    selector: 'my-card',
    template:`
        <md-card class="card" style="box-shadow: none;">
         <md-card-header>
           <md-card-title style="font-size:x-large;">
            {{title}}
          </md-card-title>
         </md-card-header>    
        <md-card-content>
        <p class="flow-text">
          {{placeholder}}  </p>
       </md-card-content>
       <md-card-actions>
       <button md-button>LIKE</button>
       <button md-button>SHARE</button>
       </md-card-actions>
`

})

export class CardComponent{
    @Input() placeholder: string;
    @Input() title: string;
}

And finally to use it you just need:

<my-card [title] = "title" [placeholder] = "placeholder"></my-card>