How To Add Image To Angular Grid Cell

Question

I want to add a full image to one of the grids. How may I add an image to a grid cell. Below is the component.ts file:

export interface Tile {
  color: string;
  cols: number;
  rows: number;
  text: string;
  fontSize: string;
  fontFamily: string;
}
@Component({
  selector: 'grid-list-dynamic-example',
  templateUrl: 'grid-list-dynamic-example.html',
  styleUrls: ['grid-list-dynamic-example.css'],
})
export class GridListDynamicExample {
  tiles: Tile[] = [

    { text: 'One', cols: 5, rows: 1, color: 'lightblue', fontSize: '20', 
fontFamily: 'Rubik'},
    { text: 'Two', cols: 3, rows: 1, color: 'lightgreen', fontSize: '20', 
fontFamily: 'Roboto Condensed'},
    { text: 'Three', cols: 2, rows: 2, color: 'lightpink', fontSize: 
'25', fontFamily:  'Rubik'  },
    { text: 'Four', cols: 3, rows: 1, color: '#DDBDF1', fontSize: '30' , 
fontFamily: 'Roboto Condensed' },
{ text: 'Five', cols: 3, rows: 1, color: 'lightblue', fontSize: '35', 
fontFamily:  'Roboto Condensed'},
    { text: 'Six', cols: 2, rows: 1, color: 'lightyellow', fontSize: 
'40',fontFamily: 'Rubik' },
  ];
}

This is the html file:

<mat-grid-list cols="5" rowHeight="20vh" [gutterSize]="'0px'">
  <mat-grid-tile
      *ngFor="let tile of tiles; let i = index"
      [colspan]="tile.cols"
      [rowspan]="tile.rows"
      [style.background]="tile.color"
      [ngStyle]="{'font-size': 'calc(' + tile.fontSize + 'px + 0.5vw)', 
'font-family': tile.fontFamily +', sans-serif;'}"
      [ngClass]="'tile' + i"
   >
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

Here is the stackblitz

I was able to add the image in ts file as color but the image is only a fraction of the image expanded in the grid cell.

Which image? In which cell? Based on chich criteria? What have you tried? Maybe that can get you started? stackblitz.com/edit/angular-sse4n5-abq63c?file=app/… — JB Nizet
– JB Nizet, Commented Mar 25, 2019 at 12:01

nevzatopcu · Accepted Answer · 2019-03-25 12:33:53Z

2

check edited StackBlitz example code.

https://stackblitz.com/edit/angular-sse4n5-qbqb1e

I changed your interface like that

export interface Tile {
  color: string;
  cols: number;
  rows: number;
  text: string;
  fontSize: string;
  fontFamily: string;
  paddingTop: string;
  marginLeft: string;
  marginRight: string;
  hasImage?: boolean;
  imageUrl?: string;
}

at your html inside tag:

 <ng-container *ngIf="tile.hasImage; else textContainer">
   <img [src]="tile.imageUrl"/>
 </ng-container>

 <ng-template #textContainer>
    {{tile.text}}
  </ng-template>

If you want to show image to any tile just add both attributes

{... imageUrl: "https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" ,hasImage: true, ...}

answered Mar 25, 2019 at 12:33

nevzatopcu

1,0851 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How To Add Image To Angular Grid Cell

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related