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

Custom type checker that validates whether all properties of a generic object are not null or undefined

In an attempt to create a user-defined type guard function for a specific use-case, I am faced with a challenge: There are over 100 TypeScript functions, each requiring an options object. These functions utilize only certain properties from the object wh ...

typescript

The issue I'm facing with my webpack-build is the exclusive appearance of the "error" that

Hey everyone! I'm currently facing an issue with importing a module called _module_name_ into my React project, specifically a TypeScript project named react-app. The module was actually developed by me and it's published on npm. When trying to i ...

javascriptreactjstypescriptnpmwebpack

What is the process for adding an element using Angular Material2 design?

I am in the process of creating a template where, upon clicking a button, I want to append specific elements. While I have successfully appended the elements using the code below, I am facing challenges with adding styles and integrating angular-material2 ...

angularangular-material2

Contrasting "npm run dev" with "npm start"

I have just started learning about Node and AngularJS. Could someone explain the distinction between npm run dev and npm start commands in the node terminal? ...

angularjsnode.jsnpm

The extracted text from the window appears to be blank

When attempting to enclose a selected string between two characters, I am encountering an issue. For example, when selecting 'test' and clicking on the change button, the selected text should change to 'atestb'. However, although I am a ...

javascriptangulardom

Is it possible to determine the type of a class-type instance using class decorators?

Explore this example of faltering: function DecorateClass<T>(instantiate: (...params:any[]) => T){ return (classTarget:T) => { /*...*/ } } @DecorateClass((json:any) => { //This is just an example, the key is to ensure it returns ...

typescript

Jasmine is raising an error: "TypeError: Unable to access the property 'client' of an undefined object"

While running test cases for the EditFlag component in Angular, I encountered an error stating TypeError: Cannot read property 'client' of undefined. Additionally, I am looking to add a test case for a switch case function. Can someone assist me ...

angulartypescriptjasminekarma-jasmine

I am facing difficulties retrieving the JSON object returned from the Express GET route in Angular

After setting up an express route, the following JSON is returned: [{"_id":"573da7305af4c74002790733","postcode":"nr22ry","firstlineofaddress":"20 high house avenue","tenancynumber":"12454663","role":"operative","association":"company","hash":"b6ba35492f3 ...

javascriptangularjsjsonexpress

The ng-disabled directive is functioning properly, however it is not having any impact on the disabled attribute in

Having an issue with enabling or disabling a button based on the selection of a certain string from a dropdown menu. HTML <select ng-change="checkType()" ng-options="sth in sth for things"></select> <input ng-disabled="{{toggleDisable}}" ...

javascriptangularjs

Struggling with establishing recognition of a factory within an Angular controller

I am currently facing an issue while trying to transfer data from one controller to another using a factory in Angular Seed. My problem lies in the fact that my factory is not being recognized in the project. Below is my snippet from app.js where I declare ...

javascriptangularjsangular-seed

Reimagine server-side storage options as an alternative to remixing JavaScript local storage

My remix application is designed to serve as a frontend. I retrieve data from the backend and sometimes need to load specific data only once and reuse it across multiple pages. In our previous frontend setup, we utilized localstorage; however, with the cur ...

node.jstypescriptnpmtsxremix.run

Should I use Object.assign or define class properties?

Currently in the process of developing an angular application that interacts with the twitch API. The API returns data in various formats, some of which I need to parse and save into specific classes. My main concern is understanding the potential drawbac ...

jsonangulartypescript

Library of components relying on an external library or framework

Imagine having a versatile component library that includes buttons, input fields, and more complex components. The goal is to distribute this library via npm in order to maintain consistency in various "Parent Projects" by achieving the same look and feel ...

reactjscomponentsmaterial-uiencapsulationnpm-publish

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

Unable to make a div grow within a Popper component in a React.js application

I'm facing a challenge with implementing a CSS feature and need some assistance. https://i.stack.imgur.com/KXpGd.png Upon clicking the "See link options" button, the content loads but spills out of the popper. My goal is to have the popper expand in ...

javascripthtmlcssreactjsfrontend

Is there a feature in VS Code that can automatically update import paths for JavaScript and TypeScript files when they are renamed or

Are there any extensions available for vscode that can automatically update file paths? For example, if I have the following import statement: import './someDir/somelib' and I rename or move the file somelib, will it update the file path in all ...

javascripttypescriptvisual-studio-code

AngularJS and Select2's Multiple - Tags feature can display tags intermittently, showing some and hiding others as needed

Currently, I am implementing AngularJS along with select2 (not using ui-select). In my view, the following code is present: <select name="rubros" id="rubros" class="select2 form-control" ng-model="vm.comercio.tags" ng-options="rubro.nombre for rub ...

javascriptangularjstagsjquery-select2jquery-select2-4

Adding a new element to the div by referencing its class name

One way to add a component to the view is by using ViewContainerRef. For instance, HTML File: <div #Ref>it is possible to append the component here</div> TS File: @ViewChild("Ref", { read: ViewContainerRef }) public Ref: ViewContainerRe ...

angularangular-components

AngularJS: Issue with scope not updating across several views

Having one controller and two views presents a challenge. ClustersController angular.module('app.controllers').controller('ClustersController', [ '$scope', 'ClustersService', function($scope, ClustersService) { ...

javascripthtmlangularjsdata-binding

The UnCSS exclusion feature seems to be malfunctioning

I am attempting to eliminate unnecessary CSS using uncss, but it seems to be removing all styles regardless of whether they are included in the ignore array. The two files I need to compare are the index file and the app.min.js file, which includes all te ...

angularjsgruntjsuncss