Ignite UI for Angular 16.0.0: 흥미로운 개선 사항 보기

새로운 Angular v16 릴리스에 대해 모두 기대하고 있습니다! 우리는 독립형 API를 손에 넣고 향상된 반응성, 서버 측 렌더링 및 도구를 활용하기를 열망합니다. Infragistics 에서는 최상의 사용자 경험을 제공하고 최신 버전의 프레임워크, 플랫폼 및 기술에 대한 최신 정보를 제공하기 위해 노력하고 있습니다. 그렇기 때문에 Angular v16에 대한 완전한 지원과 함께 Ignite UI for Angular 16.0.0 릴리스에 포함된 내용을 공유하게 되어 기쁩니다.

Ignite UI for Angular 16.0.0의 새로운 기능

Ignite UI for Angular와 함께 독립 실행형 구성 요소 사용– 미리 보기 릴리스

가장 큰 차이점 중 하나는 Angular v16에는 독립형 구성 요소 라는 개념이 도입되었다는 것입니다. 이를 통해 NgModule을 사용할 필요성을 줄여 애플리케이션을 간단하게 구축할 수 있습니다.

전체 자막/제목에 대한 툴팁: Expansion 패널에 대한 호버링

16.0.0에 대한 전체 Ignite UI for Angular 변경 로그

일반적인

• Ignite UI for Angular 모든 컴포넌트는 이제 컴포넌트로 내보내집니다standalone. 라이브러리는 여전히 내보내기를 수행NgModules 하며, 하위 호환성을 위해 보존되었지만, 더 이상 Ignite UI for Angular 구성 요소를 선언하지 않습니다. 대신 부품을standalone 그냥 가져오기와 내보내기만 합니다. 구성 요소들은standalone 아직 미리보기 단계에 있다는 점을 명심하세요. 일부 유틸리티 지침 내보내기는 미래에 변경될 수 있으며, 초기 릴리스의 문서에서 누락되어 있어 해당 기능의 상태가 어떠한preview 것입니다.

  
  

  이제 다음을 수행 할 수 있습니다.

// IGX_GRID_DIRECTIVES exports all grid related components and directives
import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
})

또는

// Single import of only the <igx-grid> component.
import { IgxGridComponent } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IgxGridComponent, AsyncPipe]
})

or still

// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
import { IgxGridModule } from 'igniteui-angular';

@Component({
    selector: 'app-grid-sample',
    styleUrls: ['grid.sample.scss'],
    templateUrl: 'grid.sample.html',
    standalone: true,
    imports: [IgxGridModule, AsyncPipe]
})

• IgxChip
  • 행동 변화: 스타일을igxChip 다시 검토했고, 칩을 선택/해제할 때 컨테이너 선택 애니메이션이 제거되었습니다.
  • 행동 변화: 제거 버튼 동작이 다시 검토되었습니다. 칩이 어떤disabled 상태에 있을 때는 제거 버튼이 숨겨져 있습니다.
• IgxGrid, IgxHierarchicalGrid
  • 주요 변경 사항: IgxHeaderExpandIndicatorDirective 및 IgxHeaderCollapseIndicatorDirective 지시문과 headerExpandIndicatorTemplate 및 headerCollapseIndicatorTemplate 속성은 목적을 올바르게 반영하기 위해 각각 IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, headerExpandedIndicatorTemplate 및 headerCollapsedIndicatorTemplate으로 이름이 변경되었습니다. 자동 마이그레이션이 가능하며 ng 업데이트에 적용됩니다.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

주요 변경 사항: 버전 12.1.0부터 더 이상 사용되지 않는 다음 그리드 속성이 이제 제거되었습니다.

• evenRowCSS;
• oddRowCSS;
• 페이지;
• 페이징;
• 페이지당;
• 총 페이지;
• isFirstPage 입니다.
• isLastPage;

또한 다음과 같은 더 이상 사용되지 않는 그리드 이벤트가 제거되었습니다.

• pageChange;
• perPageChange;
• pagingDone;

그리드 API에서 제거된 더 이상 사용되지 않는 메서드는 다음과 같습니다.

• nextPage;
• previousPage;
• paginate;
• getCellByColumnVisibleIndex;

새로운 기능

• IgxChip
  • 다음 중 어느 값variant​'primary' 이든 취할 수 있는 새로운 입력'info': ,,'success','warning','danger'
• IgxExpansionPanel:
  • IgxExpansionPanelTitleDirective​IgxExpansionPanelDescriptionDirective그리고 제공된 텍스트 내용의 툴팁을 보여줍니다.
• IgxDateRangePicker
  • 주(week) 번호가 옆에 표시될지 여부를 토글하는 입력이 추가되었습니다showWeekNumbers​
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCount원격 가상화 시나리오처럼Input 바인딩도 가능합니다.
  • rowExpandedIndicatorTemplate​rowCollapsedIndicatorTemplate,,headerExpandedIndicatorTemplate,headerCollapsedIndicatorTemplate는 이제 각각 행과 헤더 확장/접힘 표시용 템플릿을 제공하는 용도로 묶Input을 수 있습니다. 이는 재사용을 허용하기 위한 기존 템플릿 지침에 추가된 것입니다.
• IgxPivotGrid
  • UIpivotConfigurationChanged를 통해 속성이pivotConfiguration 변경될 때마다 추가 이벤트가 트리거됩니다.
• ISortingExpression이제 데이터 항목의 키로 속성을 좁히fieldName 기 위한 선택적 일반 타입 매개변수를 받아들입니다. 예를 들어ISortingExpression<MyDataItem>
• Util
  • 원형 참조를 가진 객체 복제가 가능한 새로운CachedDataCloneStrategy 기능이 추가되었습니다.

요약

지속적으로 새로운 기능을 제공하고, 성능을 개선하고, 안정성을 지속적으로 개선하고 있습니다. 최고의 Angular UI 툴킷 및 관련 인사이트를 제공하기 위해 최선을 다하고 있으며, 더 많은 노하우를 제공하는 것이 목표입니다. 매우 중요한 최신 Pivot Grid 외에도 Angular Data Grid와 같은 다른 구성 요소도 매우 중요하다는 것을 알고 있습니다. 그렇기 때문에 모든 기능을 갖춘 Angular UI 그리드를 처음부터 만드는 방법을 배우는 데 도움이 되는 유용한 Angular UI 데이터 그리드 자습서를 게시했습니다. 가서 시청하세요.

또한 Sketch 또는 Adobe XD 디자인 파일을 실제 UI 구성 요소에 매핑하고 프로덕션 준비 코드를 생성하여 디자인-코드 프로세스를 가속화하는 최고의 클라우드 기반 로우 코드 앱 빌더 플랫폼 인 App Builder​를 계속 개발하고 있습니다. 이렇게 하면 Angular, Blazor 또는 Web Components 응용 프로그램을 그 어느 때보다 빠르게 생성할 수 있습니다. 개선 사항 중 일부는 GitHub 리포지토리를 통해 귀하와 같은 사용자의 요청 덕분입니다. 이를 염두에 두고 우리는 항상 제안과 피드백에 열려 있습니다 – 이를 통해 우리는 성장하고 귀하의 개발 요구 사항에 더 잘 부응할 수 있습니다. 마지막으로, 다음 목표에 대한 투명성과 가시성 또한 매우 중요하다는 것을 알고 있습니다. 그렇기 때문에 로드맵을 항상 최신 상태로 유지합니다!

또한

우리를 따라 오세요보통최신 정보를 얻고 우리가 진행하고 있는 최신 Angular 관련 프로젝트에 대해 알아보십시오. 별을 주세요깃허브우려 사항, 질문 또는 기능 요청을 해결하여 제품을 지속적으로 개선할 수 있도록 도와주세요.문제우리는 귀하의 모든 요구 사항을 충족하고 쉽게 앱을 구축할 수 있도록 제품 경험을 지속적으로 개선하기 위해 최선을 다할 것입니다.