[Angular] Alternative Themes - Learn the Host-Context Selector

To add alernative theme, we can use :host-context() selector from Angular.

//au-fa-input-red-theme.css

:host-context(.au-fa-input-red-theme) {
  border-color: red;
}

So it will apply ‘border-color: red‘ only when host wrapper element has ‘au-fa-input-red-theme‘ class.

        <div class="form-row au-fa-input-red-theme">
            <label>Email:</label>

            <au-fa-input id="email-field" icon="envelope">
                <input type="email" name="email" placeholder="Email" autocomplete="off" class="test-class">
            </au-fa-input>

        </div>