How to link the class in md-grid-tile?

advertisements

I have an model as:

 tiles = [
    {text: 'One', cols: 1, rows: 1 , class: 'red-hours'}];

And I tried to display block with class

<md-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="tile.cols"
    [rowspan]="tile.rows"
    [style.background]="tile.color">
    [class]="tile.class"
    {{tile.text}}
  </md-grid-tile>

Also how to insert custom content in each field?


You can use attribute binding for this. In my example, I only set the class. You can modify this to also set other properties

app.component.html:

<div   *ngFor="let tile of tiles" >
   <span  [attr.class] = "tile.class"> {{tile.text}}</span>
</div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
   styles: ['.red {color: red};']
})

export class AppComponent {

  tiles = [
    {text: 'One', class: 'red'}];
}