Communicate and Share Component State Using exportAs

When we build applications, sharing state is something important. In Angular, we have a few ways to communicate and share state in our components using EventEmitter and services to share state with Subject or BehaviorSubject, but one of the lesser-known but valuable Angular features is exportAs.

The exportAs property is used in @Component or @Directive to provide an alias for a component or directive instance, making it easier to reference within the template.

When we define a component or directive, we can use the exportAs property to give it an alias. This alias can then be used in the template to create a local template variable, which refers to the component or directive instance.

I think the best way to learn is with a real scenario where we can use the power of exportAs.

Scenario

We work with Bonnie in Angular Nation and need to create an application that allows users to select an avatar from a list, see the selected avatar, and add it to or remove it from favorites.

The final result looks like:

The Solution

Let’ start! Our solution is to create three components:

• AvatarList: It renders the list of avatars marked as favorites and allows us to push them to the favorites list or remove them.
• AvatarPreview: It shows the selected avatar.
• AvatarSelector: It shows the list of favorite avatars and updates it when an avatar is removed. It combines AvatarPreview and AvatarList.

As we said at the beginning, we have a few ways to solve this scenario:

• Create output properties from AvatarList to get the selected item, the list of favorites, and listen when removing one item.
• Another approach is to add a service to expose the selected$, favoriteList$, and subscribe to the component.

But we’re going to use exportAs to make it simple and easy!

Create the AvatarList

First, create the AvatarListComponent using Angular CLI:

ng g component/avatarlist --standalone

In the component, we’ll add the following properties and methods:

• avatars: a list of IDs to request the images from https://i.pravatar.cc/150?img=.
• Add a property selectedId = 1 with a default value of 1.
• favorites: where we’ll store the selected avatars.
• Two methods addFavorite and removeFavorite.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-avatar-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './avatar-list.component.html',
  styleUrls: ['./avatar-list.component.css'],
})
export class AvatarListComponent {

  avatars = [ 1,2,3,4,5,6,7,8,9,10]
  selectedId = 1;
  favorites: number[] = [];

  addFavorite(id: number) {
    this.favorites.push(id);
  }

  removeFavorite(id: number) {
    this.favorites = this.favorites.filter(favId => favId !== id);
  }
}

In the HTML Markup, we can render by calling the method and adding some logic:

• Use ngFor directive to show the list of avatars.
• Bind the (click) event for the image and update the selectedId with the item value.
• Add two emojis for remove and favorite and call the add and remove method.

The final code should look like this:

<div class="list-images">
  <div *ngFor="let item of avatars">
    <img   [src]="'https://i.pravatar.cc/150?img='+ item"  (click)="selectedId = item" />
    <span (click)="addToFavorites(item)">❤️</span>
    <span (click)="removeFavorite(item)">?️</span>
  </div>
</div>

We already set up the avatarListComponent. Next, we’ll add the avatarPreview component.

AvatarPreview

The AvatarPreview component shows a single image. The image ID is passed by the @Input() property id.

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-avatar-preview',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './avatar-preview.component.html',
  styleUrls: ['./avatar-preview.component.css']
})
export class AvatarPreviewComponent {
  @Input() id: number = 0;
}

The HTML Markup use the input id

<img  [src]="'https://i.pravatar.cc/300?img='+id">

Combine Components

To combine both components, we create avatar-selector. It works as a container for both avatar-preview and avatar-list. Because we are using standalone components, we must add them to the imports section.

First, create the avatar-selector using Angular CLI

ng g components/avatar-selector --standalone

Next, import both components into the imports section:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AvatarPreviewComponent } from '../avatar-preview/avatar-preview.component';
import { AvatarListComponent } from '../avatar-list/avatar-list.component';

@Component({
  selector: 'app-avatar-selector',
  standalone: true,
  imports: [CommonModule, AvatarPreviewComponent, AvatarListComponent],
  templateUrl: './avatar-selector.component.html',
  styleUrls: ['./avatar-selector.component.css'],
})
export class AvatarSelectorComponent {}

In the HTML Markup add the components:

<div class="selector">
  <app-avatar-preview/>
  <app-avatar-list/>
</div>

Sharing The State

We already have our components but have a few things left to complete our goal.

• How to pass the selectedId from avatar-list to avatar-preview?
• How to access the favoriteList from avatar-list?
• Print the list of favorite avatars from avatar-list and react when adding or removing one.

The magic comes with exportAs; it gives access from the template to the component instance. In our case, we use exportAs in the avatarList.

....
@Component({
  selector: 'app-avatar-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './avatar-list.component.html',
  styleUrls: ['./avatar-list.component.css'],
  exportAs: 'avatarListContext' //<!-- The magic is here ;) 
})
export class AvatarListComponent {
....

Now that you have the exportAs property set to ‘avatarListContext’, you can reference the directive instance in the template using this name:

<div class="selector">
  <app-avatar-preview [id]="avatarListContext.selectedId" />
  <app-avatar-list #avatarListContext="avatarListContext"/>
</div>

<div class="favorites" >
  <img *ngFor="let fav of avatarListContext.favorites" class="favorite"  [src]="'https://i.pravatar.cc/150?img='+ fav"  />
</div>

In this example, the #avatarListContext syntax creates a local template variable called avatarListContext. This variable is assigned to the instance of the avatarListComponent through the exportAs name. You can then use this variable to access to properties selectedId , favorites and also the public methods.

Recap

We’ve covered how easy is share the component or directives states by using exportAs, it makes it easier to work with directives and components in a more intuitive and declarative way. It allows you to encapsulate complex behavior and interactions and making the code more maintainable and readable.

I hope this little demo has piqued your curiosity and encouraged you to use it in future projects.

Code: GitHub