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

    Angular 14는 독립형 컴포넌 트 개념을 도입하여 애플리케이션 사용NgModules 필요성을 줄여 애플리케이션을 단순화할 수 있게 했습니다. 독립 실행형 컴포넌트는 Angular 15까지 개발자 프리뷰에 있었습니다. 이 새로운 패러다임을 지원하기 위해 모든 Ignite UI for Angular 구성 요소가 버전standalone과 동일하게16.0.0 내보내집니다. 2019 Angular 기준으로 모든 컴포넌트는 기본적으로 독립 실행형입니다. 기존NgModules 모든 자료는 여전히 라이브러리에서 하위 호환성을 위해 내보내고 있습니다. 하지만 더 이상 Ignite UI for Angular 구성 요소는 신고하지 않습니다. 대신 부품을standalone 수입하고 내보내는 역할을 합니다.

    How to use the new standalone components

    Angular 16과 Ignite UI for Angular 16.0부터는 이제 컴포넌트에 필요한 가져오기standalone를 속성에imports 추가하는 것만 더 할 수 있습니다. 다음 예IGX_GRID_DIRECTIVES 시에서는 모든 그리드 관련 부품과 지침을 가져오는 데 사용할 수 있습니다.

    import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';

@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/grids/grid';

@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/grids/grid';

@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

    관련 주제:

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