구성요소 템플릿

    Component templates are pre-configured Angular component scaffolds that the Ignite UI CLI (ig add) and Ignite UI Angular Schematics (ng g @igniteui/angular-schematics:c) generate into an existing Angular project. Each template produces a working Angular component with the correct imports, module declarations, and a sample dataset - ready to run without additional configuration. Templates are available for grids, charts, gauges, maps, layout components, data entry controls, and full application scenarios.

    These templates generate components into an existing Angular workspace only. They do not create a new Angular project - use ig new or ng new for that. Templates are specific to Ignite UI for Angular; equivalent patterns for React, Web Components, and Blazor are covered in the respective framework documentation. The generated code serves as a functional starting point and may differ from the live demos linked in this page, which reflect the full documentation samples.

    주형 코드 및 설명 데모
    그리드 및 목록
    그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid newGrid
    Ignite UI CLI:
    ig add grid newGrid
    IgxGrid의 기본 템플릿입니다.
    		 자동 생성된 열이 있는 IgxGrid 구성요소
    그리드 일괄 편집 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
    Ignite UI CLI:
    ig add grid-batch-editing newGridBatchEditing
    일괄 편집이 포함된 샘플 IgxGrid.
    		 일괄 편집을 위해 Transaction 서비스를 사용하는 IgxGrid
    맞춤형 그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
    Ignite UI CLI:
    ig add custom-grid newCustomGrid
    정렬, 필터링, 편집 등과 같은 선택적 기능을 갖춘 IgxGrid
    		 정렬, 필터링, 셀 편집, 행 편집, 그룹화, 크기 조정, 선택, 페이징, 열 고정, 열 이동, 열 숨기기와 같은 선택적 기능이 포함된 IgxGrid
    그리드 요약 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
    Ignite UI CLI:
    ig add grid-summaries newGridSummaries
    요약 기능이 있는 IgxGrid.
    		 요약 기능이 있는 IgxGrid.
    그리드 다중 열 헤더 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
    Ignite UI CLI:
    ig add grid-multi-column-headers newGridMultiColumnHeaders
    여러 헤더 열이 있는 IgxGrid.
    		 다중 열 헤더가 있는 IgxGrid
    트리 그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
    Ignite UI CLI:
    ig add custom-tree-grid newCustomTreeGrid
    정렬, 필터링, 행 편집 등과 같은 선택적 기능을 갖춘 IgxTreeGrid
    		 정렬, 필터링, 셀 편집, 행 편집, 크기 조정, 행 선택, 페이징, 열 고정, 열 이동, 열 숨기기와 같은 선택적 기능이 포함된 IgxTreeGrid
    hierarchical-grid Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
    Ignite UI CLI:
    ig add hierarchical-grid newHierarchicalGrid
    Basic IgxHierarchicalGrid.
    		 IgxHierarchicalGrid component with auto generated columns.
    hierarchical-grid-batch-editing Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
    Ignite UI CLI:
    ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
    IgxHierarchicalGrid with batch editing.
    		 IgxHierarchicalGrid that uses Transaction service for batch editing.
    hierarchical-grid-custom Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
    Ignite UI CLI:
    ig add hierarchical-grid-custom newCustomHierarchicalGrid
    IgxHierarchicalGrid with optional features like sorting, filtering, editing, etc.
    		 IgxHierarchicalGrid with optional features like Sorting, Filtering, Row Editing, Selection.
    hierarchical-grid-summaries Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
    Ignite UI CLI:
    ig add hierarchical-grid-summaries newHierarchicalGridSummaries
    IgxHierarchicalGrid with summaries feature.
    		 IgxHierarchicalGrid with summaries feature.
    pivot-grid Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
    Ignite UI CLI:
    ig add pivot-grid newPivotGrid
    Basic IgxPivotGrid.
    		 IgxPivotGrid component for multi-dimensional data analysis.
    tree Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tree newTree
    Ignite UI CLI:
    ig add tree newTree
    IgxTree with selection and load-on-demand nodes.
    		 IgxTree with selection and load-on-demand node support.
    목록 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c list newList
    Ignite UI CLI:
    ig add list newList
    기본 IgxList.
    		 검색 및 필터링 논리가 포함된 IgxList입니다.
    콤보 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c combo newCombo
    Ignite UI CLI:
    ig add combo newCombo
    템플릿이 포함된 기본 IgxCombo.
    		 사용자 정의 템플릿을 사용하는 IgxCombo.
    차트
    카테고리 차트 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c category-chart newCategoryChart
    Ignite UI CLI:
    ig add category-chart newCategoryChart
    차트 유형 선택기가 있는 기본 카테고리 차트입니다.
    		 차트 유형 선택기가 있는 기본 카테고리 차트 입니다.
    금융 차트 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
    Ignite UI CLI:
    ig add financial-chart newFinancialChart
    자동 도구 모음 및 유형 선택 기능이 있는 기본 재무 차트입니다.
    		 자동 도구 모음 및 유형 선택 기능이 있는 기본 재무 차트입니다.
    게이지
    글머리 기호 그래프 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
    Ignite UI CLI:
    ig add bullet-graph newBulletGraph
    다양한 애니메이션이 포함된 IgxBulletGraph
    		 다양한 애니메이션이 포함된 IgxBulletGraph​
    선형 게이지 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
    Ignite UI CLI:
    ig add linear-gauge newLinearGauge
    다양한 애니메이션이 포함된 IgxLinearGauge
    		 다양한 애니메이션이 포함된 IgxLinearGauge​
    방사형 게이지 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
    Ignite UI CLI:
    ig add radial-gauge newRadialGauge
    다양한 애니메이션이 포함된 IgxRadialGauge
    		 다양한 애니메이션이 포함된 IgxRadialGauge​
    Maps
    geographic-map Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
    Ignite UI CLI:
    ig add geographic-map newGeographicMap
    Basic IgxGeographicMap.
    		 IgxGeographicMap displaying geo-spatial data on geographic imagery maps.
    레이아웃
    부두 관리자 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dock-manager newDockManager
    Ignite UI CLI:
    ig add dock-manager newDockManager
    기본 IgcDockManager.
    		 9개의 콘텐츠 슬롯이 있는 IgcDockManager.
    회전목마 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c carousel newCarousel
    Ignite UI CLI:
    ig add carousel newCarousel
    기본 IgxCarousel.
    		 IgxCarousel은 일련의 이미지를 순환합니다.
    탭 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tabs newTabs
    Ignite UI CLI:
    ig add tabs newTabs
    기본 IgxTabs.
    		 세 개의 사용자 정의 탭 그룹을 포함하는 IgxTabs 구성 요소입니다.
    하단 탐색 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
    Ignite UI CLI:
    ig add bottom-nav newBottomNav
    3개 항목 하단 탐색 템플릿.
    		 3개 항목 하단 탐색 모음 템플릿.
    accordion Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c accordion newAccordion
    Ignite UI CLI:
    ig add accordion newAccordion
    Basic IgxAccordion sample.
    		 IgxAccordion with multiple collapsible panels in a single container.
    stepper Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c stepper newStepper
    Ignite UI CLI:
    ig add stepper newStepper
    Basic IgxStepper sample.
    		 IgxStepper visualizing content as a process with successive steps.
    데이터 입력 및 표시
    칩 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c chip newChip
    Ignite UI CLI:
    ig add chip newChip
    기본 IgxChip.
    		 igx-chips-area 내부의 IgxChip 구성 요소.
    쓰러지 다 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dropdown newDropDown
    Ignite UI CLI:
    ig add dropdown newDropDown
    기본 IgxDropDown.
    		 항목 목록을 표시하는 기본 IgxDropDown입니다.
    선택 (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select newSelect
    Ignite UI CLI:
    ig add select newSelect
    기본 IgxSelect.
    		 Simple IgxSelect that displays a list of items.
    선택 (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
    Ignite UI CLI:
    ig add select-groups newGroupsSelect
    그룹 포함을 선택합니다.
    		 그룹화된 항목을 표시하는 IgxSelect.
    선택 (v4.1.0) Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c select-in-form newFormSelect
    Ignite UI CLI:
    ig add select-in-form newFormSelect
    IgxSelect를 양식으로 선택하세요.
    		 양식의 IgxSelect 구성요소 사용.
    입력 그룹 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c input-group newInputGroup
    Ignite UI CLI:
    ig add input-group newInputGroup
    기본 IgxInputGroup 양식 보기.
    		 ​IgxInputGroup으로 생성된 양식 보기입니다.
    autocomplete Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
    Ignite UI CLI:
    ig add autocomplete newAutocomplete
    Simple IgxAutocomplete.
    		 IgxAutocomplete enhancing text input with a dropdown of suggested options.
    enhanced-autocomplete Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
    Ignite UI CLI:
    ig add enhanced-autocomplete newEnhancedAutocomplete
    IgxAutocomplete with enhanced groups.
    		 IgxAutocomplete with grouped suggestion items.
    상호 작용
    대화 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c dialog newDialog
    Ignite UI CLI:
    ig add dialog newDialog
    기본 IgxDialog.
    		 표준 확인 대화 상자로 사용되는 IgxDialog의 샘플입니다.
    툴팁 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c tooltip newTooltip
    Ignite UI CLI:
    ig add tooltip newTooltip
    완전히 사용자 정의 가능한 툴팁입니다.
    		 ​IgxTooltip으로 생성된 기본 툴팁입니다.
    스케줄링
    날짜 선택기 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c date-picker newDatePicker
    Ignite UI CLI:
    ig add date-picker newDatePicker
    기본 IgxDatePicker.
    		 단방향 데이터 바인딩을 사용하는 기본 IgxDatePicker입니다.
    시간 선택기 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c time-picker newTimePicker
    Ignite UI CLI:
    ig add time-picker newTimePicker
    기본 IgxTimePicker.
    		 초기 값이 설정되고 단방향 데이터 바인딩이 포함된 기본 IgxTimePicker 입니다.
    달력 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c calendar newCalendar
    Ignite UI CLI:
    ig add calendar newCalendar
    단일 선택이 가능한 IgxCalendar.
    		 Basic IgxCalendar with single selection.

    Scenario Templates

    Scenario templates scaffold complete application views that combine multiple Ignite UI for Angular components into a working use-case pattern. Use these when you need a production-realistic starting point rather than a single isolated component.

    주형 코드 및 설명
    멋진 그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
    Ignite UI CLI:
    ig add awesome-grid newAwesomeGrid
    crm-그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
    Ignite UI CLI:
    ig add crm-grid newCrmGrid
    핀테크 그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
    Ignite UI CLI:
    ig add fintech-grid newFinTechGrid
    핀테크 트리 그리드 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
    Ignite UI CLI:
    ig add fintech-tree-grid newFinTechTreeGrid
    로그인 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c login newLogin
    Ignite UI CLI:
    ig add login newLogin
    일기 예보 Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
    Ignite UI CLI:
    ig add weather-forecast newWeatherForecast