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

    Angular 14 introduced the concept of standalone components which allows for a simplified way of building applications by reducing the need for using NgModules. Standalone components were in developer preview until Angular 15. To support this new paradigm, all Ignite UI for Angular components are now exported as standalone with version 16.0.0. As of Angular 19 all components are standalone by default. All the existing NgModules are still exported by the library for backward compatibility. However, they no longer declare any of the Ignite UI for Angular components. Instead they import and export the standalone components.

    How to use the new standalone components

    Starting with Angular 16 and Ignite UI for Angular 16.0 you can now simply add the imports that your standalone component needs in the imports property. In the following example IGX_GRID_DIRECTIVES can be used to import all grid related components and 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]
})

    But you can also import all components used by your standalone component individually. Example with the IgxGridComponent and IgxColumnComponent when only these two are used by another component is as follows.

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

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    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',
    imports: [IgxGridModule, AsyncPipe]
})

    Utility Directives

    The IGX_GRID_DIRECTIVES shown in the previous examples is a utility directive that exports all grid related components and directives. The following table lists all new utility directives that are available in 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 모든 트리 그리드 관련 구성 요소 및 지시어를 내보냅니다.

    Additional Resources

    관련 주제:

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