Back to the homepage
Angular

Build a Pokemon Gallery with New Control Flow in Angular 17

Introduction

In this blog post, I explained how to build a simple Pokemon Gallery using the new control flow in Angular 17. New control flow is a new feature in Angular 17 that introduces built-in blocks to show/hide elements conditionally, and render a list of elements in HTML templates. The purpose of the built-in blocks is to replace structure directives in most cases, and make writing HTML codes as intuitive as possible. Moreover,  these blocks are built-in; therefore, Angular developers do not  need to import anything to standalone components.

New Control Flow Structure directive equivalence Purpose
@if, @else if and @else NgIf,  NgElse and NgTemplate Show and hide component by condition
@for, @empty NgFor Iterate an array of data with a fallback when array is empty  
@switch, @case and @default NgSwitch, NgSwitchCase and NgSwitchDefault Match a value against cases and a default case when none of them matches

Use case of the demo

In this demo, the Pokemon gallery displays 300 Pokemons in 10 pages, or 30 Pokemons per page.  The page applies flexbox layout to arrange Pokemon cards and each card consists of id, name, weight and height.  When a user clicks on a pokemon name, the application navigates the user to the details page to display more physical attributes.

Define Routes

First, I defined routes to navigate to PokemonListComponent and PokemonComponent.

Second, I provided the routes to provideRouter function and enabled withComponentInputBinding feature. 

Display pokemon list in PokemonListComponent

The application needs to display a list of pokemons on the browser; therefore, I created a PokemonListComponent

pokemons is a signal that stores an array of pokemons.

In the inline template of the component, I used @for to iterate a list of pokemons and track keyword tracks each pokemon by its id. @for has a major benefit over ngFor by making track mandatory.  Track by can boost performance of a long list that consists of many items. 

Same as NgFor,  implicit variables are variable in @for 

In the above loop,  I assign the $index variable to idx in order to display row numbers. Other available implicit variables are $count, $first, $even and $odd.

Display Pokemon details in PokemonComponent

When a user clicks the hyperlink on a pokemon card, Angular routes the user to PokemonComponent to view the owner, abilities, statistics and physical attributes of the specific pokemon.

pokemonDetails$ is an Observable of pokemon, @if resolves the Observable and assigns the data to pokemonDetails variable. Then pokemonDetail is passed as the input of PokemonPhysicalComponent, PokemonStatisticsComponent and PokemonAbilitiesComponent respectively.

When the statistics array is non-empty, @for block iterates it to display the information of each element. Otherwise, @empty block displays “No Statistics” text. track stat.name indicates that items are tracked by name because name is unique for each Pokemon 

Similarly, the @for/@empty block displays the special abilities of a Pokemon. Pokemon does not have duplicated abilities; therefore, it is a unique key for each ability row.  When Pokemon has zero ability, then the empty block displays “No Ability” text.

Finally, I used @switch to show the owner of a few notable Pokemons. Pikachu, Stayyu, Steelix and Meowth are well-known in the series and their owners are either the series protagonists or antagonists.  When a well-known pokemon type matches a switch case,  the affiliation custom pipe displays its owner. When the pokemon has an unknown type, the unknown case  displays “Your team is unknown” text.  @default should never occur because the unknown case satisfies all the pokemons that play minor roles in the series.

When the value of affiliation.type  is pikachu, meowth, staryu or steelix, PokemonAffiliation is narrowed to owner property.  I provide affiliation.owner to the custom pipe to render. When the type property is unknown, PokemonAffiliation is narrowed to warningMessage property and the result is ‘Your team is unknown’.  It is feasible because @switch is capable of type narrowing in HTML templates. 

That is it. I created a simple Pokemon gallery using the new control to display pokemons.  The new control flow is more intuitive to use than the structure directives. Moreover, the syntax is also easier to learn and memorize than their counterparts. NgIf, ngSwitch and ngFor do not go away completely but I foresee the new control flow will be seen more frequently in HTML templates than them in Angular 17 and onwards. 

This is the end of the blog post and I hope you like the content and continue to follow my learning experience in Angular and other technologies.

Resources:

About the author

Connie Leung

Google Developer Expert for Angular. Software Architect at Diginex, blogger and youtube content creator.

Don’t miss anything! Subscribe to our newsletter. Stay up-to-date with the latest trends, tips, meetups, courses and be a part of a thriving community. The job market appreciates community members.

Leave a Reply

Your email address will not be published. Required fields are marked *