首页 > 代码库 > [Angular] Alternative Themes - Learn the Host-Context Selector

[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>

 

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