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]
})

    그러나 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]
})

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

    // `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

    이전 예제에서 표시된 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 모든 트리 그리드 관련 구성 요소 및 지시어를 내보냅니다.

    Additional Resources

    관련 주제:

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