how to replace jquery in my angular application?

Question

I'm building an Angular application and i'm using jquery to change an input class dynamically using focusin and focusout events, as you can see in the code below:

$(".form-input").focusin(function(){
        $(this).addClass("focus");
        $(this).prev().addClass("label-focus");
});
$(".form-input").focusout(function(){
        $(this).removeClass("focus");
        $(this).prev().removeClass("label-focus");
});

My doubt is: I read in the angular docs that i should'nt use angular with jquery and that i should use databinding instead, but how can i do it?

The problem here is that you're using a CSS selector to attach events. There isn't an equivalent feature in Angular, because Angular uses template expressions or host bindings. For example; we don't know if the above code is run for **all** `.form-input` elements on the HTML page across multiple components. This is why it's difficult to port jQuery to Angular. jQuery is selector based. Angular is component based. I think it's better to throw away all your jQuery code and just do it the proper Angular way. — Reactgular, Jun 06 '18 at 13:07

score 2 · Answer 1 · answered Jun 06 '18 at 12:59

2

Pardeep's answer works, but you can do this using pure CSS. Add this to your component style:

.form-input:focus {
    background-color: red;
}

answered Jun 06 '18 at 12:59

p4r1

2,490
16
18

good answer, but the original code is mutating the DOM element next to `.form-input` by adding/removing `.label-focus` when the input has focus or not. I don't think you can do this via pure CSS. – Reactgular Jun 06 '18 at 13:09
The answer is partially right because by focusing the input, you can't dynamically change the correspondig label with pure CSS. Or did I miss something? – Alex Maiburg Jun 06 '18 at 13:11

score 1 · Accepted Answer · answered Jun 06 '18 at 13:57

1

You could also use ngClass:

<label for="input" [ngClass]="{ 'active': isActive}">Name</label>
<input
  type="text"
  name="input"
  [ngClass]="{ 'active': isActive}"
  (focus)="isActive = !isActive"
  (blur)="isActive = !isActive">

And declare a property in the component:

export class AppComponent  {
  isActive = false;
}

https://stackblitz.com/edit/toggle-class-on-focus-and-blur-event-in-angular

answered Jun 06 '18 at 13:57

Alex Maiburg

690
5
10

That's what I explained without example in my answer ;) – Pardeep Jain Jun 06 '18 at 19:36

score 0 · Answer 3 · answered Jun 06 '18 at 12:58

Try to avoid jQuery with angular as official stated instead simply use databinding or even binding in Angular.

for example -

<input (focus)='focusEvent($event)'>

how to replace jquery in my angular application?

4 Answers4