Dynamically change number of columns in a grid using ngStyle

Today I'll show you how I used ngStyle along with CSS grid to create a resizeable grid.

ngStyle For The Win

ngStyle is a built-in attribute directive that lets you set styles by binding to an expression such as a function.

Here in my card-container.component.html I am binding to my getStyles method.

  <div class="cards-grid" [ngStyle]="getStyles()">
    <app-card
      *ngFor="let band of bands; index as i"
      [bandData]="bands[i]"
    ></app-card>
  </div>

This getStyles in my card-container.component.ts method returns an object with my defined styles. The magic is in the grid-template-columns value. I am using string interpolation to pass in a property called columns.

 public getStyles() {
    return {
      display: 'grid',
      'grid-template-columns': `repeat(${this.columns}, 1fr)`,
      'justify-items': 'center',
    };
  }

If we look at the entire card-container.component.html component, you will see that I'm using an input and this is where the value for the columns property comes from.

<div class="card-container">
  <div class="cards-header">
    <mat-form-field>
      <mat-label>Columns</mat-label>
      <input matInput type="number" min="1" max="5" [(ngModel)]="columns" />
    </mat-form-field>
  </div>
  <div class="cards-grid" [ngStyle]="getStyles()">
    <app-card
      *ngFor="let band of bands; index as i"
      [bandData]="bands[i]"
    ></app-card>
  </div>
</div>

If we look at the entire card-container.component.ts file you will see that I initialize the columns property to 4.

import { Component, OnInit } from '@angular/core';

import * as bandData from './powermetal.json';

@Component({

  selector: 'app-card-container',

  templateUrl: './card-container.component.html',

  styleUrls: ['./card-container.component.scss'],

})

export class CardContainerComponent implements OnInit {

  public columns: number = 4;

  public bands: any = (bandData as any).default;

constructor() {}

  ngOnInit(): void {}

public getStyles() {

    return {

      display: 'grid',

      'grid-template-columns': repeat(</span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">columns</span><span class="p">}</span><span class="s2">, 1fr),

      'justify-items': 'center',

    };

  }

}

Thoughts?

I'd love you hear your thoughts on this. I don't think you would want to use an input like I'm doing here. The number of columns could go in to a settings page, or wherever else it fits in to the application.

Repository

If you want to see the code, you can check it out here.