Rewrite to angular 2 or jQuery plugins

Question

I am currently starting my first project in Angular 2, this project has multiple form elements that will interact with each other. Example below:

<div class="form__elem form__elem__field">
    <input class="form__elem__field__input" type="text" name="name" id="firstname">
    <div class="form__elem__field__label">
        <label for="firstname" class="form__elem__field__label__content">Your Name</label>
    </div>
    <div class="form__elem__field__bar">
        <div class="form__elem__field__bar--default"></div>
        <div class="form__elem__field__bar--focus"></div>
        <div class="form__elem__field__bar--danger"></div>
        <div class="form__elem__field__bar--warning"></div>
    </div>
</div>

I want to add the class form__elem__field__bar--default--active to form__elem__field__bar--default upon focus on form__elem__field__input.

The form elements will also interact with other elements outside of the scope.

Do I need to write these interactions using Angular 2 or is it perfectly acceptable to create a jQuery plugin that I trigger using Angular

score 0 · Accepted Answer · edited May 23 '17 at 12:32

<div class="form__elem form__elem__field">
    <input class="form__elem__field__input" type="text" name="name" id="firstname" (focus)="focusFunction()">
    <div class="form__elem__field__label">
        <label for="firstname" class="form__elem__field__label__content">Your Name</label>
    </div>
    <div class="form__elem__field__bar">
        <div class="form__elem__field__bar--default" [ngClass]="{'my-class': isClassVisible }"></div>
        <div class="form__elem__field__bar--focus"></div>
        <div class="form__elem__field__bar--danger"></div>
        <div class="form__elem__field__bar--warning"></div>
    </div>
</div>


myClass:string = 'form__elem__field__bar--default';
focusFunction(){
    this.myClass = 'form__elem__field__bar--default--active';
}

read for more info HTML5 event handling(onfocus and onfocusout) using angular 2

Rewrite to angular 2 or jQuery plugins

1 Answers1