CODEWITHSUNDEEP
angularangular-materialinterpolationangular-material2
Ty Yiu
Ty Yiu

Reputation: 85

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?

Upvotes: 0

Views: 1209

Answers (2)

Alex Beugnet
Alex Beugnet

Reputation: 4071

You can do like @SergioEscudero proposed in his answer, using an Input component interaction, and pass data from your parent to your child components using indexes like you though to.

A more optimal solution would be to use Transclusion as well to create a Card component with dynamic content. This way, you can create your own custom content for each card, which will all have the same base as CardComponent

Upvotes: 1

Sergio Escudero
Sergio Escudero

Reputation: 1894

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>

Upvotes: 5

Related Questions