title: What is the right way to use an attribute directive to create conditional styling on an input element in an angular app?
body: <p>I am building an angular application and I want to use an attribute directive to style an input based on user input. I want this directive to apply a red border to the input, if the input is invalid. I have checked the docs on how to do this. <a href="https://angular.io/guide/attribute-directives" rel="nofollow noreferrer">attribute directive docs</a> and I have also checked the docs on ElementRef <a href="https://angular.io/api/core/ElementRef" rel="nofollow noreferrer">ElementRef docs</a> The thing that makes me confused is that attribute directive docs says to do it by using ElementRef, and then in the ElementRef docs it says use this technique with extreme caution and only as a last resort. It seems weird that angular would provide a tool such as a directive that seems especially designed for this situation and then not tell you that it is not a good idea to use it and uncover that somewhere else in the docs. This brings me to my question. What is the right way to use an attribute directive to create conditional styling on an input element?</p>