Ignite UI for Angular와 함께 독립 실행형 구성 요소 사용

Angular 14에서는 독립 실행형 구성 요소의 개념을 도입하여 사용 NgModules의 필요성을 줄여 애플리케이션을 간단하게 빌드할 수 있습니다. 독립 실행형 구성 요소는 Angular 15까지 개발자 프리뷰로 제공되었습니다. 이 새로운 패러다임을 지원하기 위해 이제 모든 Ignite UI for Angular 구성 요소가 버전 16.0.0과 같이 standalone 내보내집니다. Angular 19부터 모든 구성 요소는 기본적으로 독립형입니다. 모든 기존 NgModules 항목은 이전 버전과의 호환성을 위해 라이브러리에서 계속 내보냅니다. 그러나 더 이상 Ignite UI for Angular 구성 요소를 선언하지 않습니다. 대신 구성 요소를 가져오고 내보냅니다 standalone.

How to use the new standalone components

Angular 16 및 Ignite UI for Angular부터 이제 standalone 구성 요소에 필요한 가져오기를 imports 속성에 간단히 추가할 수 있습니다. 다음 예제에서 IGX_GRID_DIRECTIVES 사용하여 모든 그리드 관련 구성 요소와 지시문을 가져올 수 있습니다.

import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
})
typescript

그러나 standalone 구성 요소에서 사용되는 모든 구성 요소를 개별적으로 가져올 수도 있습니다. IgxGridComponent와 IgxColumnComponent 둘만 다른 컴포넌트에서 사용하는 경우의 예는 다음과 같습니다.

import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    imports: [IgxGridComponent, IgxColumnComponent, AsyncPipe]
})
typescript

또한 기존 모듈은 모두 유지되지만 이제는 독립형 구성 요소만 가져오고 내보낼 수 있으므로 독립형 구성 요소에도 사용할 수 있습니다.

// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
import { IgxGridModule } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    imports: [IgxGridModule, AsyncPipe]
})
typescript

Utility Directives

이전 예제에서 표시된 IGX_GRID_DIRECTIVES는 모든 그리드 관련 구성 요소와 지시문을 내보내는 유틸리티 지시문입니다. 다음 표는 Ignite UI for Angular에서 사용할 수 있는 모든 새 유틸리티 지시문을 나열합니다.

지시어 수집	설명
`IGX_ACCORDION_DIRECTIVES`	모든 아코디언 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_ACTION_STRIP_DIRECTIVES`	모든 액션 스트립 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_BANNER_DIRECTIVES`	모든 배너 관련 구성요소 및 지시문을 내보냅니다.
`IGX_BOTTOM_NAV_DIRECTIVES`	모든 하단 탐색 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_BUTTON_GROUP_DIRECTIVES`	모든 버튼 그룹 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_CALENDAR_DIRECTIVES`	모든 달력 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_CARD_DIRECTIVES`	모든 카드 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_CAROUSEL_DIRECTIVES`	모든 캐러셀 관련 구성요소 및 지시문을 내보냅니다.
`IGX_CHIPS_DIRECTIVES`	모든 칩 관련 구성요소 및 지시어를 내보냅니다.
`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`	모든 순환 진행률 표시줄 관련 구성요소 및 지시문을 내보냅니다.
`IGX_COMBO_DIRECTIVES`	모든 콤보 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_DATE_PICKER_DIRECTIVES`	모든 날짜 선택기 관련 구성요소 및 지시어를 내보냅니다.
`IGX_DATE_RANGE_PICKER_DIRECTIVES`	모든 날짜 범위 선택기 관련 구성요소 및 지시어를 내보냅니다.
`IGX_DIALOG_DIRECTIVES`	모든 대화 상자 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_DRAG_DROP_DIRECTIVES`	모든 드래그 앤 드롭 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_DROP_DOWN_DIRECTIVES`	모든 드롭다운 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_EXPANSION_PANEL_DIRECTIVES`	모든 확장 패널 관련 구성 요소 및 지시어를 내보냅니다.
`IGX_GRID_DIRECTIVES`	모든 그리드 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_HIERARCHICAL_GRID_DIRECTIVES`	모든 계층적 그리드 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_INPUT_GROUP_DIRECTIVES`	모든 입력 그룹 관련 구성 요소 및 지시어를 내보냅니다.
`IGX_LINEAR_PROGRESS_BAR_DIRECTIVES`	모든 선형 진행률 표시줄 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_LIST_DIRECTIVES`	모든 목록 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_NAVBAR_DIRECTIVES`	모든 탐색 표시줄 관련 구성요소 및 지시어를 내보냅니다.
`IGX_NAVIGATION_DRAWER_DIRECTIVES`	모든 탐색 창 관련 구성요소 및 지시어를 내보냅니다.
`IGX_PAGINATOR_DIRECTIVES`	모든 페이지네이터 관련 구성요소 및 지시어를 내보냅니다.
`IGX_PIVOT_GRID_DIRECTIVES`	모든 피벗 그리드 관련 구성 요소 및 지시어를 내보냅니다.
`IGX_PROGRESS_BAR_DIRECTIVES`	모든 선형 및 원형 진행률 표시줄 관련 구성요소 및 지시문을 내보냅니다.
`IGX_QUERY_BUILDER_DIRECTIVES`	모든 쿼리 빌더 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_RADIO_GROUP_DIRECTIVES`	모든 라디오 그룹 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_SELECT_DIRECTIVES`	모든 선택 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_SIMPLE_COMBO_DIRECTIVES`	모든 단순 콤보 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_SLIDER_DIRECTIVES`	모든 슬라이더 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_SPLITTER_DIRECTIVES`	모든 분할기 관련 구성 요소 및 지시어를 내보냅니다.
`IGX_STEPPER_DIRECTIVES`	모든 스테퍼 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_TABS_DIRECTIVES`	모든 탭 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_TIME_PICKER_DIRECTIVES`	모든 시간 선택기 관련 구성요소 및 지시문을 내보냅니다.
`IGX_TOOLTIP_DIRECTIVES`	모든 도구 설명 관련 구성 요소 및 지시어를 내보냅니다.
`IGX_TREE_DIRECTIVES`	모든 트리 보기 관련 구성 요소 및 지시문을 내보냅니다.
`IGX_TREE_GRID_DIRECTIVES`	모든 트리 그리드 관련 구성 요소 및 지시어를 내보냅니다.

Ignite UI for Angular와 함께 독립 실행형 구성 요소 사용

How to use the new standalone components

Utility Directives

Additional Resources

테마