---
title: "Angular's 'exportAs' Feature: A Practical Guide to Sharing Component State"
date: "2022-09-30"
slug: "angulars-exportas-feature-a-practical-guide-to-sharing-component-state"
author: "Dany Paredes"
canonical: "https://danywalls.com/angulars-exportas-feature-a-practical-guide-to-sharing-component-state"
description: "In Angular when we build components with public properties or the state to share with others, some options come into our heads to solve it:\nEmit an event using the new value of the component state. Inject service with Subject to share the state. Inj..."
---
In Angular when we build components with public properties or the state to share with others, some options come into our heads to solve it:
- Emit an event using the new value of the component state.
- Inject service with Subject to share the state.
- Inject the component as a dependency like [How to Build Compound Components in Angular](https://www.danywalls.com/how-build-compound-components-in-angular)
All options are valid, but we miss another way to share our component state in the template is using the `exportAs` property.
## The exportAs
The `exportAs` property takes the Component or Directive name instance to make it available in the template.
```typescript
@Component({
selector: 'app-country',
templateUrl: './country.component.html',
styleUrls: ['./country.component.css'],
exportAs: 'countryContext'
})
```
It gives us access to the component instance, using a local variable in the template. For example, we create the variable #country to point to the `exportAs: countryContext` to access the `CountryComponent` instance, and we can use all public methods and properties anywhere in the template:
```html
```
## Recap
Using the `exportAs` help us not require changing the code in our components to inject a service o component as a dependency. The local variable gives the component access to all public methods or properties from the component only in the template.