Introduction
In this blog post, I want to describe how to perform UI customization using ViewContainerRef and Angular signals. Originally, I have a PokemonTabComponent that renders dynamic components using ViewContainerRef and the components are assigned a pokemon input. After rewrite, I refactor these components to inject Pokemon service in order to access the pokemon signal. After obtaining the signal in the component, the inline template can invoke signal function to render data subsequently.
Create a service using “Signals in a Service”
// pokemon.service.ts
// ...omitted import statements ...
const initialValue: DisplayPokemon = {
id: -1,
name: '',
height: -1,
weight: -1,
backShiny: '',
frontShiny: '',
abilities: [],
stats: [],
};
const pokemonTransformer = (pokemon: Pokemon): DisplayPokemon => {
const { id, name, height, weight, sprites, abilities: a, stats: statistics } = pokemon;
const abilities: Ability[] = a.map(({ ability, is_hidden }) => ({
name: ability.name,
isHidden: is_hidden
}));
const stats: Statistics[] = statistics.map(({ stat, effort, base_stat }) => ({
name: stat.name,
effort,
baseStat: base_stat,
}));
return {
id,
name,
height,
weight,
backShiny: sprites.back_shiny,
frontShiny: sprites.front_shiny,
abilities,
stats,
}
}
@Injectable({
providedIn: 'root'
})
export class PokemonService {
private readonly pokemonIdSub = new BehaviorSubject(1);
private readonly httpClient = inject(HttpClient);
private readonly pokemon$ = this.pokemonIdSub
.pipe(
switchMap((id) => this.httpClient.get<Pokemon>(`https://pokeapi.co/api/v2/pokemon/${id}`)),
map((pokemon) => pokemonTransformer(pokemon))
);
pokemon = toSignal(this.pokemon$, { initialValue });
personalData = computed(() => {
const { id, name, height, weight } = this.pokemon();
return [
{ text: 'Id: ', value: id },
{ text: 'Name: ', value: name },
{ text: 'Height: ', value: height },
{ text: 'Weight: ', value: weight },
];
});
updatePokemonId(input: PokemonDelta | number) {
if (typeof input === 'number') {
this.pokemonIdSub.next(input);
} else {
const potentialId = this.pokemonIdSub.getValue() + input.delta;
const newId = Math.min(input.max, Math.max(input.min, potentialId));
this.pokemonIdSub.next(newId);
}
}
}
First, I define PokemonService to create pokemon signal and use computed keyword to compute personalData signal based on it. When pokemonIdSub BehaviorSubject emits an id in updatePokemonId method, a HTTP request is made to retrieve the specified Pokemon from the API. However, HttpClient returns an Observable; therefore, I convert it to signal using toSignal with an initial value.
After PokemonService defines pokemon and personalData signals, components can inject the service to access the signals and call the signal functions within their inline templates.
The skeleton code of Pokemon Tab component
// pokemon-tab.component.ts
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, OnInit, ViewChild, ViewContainerRef, inject } from '@angular/core';
type SelectionType = 'ALL' | 'STATISTICS' | 'ABILITIES';
@Component({
selector: 'app-pokemon-tab',
standalone: true,
template: `
<div style="padding: 0.5rem;">
<div>
<div>
<input id="all" name="type" type="radio" (click)="renderComponentsBySelection('ALL')" checked />
<label for="all">All</label>
</div>
<div>
<input id="stats" name="type" type="radio" (click)="renderComponentsBySelection('STATISTICS')" />
<label for="stats">Stats</label>
</div>
<div>
<input id="ability" name="type" type="radio" (click)="renderComponentsBySelection('ABILITIES')" />
<label for="ability">Abilities</label>
</div>
</div>
</div>
<ng-container #vcr></ng-container>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PokemonTabComponent {
@ViewChild('vcr', { static: true, read: ViewContainerRef })
vcr!: ViewContainerRef;
selection: SelectionType = 'ALL';
componentRefs: ComponentRef<any>[] = [];
cdr = inject(ChangeDetectorRef);
async renderComponentsBySelection(selection: SelectionType) {}
}
In PokemonTabComponent standalone component, nothing happens when clicking the radio button. However, the behaviour will change when I add new logic to call ViewContainerRef API to create components and trigger change detection. Therefore, I inject ChangeDetectorRef and assign the reference to cdr for change detection purpose.
Determine component types based on radio selection
// pokemon-tab.component.ts
private async getComponenTypes() {
const { PokemonStatsComponent } = await import('../pokemon-stats/pokemon-stats.component');
const { PokemonAbilitiesComponent } = await import('../pokemon-abilities/pokemon-abilities.component');
if (this.selection === 'ALL') {
return [PokemonStatsComponent, PokemonAbilitiesComponent];
} else if (this.selection === 'STATISTICS') {
return [PokemonStatsComponent];
}
return [PokemonAbilitiesComponent];
}
First, I define getComponenTypes method that loads PokemonStatsComponent and PokemonAbilitiesComponent from component files. When selection is ALL, both components are returned. When selection is STATISTICS, the method returns PokemonStatsComponent only. Otherwise, the method returns PokemonAbilitiesComponent.
Leverage ViewContainerRef API for customization in PokemonTabComponent
async renderComponentsBySelection(selection: SelectionType) {
this.selection = selection;
await this.renderDynamicComponents();
}
When user clicks a radio button, inline template invokes renderComponentsBySelection to set the selection and delegate to renderDynamicComponents to call ViewContainerRef API.
destroyComponentRefs(): void {
// release component refs to avoid memory leak
for (const componentRef of this.componentRefs) {
if (componentRef) {
componentRef.destroy();
}
}
}
private async renderDynamicComponents() {
const componentTypes = await this.getComponenTypes();
// clear dynamic components shown in the container previously
this.vcr.clear();
this.destroyComponentRefs();
for (const componentType of componentTypes) {
const newComponentRef = this.vcr.createComponent(componentType);
// store component refs created
this.componentRefs.push(newComponentRef);
// run change detection in the component and child components
this.cdr.detectChanges();
}
}
When using ViewContainerRef API to create components, it is important to call clear to remove all components from the container and destroy all instances of ComponentRef to free memory. Next, ViewContainerRef iterates componentTypes to create components, keep track of ComponentRef and trigger change detection manually to display them.
If you ask where this.vcr comes from, it comes from the template variable, vcr, in the inline template.
<ng-container #vcr></ng-container>
@ViewChild('vcr', { static: true, read: ViewContainerRef })
vcr!: ViewContainerRef;
ViewChild selects the template variable and this.vcr has a valid ViewContainerRef object after Angular instantiates PokemonTabComponent component.
The application does not work at this point because dynamic components do not receive pokemon input during component creation. It is done on purpose. Next, I will rewrite other components to inject PokemonService and display signal value in their inline template.
Inject PokemonService to PokemonStatsComponent and PokemonAbilitiesComponent
// pokemon-stats.component.ts
export class PokemonStatsComponent {
pokemon = inject(PokemonService).pokemon;
}
Modify inline template to obtain statistics from pokemon signal
<div style="padding: 0.5rem;">
<p>Stats</p>
<ng-container *ngTemplateOutlet="content; context: { $implicit: pokemon().stats }"></ng-container>
</div>
<ng-template #content let-stats>
<div *ngFor="let stat of stats" class="stats-container">
<label>
<span style="font-weight: bold; color: #aaa">Name: </span>
<span>{{ stat.name }}</span>
</label>
<label>
<span style="font-weight: bold; color: #aaa">Base Stat: </span>
<span>{{ stat.baseStat }}</span>
</label>
<label>
<span style="font-weight: bold; color: #aaa">Effort: </span>
<span>{{ stat.effort }}</span>
</label>
</div>
</ng-template>
// pokemon-abilities.component.ts
export class PokemonAbilitiesComponent {
pokemon = inject(PokemonService).pokemon;
}
Modify inline template to obtain abilities from pokemon signal
<div style="padding: 0.5rem;">
<p>Abilities</p>
<ng-container *ngTemplateOutlet="content; context: { $implicit: pokemon().abilities }"></ng-container>
</div>
<ng-template #content let-abilities>
<div *ngFor="let ability of abilities" class="abilities-container">
<label>
<span style="font-weight: bold; color: #aaa">Name: </span>
<span>{{ ability.name }}</span>
</label>
<label>
<span style="font-weight: bold; color: #aaa">Is hidden? </span>
<span>{{ ability.isHidden ? 'Yes' : 'No' }}</span>
</label>
</div>
</ng-template>
Use computed signal in PokemonPersonalComponent
// pokemon-personal.component.ts
export class PokemonStatsComponent {
personalData = inject(PokemonService).personalData;
}
Modify inline template to display personal data in personalData signal
<div class="pokemon-container" style="padding: 0.5rem;">
<ng-container *ngTemplateOutlet="details; context: { $implicit: personalData() }"></ng-container>
</div>
<ng-template #details let-personalData>
<label *ngFor="let data of personalData">
<span style="font-weight: bold; color: #aaa">{{ data.text }}</span>
<span>{{ data.value }}</span>
</label>
</ng-template>
The following Stackblitz repo shows the final results:
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.
Top comments (0)