Displaying a disabled div depending on the dropdown selection in Angular Material

My goal is to display filters in a dropdown after they have been selected. Currently, I have static disabled divs and a dropdown where filters can be selected.

This is the dropdown:

<mat-form-field>
  <mat-label>{{ 'supplier.showFilters' | translate }}</mat-label>
  <mat-select>
    <mat-option *ngFor="let filter of filters">
      {{filter.showValue | translate}}
    </mat-option>
  </mat-select>
</mat-form-field>

Here is an example of one of the filters:

<div class="col-2" *ngIf="selected">
  <mat-form-field>
    <mat-label>{{ 'supplier.supplierName' | translate }}</mat-label>
    <input formControlName="companyName" matInput/>
  </mat-form-field>
</div>
angularangularjstypescriptmaterial-uifrontend

Answer №1

A Quicker Approach:

<mat-form-field>
  <mat-label>{{ 'supplier.showFilters' | translate }}</mat-label>
  <mat-select (selectionChange)="selected = event.value">
    <mat-option *ngFor="let filter of filters">
      {{filter.showValue | translate}}
    </mat-option>
  </mat-select>
</mat-form-field>

A More Stylish Solution:

If you require selection in the form as well, utilize a control for that:

filterForm: FormGroup = new FormGroup({
  selected: new FormControl(null, [Validators.required]),
  companyName: new FormControl('')
})

get selected(){
  return this.filterForm.controls.selected
}

<form [formGroup]="filterForm">
  <mat-form-field>
    <mat-label>{{ 'supplier.showFilters' | translate }}</mat-label>
    <mat-select formControlName="selected">
      <mat-option *ngFor="let filter of filters">
        {{filter.showValue | translate}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div class="col-2" *ngIf="selected">
    <mat-form-field>
      <mat-label>{{ 'supplier.supplierName' | translate }}</mat-label>
      <input formControlName="companyName" matInput/>
    </mat-form-field>
  </div>
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looping through Angular recursive components using *ngFor and async pipe creates a recursive loop experience

My recent project involved creating a dynamic content tree in Angular, structured like this: vehicles - cars - vw - golf - passat - ford - fiesta - toyota - Buses - volvo - Scania Animals - carnivorous ...

angularrecursiontreeobservablengfor

Switching the phone formatting from JavaScript to TypeScript

Below is the JavaScript code that I am attempting to convert to TypeScript: /** * @param {string} value The value to be formatted into a phone number * @returns {string} */ export const formatPhoneString = (value) => { const areaCode = value.substr(0 ...

javascriptreactjstypescript

Angular CLI fails to generate angular-cli.json file

Currently in the process of creating a new PWA and I need to input information into angular-cli.json. Utilizing Angular CLI: 1.7.4 Node: 8.11.1 OS: win32 x64 Angular: 5.2.10. Upon running ng new pwaapp --service-worker, the project folder does not conta ...

angularangular-cliprogressive-web-apps

The Firebase child_changed event may occasionally be missed at random intervals when the browser tab is inactive

I am currently developing a real-time application where one user can enter the app, and all other users connected to that session will receive notifications or payloads of what that user is entering. Below is the Firebase child_changed listener that every ...

javascriptangularjsfirebaseionic-frameworkfirebase-realtime-database

Instructions on changing the color and font weight of an asterisk within a Textfield using Material UI

Is there a way to style the asterisk in red and bold within a Textfield using material UI? I have a placeholder text without a label, as my label is null or empty. I would like to make the placeholder star RED. Is this possible? Here is the code snippet: h ...

javascriptreactjsreact-hooksmaterial-uimaterial-design

Angular: Implementing a dialog in a component with an established constructor

Within my current component, I have implemented a constructor that injects TestService. However, I now need to add a button that will open a popup dialog. How can I achieve this without interfering with the existing constructor? Thank you for your help. ...

angular

React beautiful dnd and Material UI list encountering compatibility problem

I recently encountered an issue while using react beautiful dnd to create a rearrangeable Material UI List. Everything was working correctly, except for the ListItemSecondaryAction within the list. When dragging a list item, the ListItemText and ListItemIc ...

javascriptcssreactjsmaterial-uireact-beautiful-dnd

The functionality of the Ionic menu button becomes disabled once the user has successfully logged in

Having trouble clicking the button after taking a test. Situation: Once logged in -> user takes a test and submits -> redirected to home page. However, unable to click on "Menu button" on the home page. In my Login.ts file: if (this.checker == " ...

htmltypescriptbuttonionic-framework

What is the process for integrating a factory into a controller?

Hello, I'm currently new to working with angularjs and I'm facing some challenges while trying to inject a factory into my controller. The factory seems to be functioning properly as I can set data in it without any issues. Below is the code snip ...

angularjsdependency-injection

Unable to fetch data from URL in Angular using the HttpClientModule

I have a goal in my application to retrieve data from the following URL and showcase it within the app: https://jsonplaceholder.typicode.com/posts/1 The issue I'm encountering is that the data is not being displayed in my app. The console is showing ...

angulartypescripthttpmodule

AngularJS returns two http get requests but only the first one gets resolved

I am a newcomer to angularjs and I am currently working on developing a mobile app using angularjs. I have encountered an issue where the if condition is functioning correctly, but the else condition is not. Specifically, the first http request is working ...

angularjsjson

The Angular CLI suddenly decided to stop providing me with useful lines (without sourcemaps) in the browser console, but interestingly the terminal continues

I recently noticed a change in my Angular project that is using Angular CLI. Instead of receiving error lines from my code, I am getting errors from compiled files like main.js and vendor.js. The 'normal' error messages in my terminal are pointin ...

angulartypescriptangular-cli

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5

Using Redux and Typescript to manage user authentication states can help streamline the process of checking whether a user is logged in or out without the need for repetitive checks in the mapStateToProps function

In the process of developing a web application utilizing React & Redux, I am faced with defining two primary "states" - Logged In and Logged Out. To tackle this challenge, I have structured my approach incorporating a union type State = LoggedIn | LoggedO ...

reactjstypescriptreduxstore

angular directive to receive an object

When I have a table and click on a row, the information is supposed to be displayed in a different component using the @input decorator. However, instead of displaying the correct result in my other component, I am getting [object Object]. table.html < ...

angulartypescriptangular-material

Generating Angular components dynamically in batch

I have a collection of diverse data objects: const arr = [ {type: 'CustomA', id: 1, label: 'foo'}, {type: 'CustomB', src: './images/some.jpg'} {type: 'CustomX', firstName: 'Bob', secondNa ...

angular

Setting up default values for AngularJs and JqueryUI slider

Just making my debut post here, hoping it covers everything. I'm working with AngularJs and I've incorporated a JqueryUI slider using an angular directive. I've come across numerous examples on how to do this, but none of them explain how t ...

jquery-uiangularjsangularjs-directive

Guide on transforming observable<User> to Observable<boolean> in Angular 4

As a newcomer in Angular and Mean Stack, I need help implementing the canActivate() method to restrict admin routes. In my service file, the checkAdmin method returns an observable of type "User", but the canActivate method's return type is an observa ...

javascriptnode.jsangulartypescriptrxjs

Verify the specific type conditions of a key value in a mapped type

I am attempting to achieve the following: If the actions property exists, and there are callbacks within the actions properties that return a string, then return X or Y. The above code is expressed as: // type MappedType<T> = { // [K in keyof T]: ...

typescript

Unable to set up enzyme adapter

Currently, I am in the process of setting up the enzyme adapter for testing purposes. The code snippet that I have is quite straightforward: import * as enzyme from 'enzyme'; import * as Adapter from 'enzyme-adapter-react-16'; enzyme. ...

reactjstypescriptenzyme