업데이트 안내

    Ignite UI for Angular에서 버전 관리 첫 번째 숫자는 항상 코드가 지원하는 Angular의 주요 버전과 일치하고 두 번째 숫자는 주요 버전 릴리스 전용입니다. 주요 릴리스 간에 주요 변경 사항이 도입될 수 있습니다. 각 릴리스에 대한 포괄적인 변경 사항 목록 Ignite UI for Angular 제품에서 확인하실 수 있습니다 변경 로그

    Ignite UI for Angular ng update 회로도를 통한 자동 버전 마이그레이션도 지원합니다. 이는 가능한 모든 주요 변경 사항(이름이 바뀐 선택기, 클래스 및 @Input/Output 속성)을 마이그레이션하려고 시도하지만 여전히 마이그레이션할 수 없는 변경 사항이 있을 수 있습니다. 이는 일반적으로 TypeScript 응용 프로그램 논리와 관련이 있으며 아래에서 추가로 설명합니다.

    먼저 애플리케이션과 해당 패키지에 사용 가능한 업데이트를 분석하는 ng update 명령을 실행하세요.

    ng update

    ​Ignite UI for Angular 업데이트하려면 다음 명령을 실행하십시오.

    ng update @infragistics/igniteui-angular

    ​Ignite UI for Angular 업데이트하려면 다음 명령을 실행하십시오.

    ng update igniteui-angular

    ​@infragistics/igniteui-angular 또는 igniteui-angular 업데이트할 때 @angular/core, @angular/cli 및 igniteui-cli 패키지를 일치하는 버전으로 업데이트하는 것이 좋습니다. Ignite UI CLI 패키지를 업데이트하려면 다음 명령을 실행하십시오.

    ng update igniteui-cli

    ​Angular Core 패키지를 업데이트하려면 다음 명령을 실행하십시오.

    ng update @angular/core

    ​Angular CLI 패키지를 업데이트하려면 다음 명령을 사용하십시오.

    ng update @angular/cli
    Note

    패키지 종속성 불일치로 인해 ng update 명령이 실패하면 업데이트를 되돌리고 node_modules 폴더를 삭제한 후--force 플래그를 사용하여 업데이트를 다시 실행하십시오.

    Additional manual changes

    안타깝게도 모든 변경 사항이 자동으로 업데이트될 수는 없습니다. 아래 변경 사항은 버전에서 발생하는 섹션으로 분할되므로 업데이트가 필요한 경우 현재 버전에서 시작하여 아래에서 위로 추가 업데이트를 적용해야 합니다.

    예를 들어 버전 6.2.4에서 7.1.0으로 업데이트하는 경우 "6.x .." 섹션에서 시작하여 해당 변경 사항을 적용하고 작업을 진행합니다.

    From 17.2.x to 18.0.x

    Breaking changes

    • 버전 18.0.x에서는 사용자 정의 CSS 속성을--ig-size 위해 더 이상 사용되지 않는 displayDensity 속성이 제거되었습니다. 자세한 내용은 16.0.x에서 16.1.x로의 업데이트 가이드를 참조하세요.

    일반적인

    • IgxPivotGrid

    Breaking changes

    • 피벗 그리드의 속성이 showPivotConfigurationUI 변경되고 확장됩니다 pivotUI.
    // version 17.2.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [showPivotConfigurationUI]="false">
</igx-pivot-grid>

// version 18.0.x
<igx-pivot-grid [data]="data" [pivotConfiguration]="pivotConfig" [pivotUI]="{ showConfiguration: false }">
</igx-pivot-grid>

    From 17.0.x to 17.1.x

    일반적인

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • 주요 변경 내용
        • rowAdd 그리고 rowDelete 이벤트는 이제 of IGridEditEventArgs 대신 type IRowDataCancelableEventArgs의 이벤트 인수를 방출합니다. 두 인터페이스는 여전히 호환되지만 이러한 이벤트 속성 cellID​ ​isAddRow​ ​newValue​ ​oldValue에 대한 중복은 더 이상 IRowDataCancelableEventArgs 사용되지 않으며 향후 버전에서 제거될 예정입니다. 올바른 새 인터페이스로 전환하면 안전하게 제거할 수 있는 더 이상 사용되지 않는 사용이 표시됩니다.
      • 사용 중단
        • rowID 속성은 다음 인터페이스에서 더 이상 사용되지 않습니다. IGridEditDoneEventArgs, IPathSegment, IRowToggleEventArgs, IPinRowEventArgs,,는 IgxAddRowParent 향후 버전에서 제거될 예정입니다. 대신 사용하십시오 rowKey.
        • primaryKey 속성은 다음 인터페이스에서 더 이상 사용되지 않습니다. IRowDataEventArgs​ ​IGridEditDoneEventArgs 대신 사용하십시오 rowKey.
        • data 속성은 다음 인터페이스에서 더 이상 사용되지 않습니다 IRowDataEventArgs. 대신 사용하십시오 rowData.

    Breaking changes

    • 버전 17.1.x icon 에서는 지시문의 유형 igxButton이 type flat의 지시문으로 igxIconButton 변경되었습니다. 자동 마이그레이션을 사용할 수 있으며 적용됩니다 ng update. 그러나 이전에 형식 단추와 icon 함께 사용할 수 있었던 일부 igxButton 입력 속성은 새로 만든 igxIconButton 단추에 적용할 수 없습니다. type icon 단추와 igxButtonColor 함께 or igxButtonBackground 속성을 사용한 경우 다음과 같이 업데이트해야 합니다.
    // version 17.0.x
<button igxButton="icon" [igxButtonBackground]="'red'">
    <igx-icon fontSet="material">search</igx-icon>
</button>

// version 17.1.x
<button igxIconButton="flat" [style.background]="'red'">
    <igx-icon fontSet="material">search</igx-icon>
</button>

    참고: 사용자는 가져오기에 IgxIconButtonDirective 수동으로 추가해야 합니다.

    import { IgxIconButtonDirective } from 'igniteui-angular';

@Component({
    ...
    imports: [IgxIconButtonDirective]
})

    From 16.1.x to 17.0.x

    일반적인

    • 17.0에서 Angular @nguniversal/* 패키지를 제거했습니다. 프로젝트에서 이러한 패키지를 사용하는 경우 표준 ng update 호출은 부적절하게 수정된 package-lock.json으로 인해 igniteui-angular 마이그레이션에서 오류를 발생시킵니다. 자세한 내용은 여기에서 확인할 수 있습니다. 17.0.x로 업데이트하려면 다음 추가 단계 중 하나를 수행해야 합니다.
      • ​ng update 실행하기 전에 package-lock.json 파일을 삭제하세요.
      • ​ng update igniteui-angular 실행하기 전에 npm dedupe --legacy-peer-deps 실행하세요.

    획기적인 변화

    • ​IgxCombo의 selectionChanging 이벤트 인수 유형 IComboSelectionChangingEventArgs 에는 다음과 같은 변경 사항이 있습니다.
      • ​newSelection 및 oldSelection 속성은 해당 기능을 더 잘 반영하기 위해 각각 newValue 및 oldValue로 이름이 변경되었습니다. Combo의 value와 마찬가지로 valueKey 설정 여부에 따라 지정된 속성 값이나 전체 데이터 항목을 내보냅니다. 자동 마이그레이션이 가능하며 ng update 시 적용됩니다.
      • 두 가지 새로운 속성 newSelection 및 oldSelection 더 이상 valueKey의 영향을 받지 않고 Combo의 data에서 항목을 일관되게 내보내는 이전 속성 대신 노출됩니다.
      • 이제 added 및 removed 속성에는 valueKey 설정에 관계없이 항상 데이터 항목이 포함됩니다. 그러면 업데이트된 newSelection 및 oldSelection 속성에 맞게 정렬됩니다.

    ​selectionChanging 이벤트 핸들러의 코드가 이벤트 인수에서 valueKeys 읽기에 의존하는 경우 다음과 같이 업데이트하세요.

      // version 16.1.x
  public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
    this.addedItems = e.added;
    this.removedItems = e.removed;
  }

  // version 17.0.x
  public handleSelectionChanging(e: IComboSelectionChangingEventArgs): void {
    this.addedItems = e.added.map(i => {
       return i[e.owner?.valueKey]
    });
    this.removedItems = e.removed.map(i => {
       return i[e.owner?.valueKey]
    });
  }

    • getCurrentResourceStrings가 삭제되었습니다. 대신 특정 구성 요소 문자열 가져오기를 사용하세요.

      • 예를 들어 EN 문자열은 igniteui-angular에서 가져옵니다. import { GridResourceStringsEN } from 'igniteui-angular';
      • 예를 들어 DE 또는 기타 언어 문자열은 igniteui-angular-i18n에서 가져옵니다. import { GridResourceStringsDE } from 'igniteui-angular-i18n';

      사용 예는 업데이트된 현지화(i18n) 문서에서 찾을 수 있습니다.

    From 16.0.x to 16.1.x

    일반적인

    Non-breaking changes

    • CSS 사용자 정의 속성을 사용하여 더 간단하고 강력한 방법을 선호하여 구성 요소의 크기를 설정하는 방법으로 DisplayDensityToken 주입 토큰에서 벗어나고 있습니다. 이러한 이유로 DisplayDensityToken 주입 토큰은 이제 더 이상 사용되지 않습니다. 이는 displayDensity 입력 속성을 노출하는 모든 구성 요소에 파급됩니다. 토큰 및 입력 속성은 17.0.0에서 제거됩니다. 우리는 귀하가 다음을 수행할 것을 촉구합니다:

    ​DisplayDensityToken이 제공되는 모든 선언을 제거합니다.

    // *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],

    ​displayDensity 입력 속성에 대한 모든 바인딩 또는 프로그래밍 방식 할당을 제거합니다.

    <!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</igx-grid>

    대신 사용자 정의 CSS 속성--ig-size 사용하여 displayDensity와 동일한 결과를 얻으세요.

    /* 
Add --ig-size to a component or global file.
Available values are:
  - compact: --ig-size-small
  - cosy: --ig-size-medium
  - comfortable: --ig-size-large
*/
igx-grid {
    --ig-size: var(--ig-size-small);
}

    From 15.1.x to 16.0.x

    • Angular 16으로 업그레이드하면 NgModules 내부적으로 작동하는 방식이 변경됩니다. 이전에는 내부적으로 다른 모듈에 의존하는 모듈을 추가하면 앱에서 두 모듈을 모두 선언할 수 있었습니다. 이 동작은 의도된 것이 아니며 Angular 16에서는 이를 변경합니다. 앱이 이 동작에 의존하는 경우, 예를 들어 IgxGridModule과 같은 많은 내부 종속성을 포함하는 모듈만 가져오고 이와 함께 제공되는 구성 요소를 사용하는 경우 앱에서 사용하는 각 구성 요소에 대해 별도로 모듈을 수동으로 추가해야 합니다.

    • 주요 변경 사항

    • 16.0.x에서는 페이징과 관련된 모든 그리드 속성이 제거됩니다. 이제 페이징 동작은 IgxPaginatorComponent 통해 완전히 구성되고 제어됩니다. 그리드에서 페이징을 활성화하려면 그리드에서 IgxPaginatorComponent 초기화하고 관련 입력 속성을 설정하고 페이지네이터 자체에 이벤트 핸들러를 연결합니다.

    <igx-grid ...>
    <igx-paginator #paginator [totalRecords]="totalRecords" [perPage]="25" (pageChange)="pageChange($event) (perPageChange)="perPageChange($event)">
    </igx-paginator>
<igx-grid>

    @ViewChild('grid', { static: true }) private grid: IgxGridComponent;
@ViewChild('paginator', { static: true }) private paginator: IgxPaginatorComponent;

// prior version 16.0.x
public onButtonClick(event) {
    this.grid.nextPage();
    this.grid.previousPage();
    this.grid.paginate(0);
}

// from version 16.0.x
public onButtonClick(event) {
    this.paginator.nextPage();
    this.paginator.previousPage();
    this.paginator.paginate(0);
}
    • 16.0.x에서는 그리드 메소드 getCellByColumnVisibleIndex(rowIndex: number, index: number) 제거되었습니다. 대신 getCellByKey(rowSelector: any, columnField: string) 또는 getCellByColumn(rowIndex: number, columnField: string) 사용하세요. 예:
     // prior version 16.0.x
 const cell = grid.getCellByColumnVisibleIndex(rowIndex, columnIndex);

 // after version 16.0.x
 const rowKey = grid.getRowByIndex(rowIndex).key;
 const columnField = grid.getColumnByVisibleIndex(columnIndex).field;
 const cell = grid.getCellByKey(rowKey, columnField);
 const cell = grid.getCellByColumn(rowIndex, columnField);

    From 15.0.x to 15.1.x

    • 획기적인 변화
    • rowSelectionChanging 인수 유형이 변경되었습니다. 이제 IRowSelectionEventArgs 인터페이스의 일부인 added 및 removed 컬렉션 oldSelection, newSelection 더 이상 선택한 요소의 행 키로 구성되지 않지만(그리드가 기본 키를 설정한 경우) 이제 어떤 경우에도 행 데이터가 내보내집니다. 그리드가 원격 데이터로 작업 중이고 primaryKey가 설정되면 현재 그리드 보기의 일부가 아닌 선택된 행에 대해 부분 행 데이터 객체가 방출됩니다.

    ​rowSelectionChanging 이벤트 핸들러의 코드가 이벤트 인수에서 기본 키 읽기에 의존하는 경우 다음과 같이 업데이트하십시오.

      // prior version 15.1.x
  public handleRowSelection(e: IRowSelectionEventArgs): void {
    this.selectedRows = e.newSelection;
  }

  // after version 15.1.x
  public handleRowSelection(e: IRowSelectionEventArgs): void {
    this.selectedRows = e.newSelection.map(rec => {
       return rec[e.owner?.primaryKey]
    });
  }

    • 동작 변경 선택한 행이 그리드 구성 요소에서 삭제되면 rowSelectionChanging 이벤트가 발생하지 않습니다.

    • 시각적 변화

    • 15.1에서는 입력 구성 요소의 크기가 증가했습니다. 이는 Material 테마를 사용할 때 더욱 두드러집니다. Material 사양과 일치하도록 이 작업을 수행합니다. 애플리케이션이 변경으로 인해 부정적인 영향을 받는 경우, displayDensity 입력을 사용하여 보다 밀도가 높은 설정(예: 편안한 것에서 아늑한 것, 아늑한 것에서 컴팩트한 것)으로 설정할 수 있습니다.

      예

        <igx-input-group displayDensity="cosy">
        ...
    </igx-input-group>

    <igx-select displayDensity="cosy">
        ...
    </igx-select>

    <igx-combo displayDensity="cosy">
        
    </igx-combo>

    <igx-simple-combo displayDensity="cosy">
        ...
    </igx-simple-combo>

    • 15.1에서는 선택 및 콤보 구성 요소가 이제 토글 아이콘 주위에 배경을 갖습니다. scss나 css를 사용하여 배경과 아이콘 색상을 변경할 수 있습니다.

      예

        $my-select: select-theme(
        $toggle-button-background: red,
        $toggle-button-foreground: #fff,
    );

    $my-combo: combo-theme(
        $toggle-button-background: red,
        $toggle-button-foreground: #fff,
    );

    @include css-vars($my-select);
    @include css-vars($my-combo);

    **Example**

        .igx-select {
        --igx-select-toggle-button-background: red;
        --igx-select-toggle-button-foreground: #fff;
    }
    
    .igx-combo {
        --igx-combo-toggle-button-background: red;
        --igx-combo-toggle-button-foreground: #fff;
    }

    From 14.2.x to 15.0.x

    일반적인

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • 이제 그리드 템플릿의 매개변수에는 해당 컨텍스트에 대한 유형이 있습니다. 앱이 엄격한 템플릿 모드에 있고 잘못된 유형을 사용하는 경우에도 문제가 발생할 수 있습니다. 변환이 필요할 수 있는 템플릿에 대한 참조:
        • IgxColumnComponent-ColumnType (예: igxFilterCellTemplate의 열 매개변수)
        • IgxGridCell-CellType (예: igxCell 템플릿의 셀 매개변수)

    • Ignite UI for Angular 에는 igniteui 테마에 대한 종속성이 있습니다. 파일에 다음 전처리기 구성을 angular.json 추가합니다.

        "build": {
    "options": {
      "stylePreprocessorOptions": {
  	"includePaths": ["node_modules"]
      }
    }
  }

    • 주요 변경 사항- 테마 구성, 색상, 높이 및 서체에 대한 모든 전역 CSS 변수의 접두사가--igx에서--ig로 변경되었습니다. 이 변경 사항은 전역 구성 요소 변수에 영향을 주지 않습니다.

      Example:

      14.2.x에서:

      :root {
    --igx-typography: 'Titillium Web', sans-serif; 
}

      15.0.x에서는 다음과 같습니다.

      :root {
    --ig-typography: 'Titillium Web', sans-serif; 
}

    Themes

    • 주요 변경 사항-grays 입력 인수의 이름이 gray로 변경되었습니다.
      이것이 기존 코드에 미치는 영향은 다음과 같습니다.

      14.2.x에서:

      $my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $grays: #000
);

.my-class {
    background: color($color: 'grays', $variant: 300);
    color: contrast-color($color: 'grays', $variant: 300);
    border-color: hsl(var(--igx-grays-500));
}

      15.0.x 이상:

      $my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $gray: #000
);

.my-class {
    background: color($color: 'gray', $variant: 300);
    color: contrast-color($color: 'gray', $variant: 300);
    border-color: hsl(var(--ig-gray-500));
}

    • 주요 변경 사항- 이제 팔레트에 대한 CSS 변수 생성이​ ​pale-vars​ ​mixin 대신 팔레트 mixin에 의해 수행됩니다.

    • 주요 변경 사항- 이제 팔레트 기능을​ ​사용하려면 표면 색상을 전달해야 하지만 gray 색상 값을 전달하는 것은 선택 사항입니다. 회색 기본 색상에 대한 값이 제공되지 않으면 표면 색상의 밝기에 따라 자동으로 생성됩니다. 밝은 표면 색상은 검정색(#000) 회색 기본 색상이 되고, 어두운 표면 색상은 흰색( #fff) 베이스 그레이 색상입니다. 팔레트를 생성할 때 정보, 성공, 오류 및 경고 색상에 대한 기본값이 더 이상 없다는 점을 명심해야 합니다. 사용하려면 명시적으로 설정해야 합니다. 값을 직접 설정하고 싶지 않은 경우 기존 팔레트에서 해당 색상을 가져올 수도 있습니다.

      본보기:

      $my-palette: palette(
    $primary: #09f,
    $secondary: #e41c77,
    $surface: #fff,
    $info: color($light-material-palette, 'info'),
    $success: color($light-material-palette, 'success'),
    $error: color($light-material-palette, 'error'),
    $warn: color($light-material-palette, 'warn'),
);

@include palette($my-palette);

    • 주요 변경 사항-팔레트 매개변수가 이제 모든 구성 요소 테마에서 제거되었습니다.​ ​팔레트 믹스인을 사용하여 사용자 정의 구성 요소 구성 요소 테마에 대한 사용자 정의 팔레트의 범위를 지정할 수 있습니다. IE11에 대한 지원을 중단했기 때문에 모든 구성 요소 테마는 색상, 고도, 타이포그래피 등에 대한 전역 CSS 변수를 참조하므로 사용자 정의 팔레트를 구성 요소 테마에 전달할 필요가 더 이상 없습니다.

      사용자 정의 팔레트를 사용하여 사용자 정의 테마 생성:

      // app.component.scss

$my-palette: palette(
    $primary: royalblue,
    $secondary: orange,
    $surface: white
);

$avatar: avatar-theme(
    $background: color($color: 'primary'), 
    $color: contrast-color($color: 'primary')
);

:host ::ng-deep {
    // Include the custom palette in the scope of the app component.
    // It will have a higher specificity than the global palette.
    @include palette($my-palette):

    .my-avatar {
        @include avatar($avatar);
    }
}

    타이포그래피

    • 주요 변경 사항-유형 스타일 믹스인은 이제 유형 스케일을 매개변수로 허용하지 않고 카테고리 이름만 허용합니다.

      14.2.x 이하:

      .my-class {
    @include type-style($type-scale: $my-type-scale, $category: h1);
}

      15.0.x 이상:

      .my-class {
    @include type-style(h1);
}

    표고

    • 주요 변경 사항-고도 함수에는 이제 $name( 고도 이름) 이라는 하나의 명명된 인수만 있습니다.

    • 주요 변경 사항-고도 기능이 제거되었습니다. 이제 configure-elevations 믹스인을 사용하여 고도 색상을 구성할 수 있습니다.

      14.2.x 이하:

      .my-class {
    box-shadow: elevation($elevations, $elevation: 8);
}

      15.0.x 이상:

      .my-class {
    box-shadow: elevation(8);
}

    Grid Toolbar

    • 주요 변경 사항-IgxGridToolbarTitleDirective 및 IgxGridToolbarActionsDirective 구성 요소로 변환되어 요소 선택기만 유지됩니다. <igx-grid-toolbar-title> 및 <igx-grid-toolbar-actions>의 기본 요소 마크업을 사용하는 앱의 경우 기능 변경이 없어야 합니다. 다른 요소에 igxGridToolbarTitle 및 igxGridToolbarActions 지시문을 사용하는 앱은 해당 지시문을 언급된 요소로 대신 변환해야 합니다.

      From:

      <igx-grid-toolbar>
    <span igxGridToolbarTitle>Title</span >
    <div igxGridToolbarActions>
        ...
    </div>
</igx-grid-toolbar>

      To:

      <igx-grid-toolbar>
    <igx-grid-toolbar-title>Title</igx-grid-toolbar-title>
    <igx-grid-toolbar-actions>
        ...
    </igx-grid-toolbar-actions>
</igx-grid-toolbar>

    From 13.1.x to 13.2.x

    Themes

    • 주요 변경 사항- 모든 RTL 관련 스타일시트가 제거되었습니다. 이제 Ignite UI 테마는 기본적으로 RTL directon을 지원합니다. 이전에 *-rtl.css 특정 테마를 사용했던 사용자는 일반 테마 파일로 전환해야 합니다.

    From 13.0.x to 13.1.x

    일반적인

    • igxGrid, igxHierarchicalGrid, igxTreeGrid
      • 주요 변경 사항- 열의 movable 속성이 더 이상 사용되지 않습니다. 대신 노출된 그리드 moving 속성을 사용하세요.
      <igx-grid [moving]="true">
</igx-grid>
    • IgxHierarchicalGrid
      • 주요 변경 사항- igxHierarchicalGrid 및 igxRowIsland 구성 요소 hgridAPI에 대한 공용 API 서비스의 이름이 gridAPI로 변경되었습니다.
    • IgxToast
      • 주요 변경 사항-igx-toast 더 이상 사용되지 않는 position 속성이 제거되었습니다. 다음과 같이 positionSettings 속성을 사용하는 것이 좋습니다.
      @ViewChild('toast', { static: true }) public toast: IgxToastComponent;

public ngOnInit(): void {
    this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}

    From 12.2.x to 13.0.x

    일반적인

    • IE discontinued support
    • IgxDialog
      • 주요 변경 사항- 기본 positionSettings 열기/닫기 애니메이션이 fadeIn / fadeOut으로 변경되었습니다.
    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • 주요 변경 사항- 다음과 같은 더 이상 사용되지 않는 입력이 제거되었습니다(showToolbar, toolbarTitle, columnHiding, columnHidingTitle, hiddenColumnsText, columnPinning, columnPinningTitle, pinnedColumnsText). 대신 IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent 사용하세요.

      • 주요 변경 사항-igx-toolbar 구성 요소를 추가할 때 이제 활성화하려는 기능(열 숨기기, 고정, Excel 내보내기)을 수동으로 지정해야 합니다. 고급 필터링은 그리드의 allowAdvancedFiltering 입력 속성을 통해 활성화할 수 있지만 다른 기능과 마찬가지로 마크업을 사용하여 선언적으로 활성화하는 것이 좋습니다.

      • 주요 변경 사항- 기능을 더 잘 반영하기 위해 rowSelected 이벤트의 이름이 rowSelectionChanging으로 변경되었습니다.

      • 주요 변경 사항- 기능을 더 잘 반영하기 위해 columnSelected 이벤트의 이름이 columnSelectionChanging으로 변경되었습니다.

      • 주요 변경-columnsCollection이 제거되었습니다. 대신 columns 사용하세요. 특정 경우에 columns 빈 배열을 반환하는 경우 ViewChildren 사용하여 열을 쿼리하고 ngAfterViewInit에서 액세스합니다.

        @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
public columns: QueryList<IgxColumnComponent>;

      • 주요 변경- 그리드에 사용자 정의 지시어를 적용할 때 호스팅 그리드에 대한 참조를 얻기 위해 생성자에 IGX_GRID_BASE 토큰을 삽입합니다.

        <igx-grid customDirective ...></igx-grid>

        @Directive({
    selector: '[customDirective]'
})
export class customDirective {

constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
    • RowDirective, RowType
      • 주요 변경 사항-rowData 및 rowID 속성이 RowDirective 및 RowType 인터페이스를 구현하는 클래스에서 제거되었습니다. 대신 data와 key 사용하세요. 자동 마이그레이션을 위해 ng update 사용하세요. 자동 마이그레이션은 템플릿 컨텍스트 개체가 입력되지 않은 템플릿에서 일부 예를 선택할 수 없습니다.
        <ng-template igxCell let-cell="cell">
    <span>{{ cell.rowID }}</span>
    <span>{{ cell.row.rowData.ProductID }}</span>
</ng-template>
        이러한 템플릿을 수동으로 업데이트하여
        <span>{{ cell.key }}</span>
<span>{{ cell.row.data.ProductID }}</span>
    • igxGrid
      • ​sortStrategy와 유사하게 작동하는 groupStrategy 입력을 노출하여 그리드의 그룹화 동작을 사용자 정의할 수 있습니다.
    • IgxCsvExporterService, IgxExcelExporterService
      • 내보내기 서비스는 이제 루트 수준에 주입되므로 더 이상 애플리케이션에 제공할 필요가 없습니다.
    • IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent
      • 도구 모음의 드롭다운 버튼 안에 표시되는 텍스트를 설정하는 새로운 입력 buttonText 노출되었습니다.
    • IgxCombo
      • 그룹 정렬 순서를 설정할 수 있는 groupSortingDirection 입력이 추가되었습니다.
    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • 헤더 정렬 표시기 재템플릿을 위한 새로운 지시문(IgxSortHeaderIconDirective, IgxSortAscendingHeaderIconDirective 및 IgxSortDescendingHeaderIconDirective)을 추가했습니다.
    • IgxDialog
      • Tab 키 포커스가 열릴 때 대화 상자 내에 트랩되는지 여부를 설정하는 focusTrap 입력을 추가했습니다. 기본값은 true 입니다.
    • IgxColumnActionsComponent
      • 주요 변경 사항- 다음 입력이 제거되었습니다.
        • 입력 columns. 대신 igxGrid columns 입력을 사용하세요.
    • IgxCarousel
      • 주요 변경 사항- 캐러셀 애니메이션 유형 CarouselAnimationType의 이름이 HorizontalAnimationType으로 변경되었습니다.
    • IgxGridStateDirective- 이제 disableHiding Hiding 열 속성 및 열 그룹을 지원합니다.

    테마

    • 아이콘 구성요소 color 속성이 더 이상 사용되지 않습니다. style.color CSS 속성을 사용하여 기본 색상을 변경하세요. 예:
    <igx-icon [style.color]="'#e41c77'">home</igx-icon>

    <igx-icon style.color="{{ col.hasSummary ? '#e41c77' : '' }}">functions</igx-icon>
    • Sass 모듈: 테마 엔진이 Sass 모듈로 전환되었습니다. 이 변경은 모든 테마 라이브러리 기능(구성 요소 테마 등), 믹스인(구성 요소 믹스인 등) 및 변수가 이제 단일 파일에서 forwarded 된다는 것을 의미합니다. Sass 테마 라이브러리를 올바르게 사용하려면 프로젝트에서 Dart Sass 버전 1.33.0 이상을 활용하고 다음에서 테마 라이브러리의 모든 가져오기를 변경해야 합니다.
    // free version
@import '~igniteui-angular/lib/core/styles/themes/index';

// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';

    to:

    // free version
@use 'igniteui-angular/theming' as *;

// licensed version:
@use '@infragistics/igniteui-angular/theming' as *;

    전체 테마 라이브러리를 한 번만 가져온 다음 앱의 다른 Sass 파일에서 사용하려면 반드시 전달하세요. 가져온 Sass 파일은 자동으로 전달되지 않습니다.

    Before:

    // _variables.scss
// free version
@import '~igniteui-angular/lib/core/styles/themes/index';

// licensed version
@import '~@infragistics/igniteui-angular/lib/core/styles/themes/index';

// _other-file.scss
@import 'variables';

    After:

    // _variables.scss
// free versioin
@use 'igniteui-angular/theming' as *;
@forward 'igniteui-angular/theming';

// licensed version
@use '@infragistics/igniteui-angular/theming' as *;
@forward '@infragistics/igniteui-angular/theming';


// _other-file.scss
@use 'variables' as *;
    • 팔레트 및 스키마:
    • CSS 팔레트 변수는 더 이상 HEX 값을 참조하지 않고 대신 H, S, L 3개 값 목록을 나타냅니다. 이는 hsl 또는 hsla CSS 함수에 전달되어야 함을 의미합니다.

    Before:

    .some-class {
    background: var(--igx-surface-500); // returns HEX color
}

    After:

    .some-class {
    background: hsl(var(--igx-surface-500)); // returns a list of H, S, L
}

    이는 CSS 변수만 사용하여 런타임에 팔레트를 변경할 수 있도록 하기 위한 것입니다. 이러한 방식으로 특정 팔레트 색상의 알파 채널은 기본 팔레트 색상에 영향을 주지 않고 런타임 시 수정될 수 있습니다.

    • 올바른 팔레트 및 구성 요소 스키마가 사용자 정의 구성 요소 및 전역 테마에 전달되는지 확인하십시오. 전역 어두운 테마를 생성하려면 회색 색상에 대해 더 밝은 색상 음영을 선택해야 합니다. 예를 들면 다음과 같습니다.
    $my-dark-palette: palette(
    $primary: olive,
    $secondary: yellow,
    $grays: #fff
);

@include dark-theme($palette: $my-dark-palette);

    마찬가지로, 밝은 테마에는 더 어두운 회색 음영과 밝은 색상 스키마가 필요합니다.

    전역 테마에서 구성 요소 테마를 제외하지 않았지만 css-vars 믹스인을 사용하여 사용자 정의 대체 테마를 직접 만들고 싶다면 테마에 올바른 팔레트와 해당 스키마가 전달되었는지 확인하세요.

    $my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

@include css-vars($my-custom-grid);
    • 제외된 구성 요소 테마:

    전역 테마에서 일부 구성 요소 테마를 제외하고 사용자 정의 대체 테마를 만든 경우 구성 요소 믹스인이 포함되어 있고 올바른 구성 요소 테마가 전달되었는지 확인해야 합니다.

    $my-dark-palette: palette(
    ...
    $exclude: ('igx-grid')
);

$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

// Ensuregrid is included:
@include grid($my-custom-grid);

    사용자 정의 구성 요소 테마가 전역 styles.scss 이외의 별도 구성 요소 Sass 파일에 선언된 경우 core 믹스인도 포함되어 있는지 확인하세요.

    // free version
@use 'igniteui-angular/theming' as *;

// licensed version
@use '@infragistics/igniteui-angular/theming' as *;

// Include the core module mixin.
@include core();

// Create your theme.
$my-custom-grid: grid-theme(
    $palette: $my-dark-palette,
    $schema: $dark-schema
);

// Include your custom theme styles.
@include grid($my-custom-grid);

    Sass Moule System에 대해 더 잘 이해하려면 Miriam Suzanne의 훌륭한 기사를 읽어보세요.

    From 12.0.x to 12.1.x

    Grids

    • 주요 변경 사항:

      • IgxPaginatorComponent- 페이지네이터가 그리드에서 인스턴스화되는 방식이 변경되었습니다. 이제 그리드 트리에 투영된 별도의 구성요소입니다. 그래서 [paging]="true" 속성은 모든 그리드에서 제거되고 그리드의 페이지네이터와 관련된 다른 모든 속성은 더 이상 사용되지 않습니다. 활성화 지침을 따르는 것이 좋습니다. Grid Paging에 설명된 기능 페이징 주제.
      • IgxPageSizeSelectorComponent 및 IgxPageNavigationComponent는 사용자 정의 콘텐츠를 쉽게 구현할 수 있도록 도입되었습니다.
      <igx-paginator #paginator>
    <igx-paginator-content>
        <igx-page-size></igx-page-size>
        [My custom text]
        <igx-page-nav></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
      • 리팩터링 중에 페이징 구성 요소에 대한 API가 변경되었으며 이제 많은 이전 속성이 더 이상 사용되지 않습니다. 불행하게도 이러한 변경 사항 중 일부를 적절하게 마이그레이션하는 것은 아무리 말해도 복잡하므로 모든 오류는 애플리케이션 수준에서 처리해야 합니다.
      • 다음 속성은 그리드에서 더 이상 사용되지 않습니다.
        • 페이징, perPage 페이지, totalPages, isFirstPage, isLastPage, pageChange, perPageChange, pagingDone
      • 다음 메소드도 더 이상 사용되지 않습니다.
        • 다음페이지()
        • 이전페이지()
      • 다음 속성이 제거되었습니다.
        • paginationTemplate - 사용자 정의 템플릿을 정의하려면 igx-paginator-content 사용하십시오.
      • HierarchicalGrid 세부 사항 - RowIslands에서 페이징을 활성화하려면 *igxPaginator 지시문을 다음과 같이 사용해야 합니다.
      <igx-hierarchical-grid #hGrid >
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>
      • 마이그레이션을 통해 템플릿 콘텐츠가 igx-paginator-content 콘텐츠 내부로 이동되지만 모든 템플릿 바인딩이 해결되지는 않을 수 있습니다. 마이그레이션 후 템플릿 파일을 반드시 확인하세요. 다음 바인딩은 이러한 속성이 제거되었으므로 수동으로 변경해야 합니다(pagerEnabled, pagerHidden, dropdownEnabled, dropdownHidden).

      From:

      <igx-paginator #paginator
    [pagerEnabled]="!isPagerDisabled" [pagerHidden]="isPagerHidden"
    [dropdownHidden]="isDropdownHidden">
</igx-paginator>

      To:

      <igx-paginator #paginator *ngIf="!isPagerDisabled">
    <igx-paginator-content>
        <igx-page-size *ngIf="isDropdownHidden"></igx-page-size>
        <igx-page-nav *ngIf="isPagerHidden"></igx-page-nav>
    </igx-paginator-content>
</igx-paginator>
      • IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent는 더 이상 공용 API에 노출되지 않습니다. 새로운 IgxGridCell로 업그레이드하는 방법에 대한 자세한 안내는 아래 섹션을 참조하세요.

    • 그리드 지원 중단:

      • ​IgxGridTransaction 제공하기 위한 DI 패턴은 더 이상 사용되지 않습니다. 다음은 여전히 작동하지만 향후 버전에서는 제거될 가능성이 높으므로 리팩토링하는 것이 좋습니다.
      @Component({
    template: `<igx-grid [data]="data">
    ...
    </igx-grid>`,
    providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
    ...
})
export class MyCustomComponent {
    ...
}

      위의 동작을 달성하려면 새로 추가된 batchEditing 입력을 사용해야 합니다.

      @Component({
    template: `<igx-grid [data]="data" [batchEditing]="true">
    ...
    </igx-grid>`
    ...
})
export class MyCustomComponent {
    ...
}
      • getCellByColumnVisibleIndex는 이제 더 이상 사용되지 않으며 다음 주요 버전에서 제거될 예정입니다. 대신 getCellByKey, getCellByColumn 사용하세요.

    IgxGridCell migration

    • IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent는 더 이상 공개 API에 노출되지 않습니다.

    • 위 중 하나의 인스턴스를 반환하는 데 사용된 공용 API는 이제 IgxGridCell의 인스턴스를 반환합니다.

    const cell = grid.getCellByColumn(0, 'ProductID');     // returns IgxGridCell
const cell = grid.getCellByKey('ALFKI', 'ProductID');  // returns IgxGridCell
const cell = grid.getCellByColumnVisibleIndex(0, 0);   // returns IgxGridCell
const rowCells = grid.getRowByIndex(0).cells;          // returns IgxGridCell[]
const selectedCells = grid.selectedCells;              // returns IgxGridCell[]
const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[]
    • cell에 있는 재산 IGridCellEventArgs 다음에 의해 발생된 이벤트 인수 셀클릭, 선택된, 컨텍스트메뉴 그리고 더블 클릭 이벤트는 이제 다음의 인스턴스입니다. IgxGridCell
    • 셀 템플릿의 let-cell 속성은 이제 IgxGridCell 입니다.
    • getCellByColumnVisibleIndex는 이제 더 이상 사용되지 않으며 다음 주요 버전에서 제거될 예정입니다. 대신 getCellByKey, getCellByColumn 사용하세요.

    참고:

    • ng 업데이트는 가져오기, 입력 및 캐스트와 같은 IgxGridCellComponent, IgxTreeGridCellComponent, IgxHierarchicalGridCellComponent, IgxGridExpandableCellComponent 사용을 마이그레이션합니다. 위 항목 중 하나를 사용하는 코드의 위치가 마이그레이션되지 않은 경우 타이핑/캐스트를 제거하거나 IgxGridCell을 사용하여 변경하세요.
    • 해당 인덱스의 행이 데이터 행이 아니고 IgxGroupByRow, IgxSummaryRow, 세부 정보 행 등인 경우 getCellByIndex 및 기타 메소드는 정의되지 않음을 반환합니다.

    Themes

    컴파일 경고(#9793 참조)와 관련된 불만으로 인해 이제 math.div 함수를 사용합니다. 이 기능은 Dart Sass 버전 1.33.0부터 지원됩니다.

    해결책

    어떤 이유로든 math.div 알려진 함수가 아니라는 Sass 컴파일 오류가 표시된다면 이는 프로젝트에서 오래된 버전의 Sass를 사용하고 있다는 의미입니다.

    1. ​ng update 사용하여 최신 버전의 Angular로 업데이트 -Angular 12.1.0+는 기본적으로 dart-sass 컴파일러를 사용합니다.
    ng update [options]

    어떤 이유로 Ignite UI / Angular CLI를 사용하지 않는 경우 Node 프로젝트에서 node-sass​ ​sass로 바꿔야 합니다.

    npm uninstall node-sass
npm install sass --save-dev
    1. 어떤 이유로 위의 방법을 사용하여 최신 버전의 Angular로 업그레이드할 수 없는 경우 Sass 파일에 전역 플래그를 설정하여 이전 Sass 분할 방법으로 돌아갈 수 있습니다.
    $__legacy-libsass: true;

    From 11.1.x to 12.0.x

    Themes

    • 주요 변경 사항:

      • IgxAvatar 테마가 단순화되었습니다. 테마 매개변수(avatar-theme)의 수는 크게 줄어들었으며 더 이상 접두사가 붙은 매개변수(icon-*, initials-*, image-*)와 접미사가 붙는 매개변수(border-radius-*)를 포함하지 않습니다. ng update 사용하여 수행된 업데이트는 기존 아바타 테마를 마이그레이션하지만 접두사 및 접미사 매개변수가 없는 점을 설명하기 위해 몇 가지 추가 조정이 필요할 수 있습니다.

      다음과 같은 방법으로 기존 유형별 아바타 테마를 수정해야 합니다.

      예를 들면 다음과 같습니다.

        ```scss
  $avatar-theme: avatar-theme(
      $initials-background: blue,
      $initials-color: orange,
      $icon-background: blue,
      $icon-color: orange,
  );

  @include avatar($avatar-theme);
  ```

      다음과 같이 변환해야 합니다.

        ```scss
  $initials-avatar: avatar-theme(
      $background: blue,
      $color: orange,
  );

  $icon-avatar: avatar-theme(
      $background: blue,
      $color: orange,
  );

  .initials-avatar {
      @include avatar($initials-avatar);
  }

  .icon-avatar {
      @include avatar($icon-avatar);
  }
  ```
      • IgxButton 테마가 단순화되었습니다. 테마 매개변수(button-theme)의 수가 크게 줄어들었으며 더 이상 접두사가 붙은 매개변수(flat-*, raised-* 등)를 포함하지 않습니다. ng update 사용하여 수행된 업데이트는 기존 버튼 테마를 마이그레이션하지만 접두사가 붙은 매개변수가 없다는 점을 설명하기 위해 몇 가지 추가 조정이 필요할 수 있습니다.

      아래 코드 조각과 동일한 결과를 얻으려면.

        ```html
  <button igxButton="raised">Raised button</button>
  <button igxButton="outlined">Outlined button</button>
  ```
  ```scss
  $my-button-theme: button-theme(
      $raised-background: red,
      $outlined-outline-color: green
  );

  @include css-vars($my-button-theme);
  ```

      각 버튼 유형에 대해 별도의 테마를 생성하고 CSS 선택기로 범위를 지정해야 합니다. html <div class="my-raised-btn"> <button igxButton="raised">Raised button</button> </div> <div class="my-outlined-btn"> <button igxButton="outlined">Outlined button</button> </div>

        ```scss
  $my-raised-button: button-theme(
      $background: red
  );

  $my-outlined-button: button-theme(
      $border-color: red
  );

  .my-raised-btn {
      @include css-vars($my-raised-button);
   }

  .my-outlined-btn {
      @include css-vars($my-outlined-button);
  }
  ```

      보시다시피, button-theme 매개변수는 이제 각 버튼 유형에 대해 동일한 이름을 갖기 때문에 다양한 유형에 대해 서로 다른 색상을 갖도록 버튼 테마의 범위를 CSS 선택기로 지정해야 합니다.

      여기에서 모든 내용을 볼 수 있습니다. 사용 가능한 속성 ~의 button-theme

      • ​typography 믹스인은 더 이상 core에 암시적으로 포함되지 않습니다. 타이포그래피 스타일을 사용하려면 core와 theme 앞에 믹스인을 명시적으로 포함해야 합니다.
      // in styles.scss

@include core();

@include typography(
    $font-family: $material-typeface,
    $type-scale: $material-type-scale
);

@include theme();
      Important

      ​core 믹스인은 항상 먼저 포함되어야 합니다.

      Ignite UI for Angular에 포함된 각 테마에 대해 사용할 수 있는 특정 font-family 및 type-scale 변수를 제공합니다.

      주제 글꼴군 유형 척도
      재료 $material-서체 $material-type-scale
      유창한 $fluent-서체 $fluent-유형-규모
      부트스트랩 $bootstrap-서체 $bootstrap-유형-규모
      남빛 $indigo-서체 $indigo-type-scale

    IgxBottomNav component

    탭 헤더와 콘텐츠를 정의하는 보다 유연하고 설명적인 방법을 제공하기 위해 IgxBottomNavComponent가 완전히 리팩터링되었습니다. 기존 igx-bottom-nav 정의를 새 정의로 마이그레이션하려면 ng update를 통해 업데이트하는 것이 좋습니다.

    • 주형

      • 새로운 구조는 각각 헤더와 콘텐츠 구성 요소를 래핑하는 하단 탐색 항목 구성 요소를 정의합니다. 헤더에는 일반적으로 아이콘(Material guidelines)이 포함되어 있지만 라벨이나 기타 사용자 정의 콘텐츠가 있을 수도 있습니다.
      • 헤더 스타일 지정을 위해 igxBottomNavHeaderLabel 및 igxBottomNavHeaderIcon 이라는 두 가지 새로운 지시문을 도입했습니다.
      • 이제 헤더 구성 요소에서는 모든 콘텐츠를 추가할 수 있으므로 이전에 탭 헤더를 다시 템플릿화하는 데 사용되었던 igxTab 지시어가 더 이상 필요하지 않기 때문에 제거되었습니다.
      • 탐색 시나리오에서 구성 요소를 사용하는 경우 routerLink 지시문을 헤더 구성 요소에 연결해야 합니다.
      <igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-content>
            Content 1
        </igx-bottom-nav-content>
    </igx-bottom-nav-item>
    ...
</igx-bottom-nav>

    • API 변경

      • ​id, itemStyle, panels, viewTabs, contentTabs 및 tabs 속성이 제거되었습니다. 현재 items 속성은 탭 컬렉션을 반환합니다.
      • 다음 속성이 변경되었습니다.
        • 탭 항목의 isSelected 속성 이름이 selected로 변경되었습니다.
        • ​selectedTab 속성의 이름이 selectedItem으로 변경되었습니다.
      • ​onTabSelected 및 onTabDeselected 이벤트가 제거되었습니다. 탭 선택에 대한 더 많은 유연성과 제어 기능을 제공하는 selectedIndexChanging, selectedIndexChange 및 selectedItemChange의 세 가지 새로운 이벤트를 도입했습니다. 불행하게도 이러한 이벤트 변경 사항에 대해 적절한 마이그레이션을 수행하는 것은 아무리 말해도 복잡하므로 모든 오류는 프로젝트 수준에서 처리해야 합니다.

    IgxTabs component

    탭 헤더와 콘텐츠를 정의하는 보다 유연하고 설명적인 방법을 제공하기 위해 IgxTabsComponent가 완전히 리팩터링되었습니다. 기존 igx-tabs 정의를 새 정의로 마이그레이션하려면 ng update를 통해 업데이트하는 것이 좋습니다.

    • 주형

      • 새로운 구조는 각각 헤더와 콘텐츠 구성 요소를 래핑하는 탭 항목 구성 요소를 정의합니다. 헤더에는 일반적으로 아이콘과 라벨이 포함되어 있지만 다른 사용자 정의 콘텐츠도 포함될 수 있습니다.
      • 헤더 스타일 지정을 위해 igxTabHeaderLabel 및 igxTabHeaderIcon 이라는 두 가지 새로운 지시문을 도입했습니다.
      • 이제 헤더 구성 요소에서는 모든 콘텐츠를 추가할 수 있으므로 이전에 탭 헤더를 다시 템플릿화하는 데 사용되었던 igxTab 지시어가 더 이상 필요하지 않기 때문에 제거되었습니다.
      • 탐색 시나리오에서 구성 요소를 사용하는 경우 routerLink 지시문을 헤더 구성 요소에 연결해야 합니다.
      <igx-tabs>
    <igx-tab-item>
        <igx-tab-header>
            <igx-icon igxTabHeaderIcon>folder</igx-icon>
            <span igxTabHeaderLabel>Tab 1</span>
        </igx-tab-header>
        <igx-tab-content>
            <h1>Tab 1 Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </igx-tab-content>
    </igx-tab-item>
...
</igx-tabs>

    • API 변경

      • ​id, groups, viewTabs, contentTabs 및 tabs 속성이 제거되었습니다. 현재 items 속성은 탭 컬렉션을 반환합니다.
      • 다음 속성이 변경되었습니다.
        • 탭 항목의 isSelected 속성 이름이 selected로 변경되었습니다.
        • ​selectedTabItem 속성은 selectedItem으로 단축되었습니다.
        • contentFit 및 고정 옵션이 포함된 type 속성은 더 이상 사용할 수 없습니다. 헤더 크기 조정 및 위치 지정 모드는 현재 start(기본값), center, end 및 justify라는 네 가지 다른 값을 허용하는 tabAlignment 입력 속성에 의해 제어됩니다. 이전 contentFit 유형은 현재 start 정렬 값에 해당하고 이전 fixed 유형(현재 justify 값)에 해당합니다.
      • ​tabItemSelected 및 tabItemDeselected 이벤트가 제거되었습니다. 탭 선택에 대한 더 많은 유연성과 제어 기능을 제공하는 selectedIndexChanging, selectedIndexChange 및 selectedItemChange의 세 가지 새로운 이벤트를 도입했습니다. 불행하게도 이러한 이벤트 변경 사항에 대해 적절한 마이그레이션을 수행하는 것은 아무리 말해도 복잡하므로 모든 오류는 프로젝트 수준에서 처리해야 합니다.

    IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

    • IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent는 더 이상 공개 API에 노출되지 않습니다.
    • 위 중 하나의 인스턴스를 반환하는 데 사용된 공용 API는 이제 공용 RowType 인터페이스를 구현하는 개체를 반환합니다.
    const row = grid.getRowByIndex(0);
const row = grid.getRowByKey(2);
const row = cell.row;

    ​RowType의 공개 API는 IgxRowComponent 및 기타 노출에 사용된 API와 동일하지만 다음 사항에 유의하세요.

    • IgxHierarchicalRowComponent에 의해 노출되는 토글 메서드는 사용할 수 없습니다. 모든 행 유형에 expanded 속성을 사용합니다.
    grid.getRowByIndex(0).expanded = false;

    row.rowData 및 row.rowID는 더 이상 사용되지 않으며 버전 13에서 완전히 제거됩니다. 대신 row.data 및 row.key를 사용하세요.

    • onRowPinning이 내보낸 이벤트 인수의 row 속성과 onRowDragStart가 내보낸 이벤트 인수의 dragData 속성, onRowDragEnd는 이제 RowType 구현합니다.
    • ng 업데이트는 가져오기, 입력 및 캐스트와 같은 IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent 사용 대부분을 마이그레이션합니다. 위 항목 중 하나를 사용하는 코드의 위치가 마이그레이션되지 않은 경우 타이핑/캐스트를 제거하거나 RowType으로 변경하세요.
    • getRowByIndex 이제 다음을 반환합니다. RowType 개체, 해당 인덱스의 행이 요약 행인 경우(이전에는 반환하는 데 사용됨) 한정되지 않은). row.isSummaryRow 그리고 row.isGroupByRow 인덱스의 행이 요약 행이거나 행별 그룹인 경우 true를 반환합니다.

    IgxInputGroupComponent

    • ​disabled 속성이 제거되었습니다. 입력 그룹의 상태는 항상 기본 igxInput에 의해 관리되므로 이 속성은 오해의 소지가 있었습니다.

      • ​ng update 실행하면 [disabled] 템플릿에서 @Input으로 사용된 모든 인스턴스가 처리됩니다.
      • ​.ts 파일에서 속성을 참조하는 경우:
      export class CustomComponent {
    public inputGroup: IgxInputGroupComponent
    ...
    this.inputGroup.disabled = false;
}

      기본 입력 지시문의 disabled 속성을 참조하도록 코드를 수동으로 업데이트해야 합니다.

      export class CustomComponent {
    public input: IgxInputDirective
    ...
    this.input.disabled = false;
}

    IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent

    • IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent의 value 속성은 이제 ISO 8601 문자열 형식을 허용합니다. 이는 value 유형이 Date 또는 string 일 수 있음을 의미합니다.
    • IgxDateTimeDirective, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateRangePickerComponent의 inputFormat 속성은 이제 연도 부분에 y 허용하지 않습니다. yy로 업데이트해야 합니다.

    From 10.2.x to 11.0.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • 도구 모음이 그리드에서 인스턴스화되는 방식이 변경되었습니다. 이제 그리드 트리에 투영된 별도의 구성요소입니다. 따라서 showToolbar 속성은 모든 그리드에서 제거되고 그리드의 도구 모음과 관련된 다른 모든 속성은 더 이상 사용되지 않습니다. 도구 모음 항목에 설명된 대로 도구 모음 기능을 활성화하기 위한 권장 방법을 따르는 것이 좋습니다.
      • ​igxToolbarCustomContent 지시어가 제거되었습니다. 마이그레이션은 템플릿 콘텐츠를 도구 모음 콘텐츠 내부로 이동하지만 템플릿 바인딩을 해결하려고 시도하지는 않습니다. 마이그레이션 후 템플릿 파일을 반드시 확인하세요.
      • 툴바 구성 요소에 대한 API는 리팩터링 중에 변경되었으며 이제 많은 이전 속성이 제거되었습니다. 불행하게도 이러한 변경 사항에 대해 적절한 마이그레이션을 수행하는 것은 아무리 말해도 복잡하므로 모든 오류는 프로젝트 수준에서 처리해야 합니다.

    From 10.0.x to 10.1.x

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
      • Excel 스타일 필터 메뉴의 일부 부분을 템플릿화하는 데 사용되는 IgxExcelStyleSortingTemplateDirective, IgxExcelStyleHidingTemplateDirective, IgxExcelStyleMovingTemplateDirective, IgxExcelStylePinningTemplateDirective 및 IgxExcelStyleSelectingTemplateDirective 지시문을 제거했으므로 열 및 필터 작업 영역 템플릿화에 새로 추가된 지시문인 IgxExcelStyleSelectingTemplateDirective​ ​IgxExcelStyleColumnOperationsTemplateDirective​ ​IgxExcelStyleFilterOperationsTemplateDirective. 또한 Excel 스타일 필터 메뉴의 모든 내부 구성 요소를 노출하여 사용자 지정 템플릿 내에서 사용할 수 있도록 했습니다. Excel 스타일 필터링 항목에서 새 템플릿 지시문에 대한 자세한 내용을 확인할 수 있습니다.
    • IgxGrid
      • ​selectedRows() 메서드는 이름이 지정된 입력 속성으로 리팩터링되었습니다. 이러한 주요 변경을 통해 사용자는 런타임 시 그리드의 선택 상태를 쉽게 변경할 수 있습니다. 행의 사전 선택도 지원됩니다. selectedRows() 메서드가 호출되는 모든 인스턴스는 괄호 없이 다시 작성되어야 합니다.
      • ​selectedRows 입력 속성에 대한 바인딩은 다음과 같습니다.
      public mySelectedRows = [0, 1, 2];

      <igx-grid [data]="myData" rowSelection="multiple"
    primaryKey="ID" [selectedRows]="mySelectedRows">
    <!-- ... -->
</igx-grid>

    From 9.0.x to 10.0.x

    • Igx드롭다운

      • 드롭다운 항목의 표시 속성이 flex에서 block으로 변경되었습니다. 기본적으로 잘린 텍스트를 활성화하기 위해 이 작업을 수행했습니다. 해당 변경으로 인해 드롭다운 항목의 내용에 텍스트 이상의 내용이 있는 경우 애플리케이션 수준에서 레이아웃을 처리해야 합니다.

      • 다음 예제에서는 아이콘과 텍스트 콘텐츠로 드롭다운 항목의 스타일을 지정하여 수직으로 정렬하는 방법을 보여줍니다.

      <igx-drop-down-item>
    <div class="my-styles">
        <igx-icon>alarm</igx-icon>
        <span>item text</span>
    </div>
</igx-drop-down-item>

      .my-styles {
    display: flex;
    align-items: center;

    span {
      margin-left: 8px;
    }
}

    From 8.x.x to 9.0.x

    Angular 9 Hammer 공급자의 주요 변경으로 인해 더 이상 암시적으로 추가되지 않습니다. 자세한 내용은 다음 문서를 참조하세요. 이로 인해 다음 구성 요소가 필요합니다. HammerModule 다음을 위해 애플리케이션의 루트 모듈에서 가져옵니다. 만지다 예상대로 작동하는 상호작용:

    • igxGrid
    • igx계층형 그리드
    • igxTreeGrid
    • igx목록
    • igxNavigationDrawer
    • igxTimePicker
    • igxDatePicker
    • igxMonthPicker
    • igx슬라이더 *
    • igx캘린더
    • igxCarousel

    * 참고- igxSlider에는 모든 사용자 상호 작용에 HammerModule이 필요합니다.

    다음 코드 조각을 사용하여 앱의 루트 모듈 파일을 업데이트할 수 있습니다.

    import { HammerModule } from "@angular/platform-browser";

@NgModule({
    ...
    imports: [
        ...
        HammerModule
    ]
})

    내보내는 일부 Enumerations의 이름이 변경되었기 때문에 해당 멤버를 수동으로 업데이트해야 합니다. 수동 업데이트가 필요한 모든 변경 사항 목록은 다음과 같습니다.

    • 아바타 유형. DEFAULT-> IgxAvatarType. CUSTOM
    • 유형. DEFAULT-> IgxBadgeType. PRIMARY
    • IgxCardType. DEFAULT-> IgxCardType. ELEVATED
    • IgxCardActionsLayout. DEFAULT-> IgxCardActionsLayout. START
    • IgxDividerType. DEFAULT-> IgxDividerType. SOLID
    • IgxProgressType. DANGER-> IgxProgressType. ERROR

    ​ng update 프로세스는 AvatarType, Type 등과 같은 모든 열거 이름을 업데이트합니다. 각각 IgxAvatarType 및 IgxBadgeType에 적용됩니다. 다른 모든 열거형 멤버 이름은 변경되지 않습니다.

    From 8.1.x to 8.2.x

    • IgxDrag

      • ​hideBaseOnDrag 및 visible 입력은 더 이상 사용되지 않으므로 애플리케이션에서 동일한 기능을 달성하기 위해 Angular 제공하는 기본 요소를 숨기는 모든 방법을 사용할 수 있습니다. 한 가지 예는 visibility 스타일을 hidden으로 설정하는 것입니다. 이는 보이지 않게 만들고 DOM에서 차지하는 공간을 유지하기 때문입니다.

        <div igxDrag [ngStyle]="{ 'visibility': targetDragged ? 'hidden' : 'visible' }"
    (dragStart)="onDragStarted($event)" (dragEnd)="onDragEnded($event)">
    Drag me!
</div>

        public targetDragged = false;

public onDragStarted(event) {
    this.targetDragged = true;
}

public onDragEnded(event) {
    this.targetDragged = false;
}

      • ​animateOnRelease 및 dropFinished()도 더 이상 사용되지 않으므로 모든 dropFinished() 메서드 사용은 transitionToOrigin()으로 대체되어야 합니다. 그렇지 않으면 드래그한 요소를 원래 위치로 다시 전환하려는 시점에 따라 transitionToOrigin() 호출해야 합니다. 드래그된 요소 DOM 위치가 변경되면 원래 위치도 이에 따라 변경됩니다.

    • IgxDrop

      • ​IxgDrop 지시문과 함께 제공된 기본 드롭 전략은 더 이상 기본적으로 적용되지 않으므로 동일한 동작을 계속 유지하려면 새 입력 dropStrategy 제공된 IgxAppendDropStrategy 구현으로 설정해야 합니다.

        <div igxDrop [dropStrategy]="appendStrategy"></div>

        import { IgxAppendDropStrategy } from 'igniteui-angular';
// import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package

public appendStrategy = IgxAppendDropStrategy;

      • ​IgxDropEnterEventArgs 및 IgxDropLeaveEventArgs 인터페이스의 사용은 IDragBaseEventArgs로 대체되어야 합니다.

      • 또한 IgxDropEventArgs 인터페이스의 모든 사용은 IDropDroppedEventArgs로 대체되어야 합니다.

    • IgxRowDrag 지시어

      • IRowDragStartEventArgs 및 IRowDragEndEventArgs 관련 내용을 더 명확하게 하기 위해 인수 이름을 변경했습니다. owner 인수의 이름이 dragDirective로 변경되었습니다. 이제 owner 인수는 소유자 구성 요소에 대한 참조를 제공합니다. 코드가 다음과 같은 경우:
        public dragStart(event) {
    const directive = event.owner;
}
        버전 8.2.x에서는 다음과 같이 업데이트되어야 합니다.
        public dragStart(event) {
    const directive = event.dragDirective;
    const grid = event.owner;
}

    • IgxCombo

      • ​igx-combo 선택 및 데이터 바인딩을 처리하는 방식이 변경되었습니다.
      • 콤보의 [valueKey] 입력이 정의된 경우 컨트롤은 선택을 수행할 때 전달된 데이터 항목 배열에서 해당 특정 속성을 찾습니다. 모든 선택 이벤트는 데이터 항목의 valueKey 속성 값으로 처리됩니다. valueKey가 지정된 모든 콤보에는 입력에 지정된 개체 속성의 값으로만 구성된 선택/양방향 바인딩이 있어야 합니다.
      <igx-combo [data]="cities" valueKey="id" displayKey="name"></igx-combo>

      export class MyExampleCombo {
    public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
    ...
    selectFavorites() {
        // Selection is handled with the data entries' id properties
        this.combo.selectItems(['UK01', 'BG01']);
    }
}
      • 콤보라면 하지 않습니다 가지고있다 valueKey 한정된, 모두 선택 이벤트는 다음과 같이 처리됩니다. 평등 (===). 모든 콤보는 하지 마라 가지고있다 valueKey 지정되면 선택/양방향 바인딩이 처리되어야 합니다. 참고자료 데이터 항목에:
      <igx-combo [data]="cities" displayKey="name"></igx-combo>

      export class MyExampleCombo {
    public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
    ...
    selectFavorites() {
        // Selection is handled with references to the data entries
        this.combo.selectItems([this.data[0], this.data[1]]);
    }
}

      추가 정보 및 공식 문서에서 콤보 설정에 대한 자세한 내용을 읽을 수 있습니다.

    From 8.0.x to 8.1.x

    • ​igx-paginator 구성 요소는 독립형 구성 요소로 도입되었으며 Grid 구성 요소에도 사용됩니다. paginationTemplate 설정한 경우 페이지 매김을 올바르게 표시하려면 CSS를 수정해야 할 수도 있습니다. 이는 콘텐츠를 중앙에 배치하기 위해 CSS 규칙을 사용하는 페이징별 컨테이너 아래에 템플릿이 더 이상 적용되지 않기 때문에 수동으로 추가해야 할 수도 있기 때문입니다. 스타일은 다음과 비슷해야 합니다.
    <igx-grid #grid [data]="data" [paging]="true" [perPage]="10" [paginationTemplate]="pager">
</igx-grid>
<ng-template #pager>
    <div class="pagination-container"></div>
</ng-template>

    .pagination-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

    From 7.3.x to 8.0.x

    • ​Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.1.1 <3.3", would install "3.4.5")., @angular/core 패키지를 먼저 업데이트해야 합니다. 이는 알려진 Angular CLI 문제와 관련이 있습니다.
    • ​igniteui-angular 패키지를 업데이트하는 동안 다음 Package "igniteui-angular" has an incompatible peer dependency to "web-animations-js" (requires "^2.3.1", would install "2.3.2-pr208")​ ​ng update igniteui-angular --force 사용하여 업데이트해야 합니다. igniteui-angular 업데이트하기 전에 @angular/core 및 @angular/cli 업데이트하면 이런 일이 발생할 수 있습니다.

    From 7.2.x or 7.3.x to 7.3.4

    • ​IgxGrid, IgxTreeGrid 또는 IgxHierarchicalGrid의 filterGlobal 메소드를 사용하는 경우 condition 매개변수는 더 이상 선택사항이 아니라는 점을 알아야 합니다. 잘못된 조건으로 filterGlobal 메서드를 호출하면 모든 열에 대한 기존 필터가 지워지지 않습니다.

    From 7.1.x to 7.2.x

    • ​combo.value과 함께 IgxCombo를 사용하는 경우 이제 combo.value은 getter일 뿐이라는 점을 알아야 합니다.
    • ​IgxTextHighlightDirective 사용하는 경우 page 입력 속성이 더 이상 사용되지 않는다는 점을 알아야 합니다. IActiveHighlightInfo 인터페이스의 rowIndex, columnIndex 및 page 속성도 더 이상 사용되지 않습니다. 대신 row 및 column 선택적 속성이 추가됩니다.
    • 당신이 사용하는 경우 button-theme, 당신은 $button-roundness 각 버튼 유형은 다음으로 대체되었습니다. $flat-border-radius, $raised-border-radius, $outline-border-radius, $fab-border-radius, $icon-border-radius.

    From 7.0.x to 7.1.x

    • 애플리케이션에서 요약과 함께 IgxGrid를 사용하는 경우 이제 요약 행에 필요한 높이를 계산하기 위해 빈 데이터로 IgxSummaryOperand.operate() 메서드가 호출된다는 점을 알아야 합니다. 사용자 정의 요약 피연산자의 경우 메소드는 항상 적절한 길이의 IgxSummaryResult 배열을 반환해야 합니다.

      버전 7.1 이전:

    export class CustomSummary extends IgxNumberSummaryOperand {
	public operate(data?: any[]): IgxSummaryResult[] {
		return [{
			key: 'average',
			label: 'average',
			summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
		}];
	}
}

    Since version 7.1:

    export class CustomSummary extends IgxNumberSummaryOperand {
	public operate(data?: any[]): IgxSummaryResult[] {
		return [{
			key: 'average',
			label: 'average',
			summaryResult: data.length ?  IgxNumberSummaryOperand.average(data).toFixed(2) : null
		}];
	}
}

    From 6.0.x to 6.1.x

    • 애플리케이션에서 IgxCombo 컨트롤을 사용하고 itemsMaxWidth 옵션을 설정한 경우 이 옵션을 itemsWidth로 변경해야 합니다.