JavaScript в Angular | Привязка событий

Question

У меня есть форма Twitter Bootstrap, которая становится оранжевой рамкой, когда попадает в фокус.Но значок, который находится в строке ввода, имеет собственную рамку-дно, и я не знаю, как связать событие фокуса в Angular с функцией, которая делает рамку-нижнюю часть значка также оранжевым.

<form>
    <div class="form-group">
        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text" id="emailInputIcon"><i class="fal fa-envelope"></i></div>
            </div>
            <input type="email" class="form-control" id="emailInputLogin" aria-describedby="emailHelp" placeholder="EMAIL">
        </div>
     </div>
     <div class="form-group">
         <div class="input-group">
             <div class="input-group-prepend">
                 <div class="input-group-text" id="passwordInputIcon"><i class="fal fa-key"></i></div>
             </div>
             <input type="password" class="form-control" id="passwordInputLogin" placeholder="PASSWORD">
         </div>
     </div>
 <button type="submit" class="btn btn-primary">Login</button>
</form>

Answer 1

A простой способ будет выглядеть следующим образом (упрощен для удобства чтения):

HTML:

<input (focus)="onInputFocused()" (blur)="onInputBlurred()" />
<div class="icon" #icon></div>

TS:

@ViewChild('icon') icon: ElementRef;

onInputFocused() {
    this.icon.nativeElement.style.borderBottom = 'orange 1px solid';
}
onInputBlurred() {
    this.icon.nativeElement.style.borderBottom = '';
}

---

Более элегантно:

HTML:

<input (focus)="onInputFocused()" (blur)="onInputBlurred()" />
<div class="icon" [ngClass]={'withBorder': focused}></div>

TS:

focused = false;
onInputFocused() {
    this.focused = true;
}
onInputBlurred() {
    this.focused = false;
}

CSS:

.withBorder {
    border-bottom: orange 1px solid;
}

---

Без Angular, простое решение CSS (предпочтительно):

HTML:

<div class="has-input">
    <input type="text" />
    <div class="icon"></div>
</div>

CSS:

.has-input input:focus + .icon {
    border-bottom: orange 1px solid;
}