title: Share value between variables is not working in Angular
body: <p>I'm implementing a search box by Angular 5. I have a component for the search box and another component for search result. When I pass the value through input element to the variable <code>'v'</code> in search.component.html, It updates the 'v' in <code>search-result.component.ts</code>, so <strong>{{v}}</strong> in html shows the value that I entered. </p>
  
  <p>To filter the array, I am taking <code>'v'</code> to <code>'term'</code> and do the filter function. But, after loading the page, It is only showing the <strong>{{v}}</strong> value and Not showing the <strong>{{term}}</strong> and <strong>{{filterarray}}</strong></p>
  
  <p>What is the wrong here?</p>
  
  <p><code>search.component.ts</code></p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  import { error } from 'util';
  
  @Component({
    selector: 'app-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
  })
  export class SearchComponent implements OnInit {
  
    title = 'app';
  
    v: string;
  
    @Output() valueEvent = new EventEmitter&lt;string&gt;();
  
    constructor(){}
  
    sendValue(){
      this.valueEvent.emit(this.v)
    }
  
    ngOnInit()
    }
  }
  </code></pre>
  
  <p><code>saerch.component.html:</code></p>
  
  <pre><code>&lt;input type="text" [(ngModel)]="v"&gt;&lt;button (click)="sendValue()"&gt;Search&lt;/button&gt;
  </code></pre>
  
  <p>saerch-result.component.ts:</p>
  
  <pre><code>import { Component, OnInit} from '@angular/core';
  
  @Component({
    selector: 'app-search-result',
    templateUrl: './search-result.component.html',
    styleUrls: ['./search-result.component.css']
  })
  export class SearchResultComponent{
  
   v: string;
  
   term: string = this.v;
  
   array: any[]=[{'id':1,'name':'Jones'},{'id':2,'name':'Duke'},{'id':3,'name':'Frank'},{'id':4,'name':'Jonas'}];
    filterarray: any[];
  
    constructor(){
  
      this.filterarray=this.array.filter(f =&gt; f.name.includes(this.term)).map(searchname=&gt;searchname.name);
  
    }
  
     receiveValue($event){
      this.v = $event
      }
  }
  </code></pre>
  
  <p><code>search-result.component.html:</code></p>
  
  <pre><code>&lt;app-search (valueEvent)="receiveValue($event)"&gt;&lt;/app-search&gt;
  &lt;p&gt;{{v}}&lt;/p&gt;
  &lt;p&gt;{{term}}&lt;/p&gt;
  &lt;p&gt;{{filterarray}}&lt;/p&gt;
  </code></pre>