Обновление компонента только при двойном щелчке для события щелчка в Angular

Question

В своем проекте Angular я создал окно поиска с кнопкой, чтобы получить результат поиска из другого компонента. У меня в компоненте приложения выход маршрутизатора , и я переключаю выход маршрутизатора с компонентом результата поиска , используя переменную значение поиска . Я использую сервис для обмена этой переменной значения поиска между компонентами. Поэтому, когда я нажимаю на ссылку в html, появляется выход маршрутизатора . Когда я нажимаю на вход для поиска и выполняю поиск, появляется результат поиска . Моя проблема в том, что когда активирована розетка маршрутизатора , мне нужно дважды щелкнуть по кнопке поиска или дважды нажать клавишу ввода , чтобы отобразить результат поиска.

Код -

search.component.ts:

export class SearchComponent implements OnInit {

  value: string;

  constructor(private data: SendDataService){}

  show: boolean = true;

  showEl(){
    this.show = true;
  }

  newValue() {
    this.data.changeValue(this.value)
    this.show = false;
  }

  ngOnInit(): void{
    this.data.currentValue.subscribe(value => this.value = value)
  }
}

search.component.html:

<input type="text" [(ngModel)]="value" (click)="showEl()" (keyup.enter)="newValue()" (input)="showEl()">
<button (click)="newValue()">Search</button>

Поиск-result.component.ts:

export class SearchResultComponent implements OnInit {

  _postsArray: = //JSON Object;
  value: string = "";
  filterarray: any[] = [];

  constructor(private data: SendDataService){}

  getData(){
    this.data.currentValue.subscribe(value => {this.value = value;
      this.showData();
    })
  }

  showData(){
    if (this.value != null){
      this.filterarray=
        this._postsArray.filter(f => 
          f.title.toLowerCase()
            .includes(this.value.toLowerCase()))
              .map(searchname=>searchname.title)
    }
  }

    ngOnInit(): void{
    this.getData();
  }

}

app.component.html:

<div>
    <div *ngIf="!value">
        <router-outlet></router-outlet>
    </div>
    <div *ngIf="value">
        <app-search-result></app-search-result>
    </div>
</div>

Когда я помещаю {{value}} в app.component.html, он показывает значение при первом нажатии кнопки поиска. но <app-search-result> появляется только во второй клик. Как я могу решить это?