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 and IgxExpansionPanelDescriptionDirective show tooltip of the provided text content.
• IgxDateRangePicker
  • 한 주의 숫자가 옆에 표시될지 여부를 토글하는 입력이 추가되었습니다 showWeekNumbers.
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCount can now also be bound as Input in remote virtualization scenarios.
  • rowExpandedIndicatorTemplate, rowCollapsedIndicatorTemplate, headerExpandedIndicatorTemplate,이제 headerCollapsedIndicatorTemplate 행 및 헤더 확장/축소 표시기에 대한 템플릿을 각각 제공하도록 바인딩 Input 할 수도 있습니다. 이는 재사용을 허용하기 위해 기존의 동등한 템플릿 지시문에 추가됩니다.
• IgxPivotGrid
  • UI를 pivotConfiguration 통해 속성이 변경될 때마다 트리거되는 이벤트가 추가되었습니다 pivotConfigurationChanged.
• 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 관련 프로젝트에 대해 알아보십시오. 별을 주세요깃허브우려 사항, 질문 또는 기능 요청을 해결하여 제품을 지속적으로 개선할 수 있도록 도와주세요.문제우리는 귀하의 모든 요구 사항을 충족하고 쉽게 앱을 구축할 수 있도록 제품 경험을 지속적으로 개선하기 위해 최선을 다할 것입니다.