Rewrite zu eckigen 2 oder jQuery Plugins

Question

Ich beginne gerade mein erstes Projekt in Angular 2, dieses Projekt hat mehrere Formularelemente, die miteinander interagieren werden. Beispiel unten:

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

möchte ich auf form__elem__field__input die Klasse form__elem__field__bar--default--active-form__elem__field__bar--default auf Fokus hinzuzufügen.

Die Formularelemente interagieren auch mit anderen Elementen außerhalb des Bereichs.

---

Muss ich diese Wechselwirkungen schreiben mit Angular 2 oder ist es vollkommen akzeptabel, ein jQuery-Plugin, das ich für weitere Informationen

Answer 1

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

Lese Angular auslösen erstellen mit HTML5 event handling(onfocus and onfocusout) using angular 2