Display the column every time the user types something into the search bar

Question

Display the column every time the user types something into the search bar

Currently working on an Angular project and I'm trying to figure out how to make the middle column visible whenever the user enters text in the search bar.

At the moment, I have a search bar for user input and three flex columns. The middle column is hidden by default but I want it to become visible as soon as the user starts typing in the search box. Any assistance with this would be greatly appreciated.

.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>
    
 
 <!-- User Input / Search Bar --!>
 
 <input [formControl]="inputCtrl" matInput class="input">

html css angular layout multiple-columns

Answer 1

Answer №1

// This is an example of code in an HTML file
 <div class="center" *ngIf="showColumn">
            <div class="chart-header">Charts</div>  
            <div>Chart will be displayed here</div>
        </div>


   // This is the corresponding TypeScript file
   showColumn = false;
     this.form.get('inputCtrl').valueChanges.subscribe(() => {
    this.showColumn = true;
  });

Answer 2

// This is an example of code in an HTML file
 <div class="center" *ngIf="showColumn">
            <div class="chart-header">Charts</div>  
            <div>Chart will be displayed here</div>
        </div>


   // This is the corresponding TypeScript file
   showColumn = false;
     this.form.get('inputCtrl').valueChanges.subscribe(() => {
    this.showColumn = true;
  });

Answer 3

Answer №2

To receive updates on changes in the form controller, you can subscribe to the valueChanges event.

Here is an example in a TypeScript file:

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

And here is how you can display the results in an HTML file:

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

Answer 4

To receive updates on changes in the form controller, you can subscribe to the valueChanges event.

Here is an example in a TypeScript file:

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

And here is how you can display the results in an HTML file:

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

Display the column every time the user types something into the search bar

Answer №1

Answer №2

Similar questions

Unveiling the Solution: Deactivating CSS Style Hints in VS Code!

Upon the page loading, only select a handful of checkboxes (JSF)

Element without style

Looping through mysql data horizontally within a div tag

Is there a CSS fix for containing a floating div inside another div with overflow hidden?

Is it possible to create a click event for a mat-icon within a mat form field (either in the matprefix or matsuffix)?

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

Wordpress Issues with Displaying Arabic Text Correctly

Certain issues arise when adjusting the padding within the background color of solely the inline text element

Setting up a textarea tooltip using highlighter.js

Unveiling the Secrets of Implementing Interactive HTML Tabs

Creating a Session Timeout feature for Ionic/Angular that includes resetting the timer with each new user interaction

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

Move a <div> using a handle (without using JQuery)

Enhancing the alignment of div elements

Loading Bootstrap Modal with click event triggering

When implementing variables from input boxes, my SQL query fails to populate any data in the database table

Disabling the child element from triggering the parent element's onclick function, while still allowing it to respond to its own content

Applying CSS transition delays to multiple images

Alter the color of H3 when clicked and then gently fade it back