Angular List View 구성 요소 개요

The Ignite UI for Angular List component displays rows of items and supports one or more header items as well as search and filtering of list items. Each list item is completely templatable and supports any valid HTML or Angular component. The list component also providers built in panning functionality, templates for empty and loading states, and supports virtualization for large lists using the IgxForOf directive.

Angular List Example

The following example represents a list populated with contacts with a name and a phone number properties. The IgxList component uses igx-avatar and igx-icon to enrich the user experience and expose the capabilities of setting avatar picture and different icon for favorite a contact. In addition, the List View expose sorting capabilities achieved by using our filtering pipe.

Getting Started with Ignite UI for Angular List

Ignite UI for Angular List View 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

ng add igniteui-angular

Ignite UI for Angular에 대한 전체 소개는 시작 항목을 참조하십시오.

다음 단계는 다음 단계를 가져오는 것입니다.IgxListModule 안에 app.module.ts 파일.

Note

This component can utilize the HammerModule optionally.It can be imported in the root module of the application in order for touch interactions to work as expected..

// app.module.ts

import { HammerModule } from '@angular/platform-browser';
import { IgxListModule } from 'igniteui-angular/list';
// import { IgxListModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxListModule, HammerModule],
    ...
})
export class AppModule {}

또는16.0.0 독립 실행형 의존성으로 가져오IgxListComponent 거나, 토큰을IGX_LIST_DIRECTIVES 사용해 컴포넌트와 그 지원 컴포넌트, 명령어를 가져올 수도 있습니다.

// home.component.ts

import { HammerModule } from '@angular/platform-browser';
import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
// import { IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-list>
        <igx-list-item isHeader="true">Header</igx-list-item>
        <igx-list-item>Item 1</igx-list-item>
        <igx-list-item>Item 2</igx-list-item>
        <igx-list-item>Item 3</igx-list-item>
    </igx-list>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_LIST_DIRECTIVES, HammerModule]
    /* or imports: [IgxListComponent, IgxListItemComponent, HammerModule] */
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular List module or directives imported, you can start using the igx-list component.

Using the Angular List

Then in the template of our contacts component we can create our list, but what if currently (or at some point in the future) we have no items in it? In this case, the Angular list provides us with a default template that is used when the list is empty. We can always provide our own template for the look of our empty list by simply using the igxEmptyList directive. In this case, the default template will not be used:

<!--contacts.component.html-->

<igx-list>
    <ng-template igxEmptyList>
        <p class="empty">No contacts! :(</p>
    </ng-template>
</igx-list>

빈 템플릿에 대한 스타일은 다음과 같습니다.

/* contacts.component.css */

.empty {
    color: rgba(0, 153, 255, 1);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
}

모든 것이 잘 되었다면 빈 목록은 다음과 같습니다.

Sometimes there may be a delay in your data loading. In this case you can set the list's isLoading property to true and a default template will inform the user regarding the ongoing data loading process. You can also provide your own loading template using the igxDataLoading directive:

<!--contacts.component.html-->

<igx-list>
    <ng-template igxDataLoading>
        <p class="loading">Patience, we are currently loading your data...</p>
    </ng-template>
</igx-list>

/* contacts.component.css */

.loading {
    color: rgba(255, 153, 0, 1);
    font-size: 25px;
    font-weight: 600;
    text-shadow: 2px 1px 2px rgba(150, 150, 150, 1);
}

Add List Items

목록이 비어 있을 때를 위한 템플릿이 있으면 좋지만 이제 몇 가지 항목을 추가해 보겠습니다. 다음 코드를 추가하여 간단한 항목 목록을 얻을 수 있습니다.

<!--contacts.component.html-->

<igx-list>
    <igx-list-item isHeader="true">Header</igx-list-item>
    <igx-list-item>Item 1</igx-list-item>
    <igx-list-item>Item 2</igx-list-item>
    <igx-list-item>Item 3</igx-list-item>
</igx-list>

모든 것이 순조롭게 진행되면 브라우저에 다음이 표시됩니다.

게임을 조금 더 강화하고 목록 항목을 강화해 보겠습니다. 이름과 이름 아래에 전화번호가 표시된 연락처의 Angular 목록을 만들고 싶다고 가정해 보겠습니다. 구성 요소 타입스크립트 파일에서 연락처 목록을 정의할 수 있습니다.

// contacts.component.ts
...
public contacts = [{
    name: "Terrance Orta",
    phone: "770-504-2217"
}, {
    name: "Richard Mahoney",
    phone: "423-676-2869"
}, {
    name: "Donna Price",
    phone: "859-496-2817"
}, {
    name: "Lisa Landers",
    phone: "901-747-3428"
}, {
    name: "Dorothy H. Spencer",
    phone: "573-394-9254"
}];

이제 렌더링할 데이터가 있으므로 일부 마크업을 설정해 보겠습니다. 기본적으로 스타일을 지정하려면 목록 항목과 함께 제공되는 일부 지시문을 사용할 수 있습니다.

다음 예제에서 그 중 일부를 어떻게 사용할 수 있는지 살펴보겠습니다.

<!--contacts.component.html-->

<igx-list>
  <igx-list-item isHeader="true">
    Contacts
  </igx-list-item>
  <igx-list-item *ngFor="let contact of contacts">
    <h4 igxListLineTitle>{{ contact.name }}</h4>
    <p igxListLineSubTitle>{{ contact.phone }}</p>
  </igx-list-item>
</igx-list>

Both directives igxListLineTitle and igxListLineSubTitle gives our list items some default look.

이제 Angular 목록은 다음과 같아야 합니다.

Adding Avatar and Icons

We can use some of our other components in conjunction with the IgxList component to enrich the experience and add some functionality. We can have a nice picture avatar to the left of the name and phone values. Additionally, we can add a star icon to the right of them to allow the user to favorite a contact. To do that let's grab the IgxAvatar and IgxIcon modules and import them in our app.module.ts file.

// app.module.ts

...
import { IgxListModule } from 'igniteui-angular/list';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxListModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxAvatarModule, IgxIconModule],
})
export class AppModule {}

Next, we need to add some more information to our contact object, like a photo source for our avatar and a isFavorite property to indicate the contact's favorite status.

// contacts.component.ts

public contacts = [{
    name: 'Terrance Orta',
    phone: '770-504-2217',
    photo: 'https://randomuser.me/api/portraits/men/27.jpg',
    isFavorite: false
}, {
    name: 'Richard Mahoney',
    phone: '423-676-2869',
    photo: 'https://randomuser.me/api/portraits/men/1.jpg',
    isFavorite: true
}, {
    name: 'Donna Price',
    phone: '859-496-2817',
    photo: 'https://randomuser.me/api/portraits/women/50.jpg',
    isFavorite: false
}, {
    name: 'Lisa Landers',
    phone: '901-747-3428',
    photo: 'https://randomuser.me/api/portraits/women/3.jpg',
    isFavorite: false
}, {
    name: 'Dorothy H. Spencer',
    phone: '573-394-9254',
    photo: 'https://randomuser.me/api/portraits/women/67.jpg',
    isFavorite: true
}];

좋습니다. 이제 연락처 목록의 템플릿을 업데이트하여 아바타와 아이콘을 표시해 보겠습니다. 이번에도 목록 지시문 중 일부를 사용하여 이를 수행할 수 있습니다.

<!--contacts.component.html-->

<igx-list>
  <igx-list-item isHeader="true">
    Contacts
  </igx-list-item>
  <igx-list-item #item *ngFor="let contact of contacts;">
      <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
      <h4 igxListLineTitle>{{ contact.name }}</h4>
      <p igxListLineSubTitle class="phone">{{ contact.phone }}</p>
      <span igxListLine>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, laborum.</span>
      <igx-icon igxListAction [color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
  </igx-list-item>
</igx-list>

• igxListThumbnail is meant to be used if we need to add some kind of media at the beginning of our list items. The directive will wrap the target element in our case igx-avatar in a container that will provide some default position and spacing.
• igxListAction is meant to be used for list items that have some kind of action or metadata, for example, switch, radio-button, checkbox, etc. In our case the action is will be represented by an igx-icon. Again, the directive will wrap the target element in a container that will have the correct position and spacing.
• igxListLine is meant to be used if we need some text in-between igxListThumbnail and igxListAction the directive will make sure that the text position, spacing and alignment will look great with the other two directives around.

다음으로 우리는 Igx아이콘 토글하는 구성 요소 즐겨찾기 연락처 개체의 속성입니다.

// contacts.component.ts

...
toggleFavorite(item: IgxListItem) {
    const contact = this.contacts[item.index - 1];
    contact.isFavorite = !contact.isFavorite;
}

Let's also allow the user to choose the size of the list by using the --ig-size CSS custom property. We will do this by importing the IgxButtonGroupModule and using the IgxButtonGroup to display all size values. This way whenever one gets selected, we will update the size of the list.

// app.module.ts
...
import { IgxButtonGroupModule } from 'igniteui-angular/button-group';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [..., IgxButtonGroupModule]
})

<!--contacts.component.html-->

<igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
...
<igx-list>
    ...
</igx-list>

// contacts.component.ts

public size = 'large';
public sizes;

public ngOnInit() {
    this.sizes = [
        { label: 'large', selected: this.size === 'large', togglable: true },
        { label: 'medium', selected: this.size === 'medium', togglable: true },
        { label: 'small', selected: this.size === 'small', togglable: true }
    ];
}

public selectSize(event: any) {
    this.size = this.sizes[event.index].label;
}


@HostBinding('style.--ig-size')
protected get sizeStyle() {
    return `var(--ig-size-${this.size})`;
}

그리고 모든 작업의 결과는 다음과 같습니다.

List Items Panning

Now that we have such a beautiful Angular list with contacts and their phone numbers, why don't we implement an ability to call a contact. The IgxList has the perfect solution for this - list item panning. To do this you have to implement the following steps:

• Enable the panning using the allowLeftPanning and/or the allowRightPanning properties
• 왼쪽 및/또는 오른쪽 패닝을 위한 템플릿 정의
• 목록 항목의 패닝 이벤트를 처리하고 원하는 작업을 수행합니다.

The following example demonstrates how to handle both left and right panning. The event handler for right panning shows a toast message. The event handler for the left panning deletes an item from the IgxList.

Note

Please note that the list item removal is an application task. The IgxList itself cannot remove items from the data source because the IgxList does not have reference to the data source.

예제의 HTML 코드는 다음과 같습니다.

<!-- contacts.component.html -->

<igx-list [allowLeftPanning]="true" [allowRightPanning]="true"
  (leftPan)="leftPanPerformed($event)" (rightPan)="rightPanPerformed($event)">
  <ng-template igxListItemLeftPanning>
    <div class="listItemLeftPanningStyle">
      <igx-icon [color]="white" style="margin-left:10px">delete</igx-icon>Delete
    </div>
  </ng-template>
  <ng-template igxListItemRightPanning>
    <div class="listItemRightPanningStyle">
      <igx-icon [color]="white" style="margin-right:10px">call</igx-icon>Dial
    </div>
  </ng-template>
  <igx-list-item isHeader="true">Contacts</igx-list-item>
  <igx-list-item #item *ngFor="let contact of contacts">
    <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
    <h4 igxListLineTitle>{{ contact.name }}</h4>
    <p igxListLineSubTitle class="phone">{{ contact.phone }}</p>
    <igx-icon igxListAction [color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(item)">star</igx-icon>
  </igx-list-item>
</igx-list>

<igx-toast #toast></igx-toast>

위의 예는 여기에서 찾을 수 있는 일부 CSS 스타일을 사용하고 있습니다.

/* contacts.component.css */

igx-icon {
    cursor: pointer;
    user-select: none;
}

.listItemLeftPanningStyle {
    display: flex;
    flex-direction: row-reverse;
    background-color:orange;
    color: white;
    width: 100%;
    padding-right: 10px;
    align-items: center;
}

.listItemRightPanningStyle {
    display: flex;
    flex-direction: row;
    background-color:limegreen;
    color: white;
    width: 100%;
    padding-left: 10px;
    align-items: center;
}

마지막으로 패닝 이벤트를 처리하는 TypeScript 코드는 다음과 같습니다.

// contacts.component.ts

...
@ViewChild('toast')
public toast: IgxToastComponent;

public rightPanPerformed(args) {
  args.keepItem = true;
  this.toast.message = 'Dialing ' + this.contacts[args.item.index - 1].name;
  this.toast.open();
}

public leftPanPerformed(args) {
  args.keepItem = false;
  setTimeout((idx = args.item.index - 1) => {
    this.toast.message = 'Contact ' + this.contacts[idx].name + ' removed.';
    this.toast.open();
    this.contacts.splice(idx, 1);
  }, 500);
}

...

Note

When panning list items there is a threshold which must be reached in order for the panning events to be emitted. You can change the threshold using the IgxList's panEndTriggeringThreshold property. By default this property has a value of 0.5 which means 50% of list item's width.

이제 목록 항목을 직접 이동해 보세요.

Angular filter list

목록이 좋아 보이지만 이름으로 연락처를 검색할 수 있다면 더 좋지 않을까요? 필터링 파이프를 사용하면 쉽게 이를 달성할 수 있습니다. 이렇게 해보자.

먼저 Angular 컴포넌트 템플릿의 맨 위에 입력 필드를 추가하고 이를 searchContact 라는 컴포넌트의 속성에 바인딩해 보겠습니다.

<!--contacts.component.html-->

<igx-input-group type="search" class="search">
    <igx-prefix>
        <igx-icon>search</igx-icon>
    </igx-prefix>
    <input #search igxInput placeholder="Search Contacts" [(ngModel)]="searchContact">
    <igx-suffix *ngIf="search.value.length > 0" (click)="searchContact = null">
        <igx-icon>clear</igx-icon>
    </igx-suffix>
</igx-input-group>

It's time to import the IgxFilterModule and the IgxInputGroupModule in our app.module.ts file and IgxFilterOptions in our contacts component:

// app.module.ts
...
import { IgxFilterModule } from 'igniteui-angular/directives';
import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxFilterModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [..., IgxFilterModule, IgxInputGroupModule]
})

// contacts.component.ts
...
import { IgxFilterOptions } from 'igniteui-angular/directives';
// import { IgxFilterOptions } from '@infragistics/igniteui-angular'; for licensed package

@Component({...})
export class ContactListComponent {
    public searchContact: string;
    ...
    get filterContacts(): IgxFilterOptions {
        const fo = new IgxFilterOptions();
        fo.key = 'name';
        fo.inputValue = this.searchContact;
        return fo;
    }
}

After importing the IgxFilterOptions, we need to register a new getter method that will return the filtering options to be used by the pipe each time the searchContact property gets updated. For the filter to work we need to register a key to filter the contact object by. In our case that would be the name of each contact. The second property that has to be registered on the IgxFilterOptions object is the value that we should check against when comparing our contact name. This would be the searchContact property that we bound to the input field above our contacts list.

마지막으로 필터링 파이프를 사용하기 전에 연락처 데이터에 필터링 파이프를 적용해야 합니다. 따라서 템플릿에 다음을 추가하기만 하면 됩니다.

<!--contacts.component.html-->

<igx-list-item *ngFor="let contact of contacts | igxFilter: filterContacts; let i = index">
    ...
</igx-list-item>

List Item Selection

The list items have a selected property that helps us track which items are "selected". This property allows us to identify and manage the selection status of each item.

Here's an example illustrating how the visual style of the items changes when using the selected property:

By default, the selected property is set to false. We can toggle its value using an inline expression bound to the (click) event on each list item, effectively switching the visual state of the item each time it's clicked.

<igx-list>
    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
    @for (contact of contacts | igxFilter: filterContacts; track contact) {
      <igx-list-item [selected]="contact.selected" (click)="contact.selected = !contact.selected">
        <igx-avatar igxListThumbnail [src]="contact.photo" shape="circle"></igx-avatar>
        <span igxListLineTitle>{{ contact.name }}</span>
        <span igxListLineSubTitle>{{ contact.phone }}</span>
        <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
          [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
        (mousedown)="mousedown($event)">star</igx-icon>
      </igx-list-item>
    }
  </igx-list>

목록 항목은 또한 선택한 요소의 다른 부분에 스타일을 지정하는 데 사용할 수 있는 몇 가지 CSS 변수를 노출합니다.

• --item-background-selected
• --item-text-color-selected
• --item-title-color-selected
• --item-action-color-selected
• --item-subtitle-color-selected
• --item-thumbnail-color-selected

igx-list-item {
  --item-background-selected: var(--ig-secondary-500);
  --item-title-color-selected: var(--ig-secondary-500-contrast);
  --item-subtitle-color-selected: var(--ig-info-100);
}

If you prefer to use the list theming function, there are parameters available that allow you to style the selected state of the list items. You can find more information about these parameters here: list-theme

Chat Component

다음 샘플은 IgxList를 사용하여 간단한 채팅 구성 요소를 만드는 방법을 보여줍니다.

스타일링

List Theme Property Map

기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

기본 속성	종속 속성	설명
$background	$header 배경	목록 헤더 배경색.
	$item 배경	목록 항목 배경색.
$header 배경	$header-텍스트-컬러	목록 헤더의 텍스트 색상.
$item 배경	$background	목록 배경색.
	$header 배경	목록 헤더 배경색.
	$item-배경-호버	목록 항목은 배경색을 떠올립니다.
	$item-텍스트-컬러	목록 항목 텍스트 색상.
	$item-제목-색상	목록 항목 제목 색상.
	$item 행동 색상	목록 항목 행동 색상.
	$item썸네일 색상	목록 항목 썸네일 색상.
	$item-자막-컬러	목록 항목 자막 색상.
	$border색	목록 테두리 색상. (플루언트/부트스트랩만)
$item-배경-호버	$item-배경-활성	활성 목록 항목 배경색.
	$item-텍스트-색상-호버	목록 항목은 텍스트 색상을 마우스로 올리는 것입니다.
	$item-제목-색상-호버	목록 항목은 제목 색상을 호버링합니다.
	$item-행동-색상-호버	목록 항목의 호버 액션 색상.
	$item 썸네일 색상 호버	목록 항목 호버 썸네일 색상.
	$item-자막-색상-호버	목록 항목 호버 자막 색상.
$item-배경-활성	$item-배경-선택	선택한 목록 항목의 배경색.
	$item-텍스트-컬러-액티브	활성 목록 항목 텍스트 색상.
	$item-title-color-active(제목-color-active)	활성 목록 항목 제목 색상.
	$item-행동-색상-활성	활성 목록 항목 동작 색깔.
	$item-썸네일 색상-활성	활성 목록 항목 썸네일 색상.
	$item-자막-색상-활성	활성 목록 항목 자막 색상.
$item-배경-선택	$item-텍스트-색상-선택	선택한 목록 항목의 텍스트 색상.
	$item-제목-색상-선택	선택한 목록, 항목, 제목 색상.
	$item-행동-색상-선택	선택한 목록 항목 행동 색상.
	$item 썸네일 색상 선택	선택한 목록 항목의 썸네일 색상.
	$item-자막-색상-선택	선택한 목록, 항목, 자막 색상.

메모: 실제 결과는 테마 변형에 따라 다를 수 있습니다.

목록의 배경을 어떻게 변경할 수 있는지 살펴보겠습니다. 먼저 index.scss를 구성 요소 .scss 파일로 가져와야 합니다.

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Following the simplest approach, we create a new theme that extends the list-theme and by passing only the $background parameter, the theme will automatically calculate the state colors and appropriate contrasting foregrounds. However, you can still manually define them if desired.

$my-list-theme: list-theme(
  $background: #57a5cd
);

Take a look at the list-theme section for a complete list of available parameters for styling the list.

마지막 단계는 새로 생성된 테마를 포함하는 것입니다.

@include css-vars($my-list-theme);

결과는 다음과 같습니다.

목록 구성요소에 대해 변경할 수 있는 매개변수의 전체 목록은 IgxListComponent 스타일을 참조하세요.

Styling with Tailwind

저희 맞춤형 Tailwind 유틸리티 클래스를 사용해 리스트를 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

• 라이트 테마에는 클래스를 사용light-* 하세요.
• 어두운 테마에는 클래스를 사용dark-* 하세요.
• 접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-list​dark-list 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 부동산 목록은 list-theme에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-list class="!light-list ![--background:#81B698] ![--item-background:#A3C7B2]">
    ...
</igx-list>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 당신의 목록은 다음과 같이 보여야 합니다:

API References

이 글에서는 Angular 목록 구성 요소로 많은 내용을 다루었습니다. 연락처 항목 목록을 만들었습니다. 목록 항목 내부에 아바타와 아이콘과 같은 추가 Ignite UI for Angular 구성 요소를 사용했습니다. 사용자 지정 항목 레이아웃을 만들고 스타일을 지정했습니다. 마지막으로 목록 필터링을 추가했습니다. 목록 구성 요소에는 탐색할 API가 몇 가지 더 있는데, 아래에 나열되어 있습니다.

• IgxListComponent API
• IgxListComponent 스타일
• IgxListItemComponent API

사용된 추가 Angular 구성 요소:

• IgxAvatarComponent API
• IgxAvatar컴포넌트 스타일
• IgxIconComponent API
• IgxIconComponent 스타일

Theming Dependencies

• IgxRipple 테마
• IgxAvatar 테마

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular