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 componentes Ignite UI for Angular agora são exportados como standalone componentes. A biblioteca ainda exporta NgModules, que foi preservada para compatibilidade com versões anteriores, mas não declara mais nenhum dos Ignite UI for Angular componentes. Em vez disso, eles apenas importam e exportam os standalone componentes. Lembre-se de que os standalone componentes ainda estão em um estágio de visualização. Algumas exportações de diretivas de serviços públicos podem mudar no futuro e podem estar ausentes da documentação na versão inicial, daí o preview 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: Os igxChip estilos foram revisitados e a animação do contêiner de seleção foi removida ao selecionar/desmarcar um chip.
  • Mudança comportamental: O comportamento do botão de remoção foi revisitado. Agora, quando o chip está em um disabled estado, o botão 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 entrada variant que pode assumir qualquer um dos seguintes valores: 'primary', 'info', 'success', 'warning', 'danger'
• IgxExpansionPanel:
  • IgxExpansionPanelTitleDirective and IgxExpansionPanelDescriptionDirective show tooltip of the provided text content.
• IgxDateRangePicker
  • Adicionada showWeekNumbers entrada que alterna se o número de uma semana ficará visível ao lado dela
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCount can now also be bound as Input in remote virtualization scenarios.
  • rowExpandedIndicatorTemplate, rowCollapsedIndicatorTemplate, headerExpandedIndicatorTemplate,agora headerCollapsedIndicatorTemplate também pode ser vinculado Input para fornecer modelos para os indicadores de expansão/recolhimento de linha e cabeçalho, respectivamente. Isso é um acréscimo às diretivas de modelo equivalentes existentes para permitir a reutilização.
• IgxPivotGrid
  • Evento adicionado pivotConfigurationChanged disparado pivotConfiguration sempre que qualquer uma das propriedades é alterada por meio da interface do usuário.
• ISortingExpression agora aceita um parâmetro de tipo genérico opcional para estreitamento de tipo da fieldName propriedade para chaves do item de dados, por exemplo, ISortingExpression<MyDataItem>
• Util
  • Adicionado novo CachedDataCloneStrategy 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.