Ignite UI for Angular 16.0.0: Veja as melhorias interessantes

Estamos todos entusiasmados com o novo lançamento do Angular v16! Estamos ansiosos para colocar as mãos nas APIs autônomas e aproveitar a reatividade aprimorada, a renderização do lado do servidor e as ferramentas. No Infragistics, nos esforçamos para fornecer a você a melhor experiência de usuário possível e mantê-lo atualizado sobre as versões mais recentes de estruturas, plataformas e tecnologia. É por isso que estamos entusiasmados em compartilhar o que incluímos na versão Ignite UI for Angular 16.0.0, com suporte total para Angular v16.

Tudo o que há de novo no Ignite UI for Angular 16.0.0

Usando componentes autônomos com Ignite UI for Angular– Versão de visualização

Uma das maiores diferenças é que Angular v16 introduz o conceito de componentes autônomos. Isso permite uma maneira simplificada de criar aplicativos, reduzindo a necessidade de usar NgModules.

Dica de ferramenta para a legenda/título completo ao passar o mouse para o painel de expansão

O log de alterações do Ignite UI for Angular completo para 16.0.0

Geral

• Todos os Ignite UI for Angular componentes agora são exportados comostandalone componentes. A biblioteca ainda exportaNgModules, que foram preservadas para compatibilidade retroativa, mas não declaram mais nenhum dos componentes Ignite UI for Angular. Em vez disso, eles apenas importam e exportam osstandalone componentes. Tenha em mente que osstandalone componentes ainda estão em fase de prévia. Algumas exportações de diretivas de utilidade podem mudar no futuro e podem estar ausentes da documentação na versão inicial, daí opreview estado do recurso.

  
  

  Agora você pode fazer:

// 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]
})

ou

// 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
  • Mudança Comportamental: OsigxChip estilos foram revisados e a animação de selecionar contêiner foi removida ao selecionar/desselecionar um chip.
  • Mudança Comportamental: O comportamento do botão de remover foi revisitado. Agora, quando o chip está em umdisabled estado, o botão de remover fica oculto.
• IgxGrid, IgxHierarchicalGrid
  • Alteração significativa: As diretivas IgxHeaderExpandIndicatorDirective e IgxHeaderCollapseIndicatorDirective, bem como as propriedades headerExpandIndicatorTemplate e headerCollapseIndicatorTemplate foram renomeadas para IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, headerExpandedIndicatorTemplate e headerCollapsedIndicatorTemplate, respectivamente, para refletir adequadamente sua finalidade. As migrações automáticas estão disponíveis e serão aplicadas na atualização ng.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

Alterações significativas: As seguintes propriedades de grade, obsoletas desde a versão 12.1.0, foram removidas:

• evenRowCSS;
• oddRowCSS;
• página;
• paginação;
• por página;
• totalPages;
• éPrimeira Página;
• isLastPage;

Além disso, os seguintes eventos de grade obsoletos foram removidos.

• pageChange;
• perPageChange;
• pagingDone;

Os métodos obsoletos removidos da API de grade são:

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

Novos recursos

• IgxChip
  • Nova entradavariant que pode receber qualquer um dos seguintes valores:'primary','info','success','warning','danger'
• IgxExpansionPanel:
  • IgxExpansionPanelTitleDirectiveeIgxExpansionPanelDescriptionDirective mostrar a dica de ferramenta do conteúdo de texto fornecido.
• IgxDateRangePicker
  • Entrada adicionadashowWeekNumbers que alterna se o número de uma semana será visível ao lado
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCountAgora também podem ser vinculados, comoInput em cenários de virtualização remota.
  • rowExpandedIndicatorTemplate,rowCollapsedIndicatorTemplate,headerExpandedIndicatorTemplate,headerCollapsedIndicatorTemplate agora também pode ser vinculado paraInput fornecer modelos para os indicadores de linha e de cabeçalho expandindo/colapsando, respectivamente. Isso se soma às diretivas equivalentes existentes para permitir a reutilização.
• IgxPivotGrid
  • Evento adicionadopivotConfigurationChanged é acionado toda vez que algumapivotConfiguration das propriedades é alterada pela interface.
• ISortingExpressionagora aceita um parâmetro genérico opcional de tipo para o estreitamento de tipos dafieldName propriedade para chaves do item de dados, por exemplo.ISortingExpression<MyDataItem>
• Util
  • Adicionei um novoCachedDataCloneStrategy que permite clonar objetos com referências circulares.

Embrulhar

Continuamos a lançar novos recursos, melhorar o desempenho e fornecer melhorias de estabilidade continuamente. Comprometidos em fornecer a você o melhor kit de ferramentas de interface do usuário Angular e insights relacionados, nosso objetivo é capacitá-lo com mais know-how. Além do mais novo Pivot Grid que é tão crucial, sabemos que outros componentes como o Angular Data Grid também são super críticos. É por isso que publicamos um tutorial útil da Grade de Dados da IU do Angular para ajudar você a aprender a criar uma Grade de IU do Angular com todos os recursos do zero. Vá em frente e assista.

Também continuamos a desenvolver a melhor plataforma de criação de aplicativos low-code baseada em nuvem-App Builder- que acelera o processo de design para código mapeando arquivos de design Sketch ou Adobe XD para componentes reais da interface do usuário e criando código pronto para produção. Dessa forma, você pode gerar aplicativos Angular, Blazor ou Web Components mais rápido do que nunca. Algumas das melhorias são graças às solicitações de usuários como você por meio de nosso repositório GitHub. Com isso em mente, estamos sempre abertos a sugestões e feedbacks – isso nos faz crescer e atender melhor às suas necessidades de desenvolvimento. Por fim, sabemos que a transparência e a visibilidade de nossos próximos objetivos também são fundamentais. É por isso que mantemos o roadmap sempre atualizado!

Além disso

Siga-nos noMediumpara se manter atualizado e saber mais sobre os últimos projetos relacionados à Angular em que estamos trabalhando. Dê-nos uma estrela noGitHube ajude-nos a continuar melhorando nosso produto, abordando quaisquer preocupações, perguntas ou solicitações de recursos na seção de problemas. Continuaremos a fazer o nosso melhor para melhorar constantemente a experiência do produto para atender a todas as suas necessidades e criar aplicativos com facilidade.