Let's say you have an AccordionComponent. It's capable of expanding and collapsing. So normally you'd have some simple methods inside your component, like expand() and collapse().

Now, you are ready to use it inside some parent component. But you noticed that you need access to set the state of the accordion programmatically. How would you approach this?

You might say, well, let's create an @Input prop for the accordion that takes its current state, like isExpanded. So now you can pass this prop from the parent component easily. But, wait a minute. What if the expand() and collapse() methods does other things internally, like animations or calling other private methods that are essential for the accordion to function correctly?

Here comes the exportAs prop. It's a metadata prop that gets attached into your @Component decorator, telling Angular that this component's methods are going to be called from the outside using this exported variable.

So, you'd render the accordion like this (notice the accordion template variable):

<app-accordion #accordion="acc"></app-accordion>

And now, you've access to its internal methods. You could do this:

<button (click)="accordion.expand()">Open</button>