JavaScript in Angular | Event Binding

Question

I have a Twitter Bootstrap form that gets an orange border-bottom when it gets into focus. But the icon that is on the input line has its own border-bottom and i dont know how to bind the focus event in Angular to a function that makes the border-bottom of the icon also orange.

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

fjc · Accepted Answer · 2018-05-14 16:46:55Z

2

A simple way would be like this (simplified for readability):

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 = '';
}

More elegant:

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;
}

Without Angular, a plain CSS solution (preferable):

HTML:

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

CSS:

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

answered May 14, 2018 at 16:46

fjc

5,84521 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JKortmann Over a year ago

Where do you learned this? Do you have a tutorial for me to follow?

Collectives™ on Stack Overflow

JavaScript in Angular | Event Binding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related