How to adjust the arrow icon in a dropdown menu when the user clicks outside in angular?

Question

How to control the icon direction when click outside (empty space)?
-fa-angle-up when the user open the dropdown

-fa-angle-down when the user close/default the dropdown

here is stackblitz

Answer 1

In template you could use blur listener, so when focus goes away from element (e.g clicking outside) it would turn the flag.

(blur)="menuExpandCategory = !menuExpandCategory"

Forked: https://stackblitz.com/edit/angular-v6heew?file=src%2Fapp%2Fapp.component.html