Показывать столбец, когда пользователь вводит текст в строке поиска - PullRequest
Новая
       16

Показывать столбец, когда пользователь вводит текст в строке поиска

0 голосов
/ 27 марта 2020

Я делаю Angular проект и мне интересно, как я могу отобразить средний столбец, когда пользователь вводит какой-либо текст в строке поиска.

Итак, сейчас у меня есть панель поиска для ввода пользователя и три гибких столбца. Средний столбец скрыт, когда страница открыта, но я хочу, чтобы он отображался, когда пользователь вводил какой-либо текст в поле поиска. Любая помощь будет действительно оценена. 

.left {
  flex: 2;

}

.right {
  flex: 1;

}
.center{
  flex: 1;
  display: none;
}

.parent {
  display: flex;
  overflow: hidden;
  width: 95vw;
  margin-left: 30px;
}
<!-- Middle Column --!>
    <div class="center">
        <div class="chart-header">Charts</div>  
        <div>Chart will display here</div>
    </div>
    
 
 <!-- My user input/ search bar --!>
 
 <input  [formControl]="inputCtrl" matInput class="input">

Ответы [ 2 ]

0 голосов
/ 27 марта 2020 
// .html file      
 <div class="center" *ngIf="showColumn">
            <div class="chart-header">Charts</div>  
            <div>Chart will display here</div>
        </div>


   //.ts file
   showColumn = false;
     this.form.get('inputCtrl').valueChanges.subscribe(() => {
    this.showColumn = true;
  });
0 голосов
/ 27 марта 2020

Вы можете подписать событие valueChanges контроллера формы

Файл TS 

this.form.get("inputCtrl").valueChanges.subscribe(selectedValue => {
  this.displayStyle = 'block';
})

HTML Файл 

<div class="center" [ngStyle]="{'display':displayStyle}>
    <div class="chart-header">Charts</div>  
    <div>Chart will display here</div>
</div>
...