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
– Reactgular, Commented Jun 6, 2018 at 13:07

p4r1 · Accepted Answer · 2018-06-06 12:59:36Z

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 6, 2018 at 12:59

p4r1

2,6701 gold badge20 silver badges19 bronze badges

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

2 Comments

Reactgular Over a year ago

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.

Alex Maiburg Over a year ago

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 · Accepted Answer · 2018-06-06 13:57:06Z

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 6, 2018 at 13:57

Alex Maiburg

6905 silver badges10 bronze badges

1 Comment

Pardeep Jain Over a year ago

That's what I explained without example in my answer ;)

Pardeep Jain · Accepted Answer · 2018-06-06 12:58:37Z

0

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

for example -

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

Comments

user4676340 · Accepted Answer · 2018-06-06 13:13:23Z

0

Since you want to use a class, I would recommend using the document.

Start by declaring the document as part of your component :

export class MyComponent {
  document = document;
}

(I know, seems useless, but it's required).

Once you did that, you can use template variables and activeElement like this

<label [class.input-focused]="document.activeElement === nameInput">Name :</label>
<input #nameInput [class.focused]="document.activeElement === nameInput">

answered Jun 6, 2018 at 13:13

user4676340

Collectives™ on Stack Overflow

how to replace jquery in my angular application?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related