그리드에서 파이프를 사용하여 데이터 형식 지정 Ignite UI for Angular

사용자에게 데이터를 제공하는 방법은 매우 중요합니다. 데이터 소스의 데이터를 뷰어에 있는 그대로 표시할 수 없는 경우가 많습니다. 사용자는 보다 몰입감 있는 데이터 프레젠테이션이 필요합니다. 아래 나열된 데이터 소스를 고려해 보겠습니다.

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

템플릿에서 igxGrid의 인스턴스를 정의하고 data 속성을 product 배열에 바인딩하는 것으로 시작하겠습니다. 아래 코드 목록과 같이 Grid Ignite UI for Angular 추가하는 것은 간단합니다.

<igx-grid [data]="products"
          [autoGenerate]="true"
          width="960px">
</igx-grid>

autoGenerate 속성을 true로 설정하고 있습니다. 이렇게 하면 Ignite UI 데이터 소스에서 읽어 모든 열을 자동으로 생성합니다.  그리드는 아래 이미지와 같이 생성됩니다.

보시다시피 데이터는 훨씬 더 몰입감 있는 방식으로 표시됩니다. 또한 Ignite UI 기본적으로 ExpiryDate 열에 날짜 파이프가 적용되어 있음을 알 수 있습니다. 파이프를 처음 사용하는 경우 Angular 파이프는 데이터를 입력으로 사용하여 원하는 출력으로 변환합니다. angular 라이브러리는 많은 내장 파이프를 제공합니다.

• UpperCasePipe
• LowerCasePipe
• 커런시파이프(CurrencyPipe)
• PercentPipe
• DatePipe etc.

자동 생성 true를 사용하면 Ignite UI date 개체 열에 DatePipe를 적용하며, 그렇지 않으면 ExpiryDate가 아래 이미지와 같이 렌더링됩니다.

따라서 autogenerate true에서 Ignite UI는 데이터에 필요한 파이프를 적용하지만 여전히 몇 가지 제한 사항이 있습니다. 예를 들어, 사용자 파이프를 사용하거나 적용할 파이프를 수동으로 선택할 수 없습니다.

열을 더 잘 제어하려면 IgxGrid에서 수동으로 구성해야 합니다.  예를 들어 특정 열의 스타일이나 데이터를 형식화하려면 아래 코드 목록과 같이 igxGrid에서 열을 수동으로 구성한 다음 열 템플릿을 사용해야 합니다.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
        <igx-column field="Id" header="Id"></igx-column>
        <igx-column field="Title" header="Title"></igx-column>
        <igx-column field="ExpiryDate" header="Expiry Date"></igx-column>
        <igx-column field="Price" header="Price"></igx-column>
        <igx-column field="Rating" header="Rating"></igx-column>
 </igx-grid>

특정 열의 경우 이제 헤더, 열 속성 및 데이터 형식을 구성할 수 있습니다. Price 열에 통화 파이프를 적용하려는 경우 아래 코드 목록과 같이 수행할 수 있습니다.

ng-template은 HTML 템플릿과 비슷하며 재사용이 가능하며 렌더링될 때 콘텐츠를 대체합니다. ng-template 을 사용하여 제공 할 수 있습니다.

1. Column template
2. 헤더 템플릿
3. 페이지 매김 템플릿 등

ng-template에 두 개의 매개변수를 전달하고 있습니다.

1. ixgCell : 이 템플릿이 특정 그리드 셀에 적용되는지 확인합니다.
2. let-value : 셀에 전달된 데이터 값을 포함합니다.

ng-template에 대한 다른 가능한 입력 매개변수는 다음과 같습니다.

1. igxHeader : 열 헤더에 템플릿 적용
2. let-column : contains column as input data

사용자 정의 헤더 템플릿에 초점을 맞춘 다른 게시물에서 이에 대해 자세히 설명하겠습니다.

이제 통화 및 날짜 파이프를 사용하여 Price 및 ExpiryDate 열을 수정해 보겠습니다.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
    <igx-column field="Id" header="Id"></igx-column>
    <igx-column field="Title" header="Title"></igx-column>
    <igx-column field="ExpiryDate" header="Expiry Date">
        <ng-template igxCell let-value>
            {{ value | date }}
        </ng-template>
    </igx-column>
    <igx-column field="Price" header="Price">
        <ng-template igxCell let-value>
            {{ value | currency }}
        </ng-template>
    </igx-column>
    <igx-column field="Rating" header="Rating"></igx-column>
</igx-grid>

아래 이미지와 같이 그리드가 렌더링됩니다.

IgxGrid에서 사용하는 동안 파이프에 매개변수를 전달할 수도 있습니다.

파이프에서 지원하는 매개 변수를 원하는 수만큼 파이프에 전달할 수 있으며, 예를 들어 아래와 같이 추가 매개 변수를 통화 파이프에 전달할 수 있습니다.

날짜 파이프로 작업하는 경우 아래와 같이 매개 변수를 전달할 수 있습니다.

사용자 지정 파이프를 만든 경우 아래와 같이 사용할 수도 있습니다.

여기서 firstcharacteruppercase는 사용자 정의 파이프입니다. 만드는 방법을 잘 모르는 경우 여기에서 자세히 알아보세요.

간단한 파이프뿐만 아니라 더 나은 시각화를 위해 열 데이터의 서식을 지정할 때 다른 Ignite UI for Angular 구성 요소를 사용할 수도 있습니다.  별도의 블로그 게시물에서 다루겠습니다. 아래와 같이 igxGrid에서 데이터를 사용하기 위해 모든 것을 합쳐 보겠습니다.

<igx-grid [data]="products" [autoGenerate]="false" width="960px">
    <igx-column field="Id" header="Id"></igx-column>
    <igx-column field="Title" header="Title">
        <ng-template igxCell let-value>
            {{ value | firstcharacteruppercase }}
        </ng-template>
    </igx-column>
    <igx-column field="ExpiryDate" header="Expiry Date">
        <ng-template igxCell let-value>
            {{ value | date :'fullDate'}}
        </ng-template>
    </igx-column>
    <igx-column [sortable]='true' field="Price" header="Price">
        <ng-template igxCell let-value>
            {{ value | currency:'CAD':'symbol':'4.2-2'}}
        </ng-template>
    </igx-column>
    <igx-column field="Rating" header="Rating">
    </igx-column>
</igx-grid>

이제 그리드가 아래 이미지와 같이 렌더링된 것을 볼 수 있습니다.

이제 자동 생성된 열을 사용하는 경우 원하는 방식으로 데이터 형식을 지정하는 방법에 대한 질문이 있을 수 있습니다. 너비, 정렬, 페이징, 데이터 형식, 헤더 스타일, 고정 등과 같은 열의 다른 속성을 어떻게 설정할 수 있습니까?  다른 블로그 게시물에서 다루겠습니다. 지금으로서는이 게시물이 유용하고 Grid에서 템플릿을 사용하여 데이터를 형식화하는 것이 얼마나 쉬운지 알고 Ignite UI for Angular. 여기에서 Ignite UI for Angular Grid에 대해 자세히 알아볼 수 있습니다.  파이프에 대한 자세한 내용은 Desktop to Web: Transforming Data with Angular Pipes 비디오를 시청하세요