title: Change @Input field of @Component after sending an Http Request (Angular2)
body: <p>I am working on an <code>Angular2</code> application and one of the <code>@Components</code> has a button that when clicked will send a <code>post</code> request to my server which will either respond with an <code>Ok(string)</code> or a <code>BadRequest(string)</code>.</p>
  
  <p>I am having trouble updating an @Input field of one of my @Components after getting the answer from the server.</p>
  
  <p>Below are simplified version of some of my classes.</p>
  
  <h2>My Component class</h2>
  
  <pre><code>@Component({
      moduleId: module.id,
      selector: 'model-comp',
      templateUrl: './model.component.html',
      styleUrls: ['./model.component.css']
  })
  export class MyComponent{
      @Input() model: Model;
      @Output() emitter: EventEmitter&lt;Model&gt; = new EventEmitter&lt;Model&gt;();
  
      public constructor(private service: MyService){}
  
      public toggle(): void {
          this.service.send(model.id, model.name){
              .subscribe(
                  result  =&gt; this.onSuccess(result)),
                  error   =&gt; this.onError(error),
                  ()      =&gt; this.onComplete());
      }
  
      public onSuccess(result: string): void {
          if(result.inculdes("Some Text")) this.model.flag = true;
          else this.model.flag = false;
          this.emitter.emit(this.model);
      }
  
      public onError(error: any): void {
          //notification using bootstrap-notify
      }
  
      public onComplete(): void {
          //currently empty
      }
  }
  </code></pre>
  
  <h2>My Service class</h2>
  
  <pre><code>export class MyService{
  
      public send(id: string, name: string){
          return &lt;Observable&lt;string&gt;&gt;this.http
              .post('url', new Dto(id, name))
              .map(result =&gt; this.getData&lt;string&gt;(result))
              .catch(this.catchBadResponse);
      }
  
      private getData&lt;E&gt;(result: Response): E {
          //checking if result.status is ok
          var body = result.json ? res.json(): null;
          return  &lt;E&gt;(body || {});
      }
  
      private catchBadRespomse: (error: any) =&gt; Observable&lt;any&gt; = (error: any) =&gt; {
          var response = &lt;Response&gt;error;
          var json = response.json();
          var msg = json.Message;
          var errormsg = json?
              (json.error ? json.error: JSON.stringify(msg?msg:json)) :
              (response.statusText || 'Error?');
          return Obserable.of(errormsg);
      }
  
  }
  </code></pre>
  
  <h2>Template of MyComponent</h2>
  
  <pre><code>&lt;button (click)="toggle()"
  [ngClass]="{'class1': true, 'class2': model.flag}"&gt;Text&lt;/button&gt;
  </code></pre>
  
  <h2>Template of Parent Component</h2>
  
  <pre><code>&lt;div *ngFor="let model of getList()"&gt;
      &lt;model-comp [model]="model" (emitter)="onEmit($event)"&gt;&lt;/model-comp&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>The <code>onEmit</code> Function</h2>
  
  <pre><code>onEmit(evt: any): void{
      if(evt instanceof Model){
          var evtModel = evt as Model;
          this.list.find(search =&gt; search.id == evtModel.id)
              .isFav = evtModel.isFav;
      }
  }
  </code></pre>
  
  <p>The problem is that even though I post my data and receive the response, The property <code>flag</code> of my <code>model</code> does not change. </p>
  
  <p>I think that the click event reloads the component thus removing the observers of the <code>EventEmitter</code>.</p>
  
  <p>So is there any way to cancel the reload, not lose the observers of the <code>EventEmitter</code> or any other way to update the root object or the element class?</p>