업데이트 안내

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

    Ignite UI for Angular 패키지는 도식을 통한ng update 자동 버전 이전도 지원합니다. 이 모드들은 가능한 모든 변경 사항(셀렉터, 클래스, @Input/출력 속성 이름 변경)을 마이그레이션하려고 시도하지만, 여전히 마이그레이션이 불가능한 변경 사항이 있을 수 있습니다. 이들은 보통 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에서는 더 이상 지원되지 않는displayDensity 속성이 제거되고 사용자 정의 CSS 속성--ig-size으로 대체되었습니다. 추가 참고 사항은 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는 이제 유형IRowDataCancelableEventArgs​IGridEditEventArgs 대신 이벤트 인자를 방출합니다. 두 인터페이스는 여전히 호환되지만, 이 이벤트 속성들에 대해 중복이 되어, 이 속성cellID​newValue​oldValue​isAddRow 들은 더 이상 지원되지IRowDataCancelableEventArgs 않아 향후 버전에서 제거될 예정입니다. 올바른 새 인터페이스로 전환하면 안전하게 제거할 수 있는 사용 중단 사례가 드러날 것입니다.
      • 사용 중단
        • rowID속성은 다음 인터페이스에서 폐지되었으며, 향후 버전에서 삭제될 예정입니다.IGridEditDoneEventArgs​IPathSegment​IRowToggleEventArgs​IPinRowEventArgs​IgxAddRowParent 대신 사용rowKey 하세요.
        • primaryKey속성은 다음 인터페이스에서 폐지되었습니다:IRowDataEventArgs,IGridEditDoneEventArgs. 대신 사용rowKey 하세요.
        • data속성은 다음 인터페이스에서 폐지되었습니다:IRowDataEventArgs 대신 사용rowData 하세요.

    Breaking changes

    • 버전 17.1.x에서는 지시의 타입icon이igxButton 타입igxIconButton의flat 지시로 변경되었습니다. 자동 마이그레이션이 가능하며 적용ng update 될 예정입니다. 하지만 이전에 타입 버튼과igxButton 함께 사용할 수 있었던 일부icon 입력 속성은 새로 생성된igxIconButton 버튼에는 적용할 수 없습니다.igxButtonColor 또는 속성에igxButtonBackground 타입icon 버튼이 포함된 경우, 다음과 같이 업데이트해야 합니다:
    // 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에서는 패키지를@nguniversal/* 제거 Angular 했습니다. 프로젝트가 이 패키지들을 사용할 경우, 표준ng update 호출이 부적절하게 수정igniteui-angular 되어 마이그레이션에package-lock.json 오류가 발생할 수 있습니다 - 자세한 내용은 #13668 호에서 확인할 수 있습니다. 다음 중 하나로17.0.x 업데이트하려면 추가 단계를 밟아야 합니다:
      • 실행 전에 파일을 삭제하세요package-lock.json​ng update
      • 달리기 전에 달리기npm dedupe --legacy-peer-deps​ng update igniteui-angular

    획기적인 변화

    • InIgxCombo의 이벤트 인자 타입selectionChanging은IComboSelectionChangingEventArgs 다음과 같은 변화를 가진다:
      • 속성newSelection​oldSelection과 는 각각 기능을 더 잘 반영하기 위해 와newValue로 이름oldValue이 변경되었습니다. Combovalue와 마찬가지로, 설정된 여부에 따라valueKey 지정된 속성 값이나 전체 데이터 항목을 방출합니다. 자동 마이그레이션이 가능하며 적용됩니다ng update.
      • 두 개의 새로운 속성이 추가되어newSelection 기존 속성 대신 노출되며, 기존 속성oldSelection은 더 이상 영향을valueKey 받지 않고 콤보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

    • 우리는 구성 요소 크기를 설정하는 방법으로 인젝션 토큰을 버DisplayDensityToken 리고, CSS 사용자 지정 속성을 사용하는 더 단순하고 견고한 방식을 택하고 있습니다. 이 때문에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) orgetCellByColumn(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인자 유형이 변경됩니다. 이제 interface의 일부인oldSelection​newSelection​added​removed 컬렉션은 더 이상 선택된 요소의 행 키로 구성되지 않지만(그리드가 primaryKey를 설정했을 때), 어쨌든 행 데이터가 방출됩니다.IRowSelectionEventArgs 그리드가 원격 데이터를 처리하고 aprimaryKey가 설정되어 있을 때, 현재 그리드 뷰에 포함되지 않은 선택된 행에 대해 부분 행 데이터 객체가 출력됩니다.

    이벤트 핸들러의rowSelectionChanging 코드가 이벤트 인자에서 primaryKeys 읽기를 의존하고 있었다면, 다음과 같이 업데이트하세요:

      // 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);

      예

      .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 방향을 지원합니다. 이전에 특정 테마를 사용*-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

      • 변경 사항- 기본 위치설정의 열기/닫기 애니메이션이 /로fadeIn​fadeOut 변경되었습니다.

    • igxGrid, igxHierarchicalGrid, igxTreeGrid

      • 변경 변경- 다음의 폐지된 입력들이 삭제되었습니다 -showToolbar,toolbarTitle,columnHiding,.columnHidingTitle​hiddenColumnsText​columnPinning​columnPinningTitle​pinnedColumnsText 대신 사용IgxGridToolbarComponent 하세요.IgxGridToolbarHidingComponent​IgxGridToolbarPinningComponent​

      • 변경 사항- 컴포넌트를igx-toolbar 추가한 후에는 활성화할 기능을 수동으로 지정해야 합니다 - 열 숨기기, 고정, 엑셀 내보내기. 고급 필터링은 그리드의 입력 속성을 통해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

      • Break: Change-and​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

      • 그리드의 그룹 동작을 맞춤화할 수 있게 하는 입력groupStrategy을sortStrategy 노출시켰습니다.

    • IgxCsvExporterService, IgxExcelExporterService

      • 내보내기 서비스는 이제 루트 수준에 주입되므로 더 이상 애플리케이션에 제공할 필요가 없습니다.

    • IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent

      • 툴바의 드롭다운 버튼 안에 표시되는 텍스트를 설정하는 노출된 새로운 입력buttonText.

    • IgxCombo

      • 추가groupSortingDirection 된 입력 기능으로, 그룹 정렬 순서를 설정할 수 있습니다.

    • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

      • 헤더 정렬 표시기 재템플릿을 위한 새로운 지침 추가, -IgxSortHeaderIconDirective,IgxSortAscendingHeaderIconDirective 그리고IgxSortDescendingHeaderIconDirective​

    • IgxDialog

      • 탭 키 포커스가 대화 상자 안에 갇혀 있는지 설정하는 입력을 추가했습니다focusTrap. 기본값은true​

    • IgxColumnActionsComponent

      • 주요 변경 사항- 다음 입력이 제거되었습니다.
        • 입력columns. 대신 입력을 사용igxGrid columns 하세요.

    • IgxCarousel

      • Breaking Changes-회전목마 애니메이션 유형CarouselAnimationType이 이름이 변경HorizontalAnimationType 되었습니다.

    • IgxGridStateDirective- 이제 컬럼 프로펠러와 컬럼 그룹을 지원합니다disableHiding​

    테마

    • 아이콘 컴포넌color 트 속성은 더 이상 지원되지 않습니다. CSS 속성을 사용style.color 해 기본 색상을 변경하세요. 예시:
    <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개의 값 리스트를 나타내므로, 이들은 CSS 함수 중hsl 하나hsla에 전달되어야 합니다.

    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 모듈 시스템에 대해 더 잘 이해하고 싶다면, 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 버전 이후로 지원됩니다.

    해결책

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

    1. Angularng update 최신 버전으로 업데이트할 때는 기본적으로 dart-sass 컴파일러를 사용합니다 -Angular 12.1.0+는 기본적으로 dart-sass 컴파일러를 사용합니다.

      ng update [options]

      만약 어떤 이유로 Ignite UI / Angular CLI를 사용하지 않는다면, 노드 프로젝트에서 로node-sass 교체sass 해야 합니다.

      npm uninstall node-sass
npm install sass --save-dev

    2. 어떤 이유로 위의 방법을 사용하여 최신 버전의 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 되면 기존 아바타 테마가 이전되지만, 접두사와 접미사 파라미터가 없는 점을 고려해 추가 조정이 필요할 수 있습니다.

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

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

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

@include avatar($avatar-theme);

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

        $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 수행되면 기존 버튼 테마가 이전되지만, 접두사 매개변수가 없는 점을 고려해 추가 조정이 필요할 수 있습니다.

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

        <button igxButton="raised">Raised button</button>
<button igxButton="outlined">Outlined button</button>

        $my-button-theme: button-theme(
    $raised-background: red,
    $outlined-outline-color: green
);

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

        각 버튼 유형별로 별도의 테마를 만들고 CSS 셀렉터로 범위를 지정해야 합니다.

        <div class="my-raised-btn">
<button igxButton="raised">Raised button</button>
</div>
<div class="my-outlined-btn">
    <button igxButton="outlined">Outlined button</button>
</div>

        $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이 포함되어 있지만, 라벨이나 다른 맞춤 콘텐츠가 있을 수도 있습니다.

      • 헤더 스타일링을 위해 두 가지 새로운 지침 -igxBottomNavHeaderLabelandigxBottomNavHeaderIcon를 도입했습니다.

      • 헤더 컴포넌트가 이제 어떤 콘텐츠든 추가할 수 있게 되면서,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 andselectedItemChange를 도입했습니다. 안타깝게도 이러한 이벤트 변경에 적절한 마이그레이션을 마련하는 것은 적어도 복잡하므로, 오류는 프로젝트 수준에서 처리해야 합니다.

    IgxTabs component

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

    • 주형

      • 새로운 구조는 각각 헤더와 콘텐츠 구성 요소를 래핑하는 탭 항목 구성 요소를 정의합니다. 헤더에는 일반적으로 아이콘과 라벨이 포함되어 있지만 다른 사용자 정의 콘텐츠도 포함될 수 있습니다.

      • 헤더 스타일링을 위해 두 가지 새로운 지침 -igxTabHeaderLabelandigxTabHeaderIcon를 도입했습니다.

      • 헤더 컴포넌트가 이제 어떤 콘텐츠든 추가할 수 있게 되면서,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 같이 축약되었습니다.
        • ​type해당 부동산은 내용물과 고정 옵션으로 더 이상 이용할 수 없습니다. 헤더 크기 및 위치 지정 모드는 현재 입력 속성에 의해tabAlignment 제어되며, 이 속성은 시작(기본값), 센터, 끝, 그리고 정렬 네 가지 값을 받습니다. 이전contentFit 타입은 현재start 정렬 값에 해당하고, 이전fixed 타입은 현재justify 값에 해당합니다.
      • 그리고 사건들은tabItemSelected​tabItemDeselected 삭제되었습니다. 우리는 탭 선택에 더 많은 유연성과 제어를 제공하는 세 가지 새로운 이벤트와selectedIndexChanging​selectedIndexChange andselectedItemChange를 도입했습니다. 안타깝게도 이러한 이벤트 변경에 적절한 마이그레이션을 마련하는 것은 적어도 복잡하므로, 오류는 프로젝트 수준에서 처리해야 합니다.

    IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent

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

    공개 APIRowType는 IgxRowComponent 등 다른 사람들이 노출하는 데 사용했던 것과 동일하지만, 참고하세요:

    • IgxHierarchicalRowComponent에 의해 노출된 토글 방법은 사용할 수 없습니다. 모든 행 유형에 대해 속성을 사용expanded 하세요:
    grid.getRowByIndex(0).expanded = false;

    *row.rowData_와 row.rowID는 사용 중단되었으며 버전 13부터 완전히 삭제됩니다. 대신 row.data와 row.key를 사용해 주세요.

    • onRowPinning이 내보내는 이벤트 인수에 row 속성을, onRowDragStart에서 onRowDragEnd가 내보내는 이벤트 인자에 있는 dragData 속성이 이제 구현되고 있습니다RowType
    • NG 업데이트는 IgxGridRowComponent, IgxTreeGridRowComponent, IgxHierarchicalRowComponent, IgxGridGroupByRowComponent의 대부분의 가져오기, 타입, 캐스트와 같은 용도를 이전합니다. 위 중 어느 하나라도 코드를 사용하는 부분이 마이그레이션되지 않았다면, 타이핑이나 캐스트를 제거하거나 다른RowType 것으로 변경하면 됩니다.
    • getRowByIndex 이제 다시 돌아올 것입니다RowType 객체, 해당 인덱스의 행이 요약 행(이전에 반환된 데 사용됨)이라면 정의되지 않음). row.is요약Row 그리고 row.isGroupByRow 인덱스의 행이 요약 행이거나 행별 그룹일 경우 참을 반환합니다.

    IgxInputGroupComponent

    • 그 부동산은disabled 철거되었습니다. 이 부동산은 오해의 소지가 있었는데, 입력 그룹의 상태는 항상 원고igxInput가 관리했기 때문입니다.

      • Running은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
      • 엑셀 스타일 필터 메뉴의 일부 부분을 템플릿화하는 데 사용된 ,,IgxExcelStyleSortingTemplateDirective​IgxExcelStyleHidingTemplateDirective 그리고IgxExcelStyleMovingTemplateDirective 지시문을 제거IgxExcelStylePinningTemplateDirective​IgxExcelStyleSelectingTemplateDirective 했으니, 새로 추가된 명령어를 열과 필터 작업 영역을 템플릿화하는 데 사용할 수 있습니다 -IgxExcelStyleColumnOperationsTemplateDirectiveandIgxExcelStyleFilterOperationsTemplateDirective. 또한 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의 획기적인 변경으로 인해 해머 공급자가 더 이상 암묵적으로 추가되지 않습니다 자세한 내용은 다음 문서를 참조해 주시기 바랍니다: 따라서 다음 구성 요소들이 필요로 합니다.HammerModule 애플리케이션의 루트 모듈에서 가져오기 위해 접촉 예상대로 작동하기 위한 상호작용:

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

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

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

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

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

    일부 We export의Enumerations 이름 변경으로 인해 회원 수작업 업데이트가 필요합니다. 수동 업데이트가 필요한 모든 변경 사항 목록은 다음과 같습니다:

    • 아바타타입.DEFAULT-> IgxAvatarType.CUSTOM
    • 타입.DEFAULT-> Igx배지타입.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 독립형 컴포넌트로 도입되며 그리드 컴포넌트에서도 사용됩니다. 만약 를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 업데이트해야 합니다. 업데이트@angular/core 하고@angular/cli 업데이트igniteui-angular 전에 이런 일이 생길 수 있습니다.

    From 7.2.x or 7.3.x to 7.3.4

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

    From 7.1.x to 7.2.x

    • IgxCombocombo.value를 사용한다면, 지금combo.value은 게터일 뿐임을 알아야 합니다.
    • 만약 사용IgxTextHighlightDirective 한다면, 입력 속성이 더 이상 지원되지page​rowIndex​columnIndex 않는다는 것과 인터페이스의page 속성도 더 이상 지원되지 않는다는 점을 알아야IActiveHighlightInfo 합니다. 대신,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)
  }];
 }
}

    버전 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