Controle o fluxo no Angular 17: eleve sua experiência de desenvolvimento

Estou animado para compartilhar que você pode aprimorar sua experiência de desenvolvimento Angular em componentes Ignite UI for Angular adotando a nova sintaxe de modelo de bloco para um fluxo de controle integrado e otimizado. Esse recurso poderoso simplifica seu código, melhora a verificação de tipo, reduz o tamanho do pacote e aumenta o desempenho. Então, agora, vamos mergulhar em alguns exemplos de código para ver a sintaxe em ação!

Try Ignite UI for Angular

O que é fluxo de controle integrado no Angular?

O termo "Fluxo de Controle" em Angular refere-se à ordem na qual instruções e diretivas são executadas em um aplicativo Angular. No Angular 17, há uma nova sintaxe integrada otimizada para gerenciar o fluxo de controle (@if, @switch, @for), oferecendo aos desenvolvedores um controle mais preciso sobre o fluxo de execução. Isso aproxima os desenvolvedores de padrões familiares na maioria das linguagens de programação, minimizando erros na construção de visualizações de aplicativos. Ele está diretamente disponível e pronto para uso em modelos sem importações adicionais.

No Angular 17, o Fluxo de Controle é gerenciado pelo sistema de detecção de alterações refinado, aplicando com eficiência as alterações de estado do aplicativo à exibição. Isso ressalta o papel da Angular como fornecedora de uma base sólida para a criação de aplicativos da Web modernos e interativos.

Começando com instruções condicionais

O que você precisa fazer é atualizar seu *ngIf e *ngSwitch com a nova sintaxe para um código mais intuitivo e limpo.

@if

Utilize o @if em um modelo IgxColumn do IgxGrid para renderização condicional:

<igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'"> 
    <ng-template igxCell let-cell="cell" let-val> 
        @if (val) { 
            <img src="assets/active.png" title="Continued" alt="Continued" />
        } @else { 
            <img src="assets/expired.png" title="Discontinued" alt="Discontinued" /> 
        } 
    </ng-template> 
</igx-column> 

@if de demonstração em IgxColumn

@switch 

Aplique @switch diretiva dentro de um IgxSelectItem do componente IgxSelect para seleção dinâmica de ícones:

<igx-select-item [value]="fruit.type" class="select__entry" [text]="fruit.type">
    {{fruit.type}}
    @switch (fruit.delivery) {
    @case ('flight') { <igx-icon>flight</igx-icon> }
    @case ('train') { <igx-icon>train</igx-icon> }
    @case ('boat') { <igx-icon>directions_boat</igx-icon> }
    }
</igx-select-item>

@switch de demonstração no IgxSelect

Vamos falar sobre o loop for integrado Próximo

Experimente uma velocidade de renderização mais rápida com o novo loop for integrado.

@for

Muitos casos de uso podem ser descobertos com isso. O exemplo aqui usa o IgxDropDown:

@for (town of towns | startsWith:townSelected; track town.name) {
    <igx-drop-down-item [value]="town">
        {{town}}
    </igx-drop-down-item>
}

Demo For Loop in IgxDropDown 

Ou fazendo um loop nas colunas da grade:

@for(c of columns; track c.field) {
    <igx-column
    [field]="c.field"
    [header]="c.field"
    [cellStyles]="c.cellStyles">
    </igx-column>
}

Demonstração para loop no IgxGrid 

Exibições adiáveis para carregamento lento

Aproveite as novas exibições adiáveis para aprimorar o carregamento lento com uma abordagem declarativa e poderosa. Esse novo recurso pode dar a você a capacidade de criar um carregamento adiado dos itens da lista dos componentes IgxList. Eles aparecerão após um clique no botão:

<igx-list #fruitList>
    @defer (on interaction(b1)) {
        @for(fruit of fruitsData; track fruit) {
            <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content">
                {{ fruit }}
            </igx-list-item>
        }
    } @placeholder {
        <button #b1 type="button" igxButton="raised">Click here to trigger interaction</button>
    }
</igx-list>

Demonstração de visualização diferida com IgxList 

Amostra combinada

Se desejar, você pode explorar um exemplo mais abrangente que integra todos os recursos mencionados. Aqui, podemos adiar o conteúdo principal da gaveta de navegação. Ele será carregado logo após a seleção de um item da navegação:

@defer(on interaction(drawer)) {
  <span igxButton="icon" igxToggleAction="navigation">
    <igx-icon family="material">menu</igx-icon>
  </span>
  <h5>{{selected}}</h5>
  @switch(selected) {
    @case('Grid') {
      <app-grid-adf-style-sample></app-grid-adf-style-sample>
    }
    @case('Autocomplete') {
      <app-autocomplete></app-autocomplete>
    }
    @default {
      <app-reactive-form-validation></app-reactive-form-validation>
    }
  }
} @placeholder {
  <span>Pick a component from nav drawer to load...</span>
}

Você pode verificar a guia de rede para ver o tempo de carregamento inicial e os recursos do aplicativo. Como estamos adiando o conteúdo principal da gaveta de navegação, é isso que é carregado:

E depois que o usuário seleciona um item, o conteúdo e os recursos para a exibição estão sendo carregados:

Dependendo do tamanho das exibições adiadas, você pode aumentar drasticamente o tempo de carregamento. Mais informações sobre exibições adiadas podem ser encontradas aqui.  Além disso, a listagem dos itens de navegação pode ser obtida com a nova sintaxe:

@for(item of navItems; track item.name) {
  <span igxDrawerItem igxRipple (click)="navigate(item)">
    <igx-icon family="material">{{ item.name }}</igx-icon>
    <span>{{ item.text }}</span>
  </span>
}

Além disso, em uma das exibições do exemplo, há entradas de formulário reativas que utilizam esse recurso para mostrar as validações, ícones e dicas:

<igx-input-group>
    <label igxLabel for="password">Password</label>
    <input igxInput name="password" [type]="showPassword ? 'text' : 'password'" formControlName="password" />
    @if (password.errors?.minlength) {
        <igx-hint >Password should be at least 8 characters</igx-hint>
    }
    @if (password.value) {
        <igx-icon igxSuffix (click)="showPassword = !showPassword">
            {{ togglePasswordVisibility }}
        </igx-icon>
    }
</igx-input-group>

Começando

Atualize seu projeto Angular para a versão 17 e experimente o fluxo de controle interno hoje mesmo. Para usá-lo em seus projetos existentes. Explore a experiência aprimorada do desenvolvedor e aumente o desempenho do seu aplicativo Angular.

Boa codificação com o fluxo de controle de Angular aprimorado!