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

Angular 14에서는 다음 개념을 도입했습니다. 독립형 구성요소 이를 사용하면 애플리케이션을 구축하는 단순화된 방법을 사용할 수 있습니다. NgModules. 독립 실행형 구성 요소는 Angular 15까지 개발자 미리 보기에 있었습니다. 이 새로운 패러다임을 지원하기 위해 이제 모든 Ignite UI for Angular 다음과 같이 내보냅니다. standalone 버전 포함 16.0.0. 기존의 모든 NgModules 이전 버전과의 호환성을 위해 여전히 라이브러리에서 내보내집니다. 그러나 더 이상 Ignite UI for Angular 선언하지 않습니다. 대신 그들은 다음을 수입하고 수출합니다. standalone 구성 요소.

How to use the new standalone components

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

import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';

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

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

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

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

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

// `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',
    standalone: true,
    imports: [IgxGridModule, AsyncPipe]
})

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

테마