La propiedad 'exportAs' en Angular: Guía práctica para compartir el estado de componentes

En Angular, cuando construyo componentes con propiedades públicas o con un estado que necesito compartir con otros, suelen venirme a la mente varias alternativas para resolverlo:

• Emitir un evento con el nuevo valor del estado del componente.
• Inyectar un servicio con Subject para compartir el estado.
• Inyectar el componente como una dependencia, tal como explico en How to Build Compound Components in Angular.

Todas estas opciones son válidas, pero a veces pasamos por alto otra forma muy práctica de compartir el estado en el template: utilizar la propiedad exportAs.

La propiedad exportAs

La propiedad exportAs toma el nombre con el que queremos exponer la instancia del componente o directiva para que esté disponible en el template.

@Component({
  selector: 'app-country',
  templateUrl: './country.component.html',
  styleUrls: ['./country.component.css'],
  exportAs: 'countryContext'
})

Esto nos da acceso a la instancia del componente mediante una variable local en el template. Por ejemplo, creamos la variable #country que apunta a exportAs: countryContext para acceder a la instancia de CountryComponent. Con esto, podemos usar todos sus métodos y propiedades públicas en cualquier parte del template:

<div >
  From outside!
<app-nice-gif [selected]="country.selected"></app-nice-gif>
</div>
<app-country #country="countryContext">  <app-country-flag [selected]="country.selected"></app-country-flag>
  <app-country-flag [selected]="country.selected"></app-country-flag>
  <app-country-flag [selected]="country.selected"></app-country-flag>
  <app-banner [selected]="country.selected"></app-banner>
</app-country>

Resumen

Usar exportAs nos ayuda a evitar cambios en el código de nuestros componentes para inyectar servicios o componentes como dependencias. La variable local le da acceso al template a todos los métodos y propiedades públicas del componente únicamente dentro de la vista, manteniendo el código limpio y directo.