오늘은 CSS 그리드와 함께 ngStyle을 사용하여 크기 조정이 가능한 그리드를 만드는 방법을 보여드리겠습니다.

승리를 위한 ngStyle

ngStyle은 함수와 같은 표현식에 바인딩하여 스타일을 설정할 수 있는 내장 속성 지시어입니다.

여기 내 card-container.component.html에서 내 getStyles 방법에 바인딩되어 있습니다.

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

내card-container.component.ts 메서드의 이 getStyles는 내가 정의한 스타일이 있는 객체를 반환합니다. 마법은 grid-template-columns 값에 있습니다. columns라는 속성을 전달하기 위해 문자열 보간을 사용하고 있습니다.

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

전체 card-container.component.html 구성 요소를 보면 내가 입력을 사용하고 있음을 알 수 있으며 여기에서 columns 속성 값이 나옵니다.

<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>

전체card-container.component.ts 파일을 보면 columns 속성을 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(${this.columns}, 1fr)`,
      'justify-items': 'center',
    };
  }
}

생각?

이것에 대한 당신의 생각을 듣고 싶습니다. 내가 여기에서 하는 것처럼 입력을 사용하고 싶지 않을 것입니다. 열 수는 설정 페이지 또는 응용 프로그램에 맞는 다른 위치에 들어갈 수 있습니다.

저장소

코드를 보고 싶다면 here에서 확인하실 수 있습니다.