Changing angular2 component model after changing element value with javascript or jquery

Question

In my script I change value of an element with jquery(same with javascript), but model connected with this element was not changed. here is this element:

<input type="text" class="form-control" id="username" placeholder="Username" [(ngModel)]="user.username">

When I change value manually then model gets updated aswell. What should it be?

Thanks

you exactly let us know, what you wants to implement, your requirement is not clear — Sandip - Frontend Developer, Apr 12 '17 at 13:02
you need to change the `user.username` not input value check [this](https://www.w3schools.com/code/tryit.asp?filename=FEK866ZBWWAP) in AngularJs though — sTx, Apr 12 '17 at 13:03
@sTx I can't because I need to update it from another component. But I don't know easy way to access property of a component from another component — Maxim, Apr 12 '17 at 13:05
this can be done by a shared service or by a parent of the two components through @Input values or if the second component is the parent of first — sTx, Apr 12 '17 at 13:06

sTx · Answer 1 · 2017-04-13T07:18:16.170

Se plunker

Here an example:

Parent Component:

import { Comp1Component } from './../comp1/comp1.component';
import { Component, OnInit } from '@angular/core';

 @Component({
   selector: 'app-comp-parent',
   template:`
      <p>ngModel: {{sharedVarParent}}</p>
       <app-comp1 [comp1]="sharedVarParent" (sharedVarChange)="onChange($event)"></app-comp1>
       <hr />
       <app-comp2 [comp2]="sharedVarParent" (sharedVarChange)="onChange($event)"></app-comp2>
    `
 })
 export class CompParentComponent implements OnInit {
   sharedVarParent ='Initial';
   onChange(ev){
      this.sharedVarParent = ev;
   }
}

COmp1:

import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';

@Component({
   selector: 'app-comp1',
   template:`
      <input type="text" id="username" placeholder="{{comp1}}" [ngModel]="comp1" (ngModelChange)="change($event)">
      <div>{{comp1}}</div>`
})
export class Comp1Component implements OnInit {
  @Input() comp1;
  @Output() sharedVarChange = new EventEmitter();
  change(newValue) {
    this.comp1 = newValue;
    this.sharedVarChange.emit(newValue);
  }
}

Comp2

import { Component, OnInit, Input, Output,EventEmitter } from '@angular/core';

@Component({
  selector: 'app-comp2',   
  template:`
    <input type="text" id="username" placeholder="{{comp2}}" [ngModel]="comp2" (ngModelChange)="change($event)">
    <div>{{comp2}}</div>
  `   
})
export class Comp2Component implements OnInit {
  @Input() comp2;
  @Output() sharedVarChange = new EventEmitter();
  change(newValue) {  
     this.comp2 = newValue;
     this.sharedVarChange.emit(newValue);
  }
}

Do the components have to be nested in DOM? I don't know how @Input() and @Output() work — Maxim, Apr 13 '17 at 06:04
COmp1 and COmp2 are siblings and COmp-parent is the parent of both and also the link between them. Comp-parent(as a component template) is inside in app.component.html — sTx, Apr 13 '17 at 06:49

Changing angular2 component model after changing element value with javascript or jquery

1 Answers1