Styjun

Features seen on the Space Shuttle's solid booster; what does "LOADED" mean exactly?

Who is the uncredited actor leading the squad in the Valerian movie?

Did "Dirty Harry" feel lucky?

What is the difference between tl_to_str:V and tl_to_str:N?

Is there any control character or hack to prevent simple command line tools from showing subsequent data?

When calculating averages, why can we treat exploding die as if they're independent?

How can I finish my PhD?

Can you mark a new target with the Hunter's Mark spell if the original target shifts to a different plane?

Can multiple public keys lead to the same shared secret in x25519?

Is there a way to deal with desistance in a off-chain game?

Supervisor wants me to support a diploma-thesis SW tool after I graduated

What is the purpose of the rotating plate in front of the lock?

Write a Schrödinger's sentence

Methods and Feasibility of Antimatter Mining?

Galilean transformation vs simple translation

What precisely does the commonly reported network hash rate refer to?

UK citizen travelling to France at the end of November

Bit floating sequence

A PEMDAS issue request for explanation

Is future tense in English really a myth?

Is mountain bike good for long distances?

is it possible to change a material depending on whether it is intersecting with another object?

Python implementation of atoi

When does order matter in probability?

Display filter based on dropdown selected value

How to configure NgbDropdown to display the selected item from the dropdownWhat is the best way to filter a Java Collection?list comprehension vs. lambda + filterRemove rows with all or some NAs (missing values) in data.framejQuery form select on change filter tabletablesorter - hide multiple tables based on dropdown selecttablesorter - hide multiple tables based on filter of one columnfilter based on SELECT and input valueFilter Results in One Worksheet Based on the Selection in Another Work Sheet in TableauSymfony filter form for multi select dropdown valuesSymfony ResetType: reset dropdown selection

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

1

Am using angular6 reactive forms. It has 3 dropdowns in the form. whenever there is a value change in any of the dropdown, I need to display those selected values in "filter applied" column with close icon.
so if the close icon is clicked, the filter should hide and the corresponding dropdown should be resetted.

I was trying trying with pipe and pipetransform. But it turned out to be not useful in this case. Please let me know any ideal way to proceed this

Expected result:

typescript filter angular6

share|improve this question

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Provide the Code that you have tried with sample data
  
  – Prashant Pimpale
  Mar 28 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  am stuck with the way of implementation only. I was going through this PIPE angular.io/guide/pipes#!#custom-pipes. which seems to be out of context for the above
  
  – Lokesh
  Mar 28 at 8:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Post the code without pipe
  
  – Prashant Pimpale
  Mar 28 at 8:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  stackblitz.com/edit/angular-vmlafm?file=app/dropdown-basic.html I just created this example in stackblitz. my real implementation was also based on ngbDropdown.
  
  – Lokesh
  Mar 28 at 8:55
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See this:stackoverflow.com/a/42172078/7124761
  
  – Prashant Pimpale
  Mar 28 at 9:09
  

  
  
  
  

add a comment | 

0

1

Am using angular6 reactive forms. It has 3 dropdowns in the form. whenever there is a value change in any of the dropdown, I need to display those selected values in "filter applied" column with close icon.
so if the close icon is clicked, the filter should hide and the corresponding dropdown should be resetted.

I was trying trying with pipe and pipetransform. But it turned out to be not useful in this case. Please let me know any ideal way to proceed this

Expected result:

typescript filter angular6

share|improve this question

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Provide the Code that you have tried with sample data
  
  – Prashant Pimpale
  Mar 28 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  am stuck with the way of implementation only. I was going through this PIPE angular.io/guide/pipes#!#custom-pipes. which seems to be out of context for the above
  
  – Lokesh
  Mar 28 at 8:29
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Post the code without pipe
  
  – Prashant Pimpale
  Mar 28 at 8:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  stackblitz.com/edit/angular-vmlafm?file=app/dropdown-basic.html I just created this example in stackblitz. my real implementation was also based on ngbDropdown.
  
  – Lokesh
  Mar 28 at 8:55
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  See this:stackoverflow.com/a/42172078/7124761
  
  – Prashant Pimpale
  Mar 28 at 9:09
  

  
  
  
  

add a comment | 

Am using angular6 reactive forms. It has 3 dropdowns in the form. whenever there is a value change in any of the dropdown, I need to display those selected values in "filter applied" column with close icon.
so if the close icon is clicked, the filter should hide and the corresponding dropdown should be resetted.

I was trying trying with pipe and pipetransform. But it turned out to be not useful in this case. Please let me know any ideal way to proceed this

Expected result:

typescript filter angular6

share|improve this question

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

share|improve this question

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

share|improve this question

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

edited Mar 28 at 7:25

Ramprasath Selvam

1,4061313 silver badges2525 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

asked Mar 28 at 7:16

LokeshLokesh

455 bronze badges

1 Answer
1

active

oldest

votes

0

You can create a property for each fields, for example: selectedDeliveryMethod, selectedAssesments, selectedAvailibity, etc... and then use two way binding to set the selected* properties in function of the dropdown. To display it you can display it only when the value is not defined (undefined), and when you click on the close icon, you set the value to undefined, so it will disapear.

Example:

Component

@Component( ... )
export class AppComponent 
 public selectedItem: any;
 public itemArray: any = [
 "USA",
 "Canada",
 "France",
 ];

 public removeSelectedItem(): void 
 this.selectedItem = undefined;
 

HTML

<select [(ngModel)]="selectedItem">
 <option *ngFor="let item of itemArray"> item </option>
</select>

Selected filter: 
<span *ngIf="selectedItem != undefined">
 selectedItem 
 <button (click)="removeSelectedItem()">Remove selected item</button>
</span>

There is a stackblitz to show you how it works: https://stackblitz.com/edit/angular-eytqnx

Another option would be to add the select item of any dropdown into an Array and then display it using the *ngFor directive with a custom template (text + close icon)

Hope it helps.

share|improve this answer

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you! Let me give a try with this approach
  
  – Lokesh
  Mar 29 at 5:07
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55392027%2fdisplay-filter-based-on-dropdown-selected-value%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can create a property for each fields, for example: selectedDeliveryMethod, selectedAssesments, selectedAvailibity, etc... and then use two way binding to set the selected* properties in function of the dropdown. To display it you can display it only when the value is not defined (undefined), and when you click on the close icon, you set the value to undefined, so it will disapear.

Example:

Component

@Component( ... )
export class AppComponent 
 public selectedItem: any;
 public itemArray: any = [
 "USA",
 "Canada",
 "France",
 ];

 public removeSelectedItem(): void 
 this.selectedItem = undefined;
 

HTML

<select [(ngModel)]="selectedItem">
 <option *ngFor="let item of itemArray"> item </option>
</select>

Selected filter: 
<span *ngIf="selectedItem != undefined">
 selectedItem 
 <button (click)="removeSelectedItem()">Remove selected item</button>
</span>

There is a stackblitz to show you how it works: https://stackblitz.com/edit/angular-eytqnx

Another option would be to add the select item of any dropdown into an Array and then display it using the *ngFor directive with a custom template (text + close icon)

Hope it helps.

share|improve this answer

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you! Let me give a try with this approach
  
  – Lokesh
  Mar 29 at 5:07
  

  
  
  
  

add a comment | 

0

You can create a property for each fields, for example: selectedDeliveryMethod, selectedAssesments, selectedAvailibity, etc... and then use two way binding to set the selected* properties in function of the dropdown. To display it you can display it only when the value is not defined (undefined), and when you click on the close icon, you set the value to undefined, so it will disapear.

Example:

Component

@Component( ... )
export class AppComponent 
 public selectedItem: any;
 public itemArray: any = [
 "USA",
 "Canada",
 "France",
 ];

 public removeSelectedItem(): void 
 this.selectedItem = undefined;
 

HTML

<select [(ngModel)]="selectedItem">
 <option *ngFor="let item of itemArray"> item </option>
</select>

Selected filter: 
<span *ngIf="selectedItem != undefined">
 selectedItem 
 <button (click)="removeSelectedItem()">Remove selected item</button>
</span>

There is a stackblitz to show you how it works: https://stackblitz.com/edit/angular-eytqnx

Another option would be to add the select item of any dropdown into an Array and then display it using the *ngFor directive with a custom template (text + close icon)

Hope it helps.

share|improve this answer

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you! Let me give a try with this approach
  
  – Lokesh
  Mar 29 at 5:07
  

  
  
  
  

add a comment | 

You can create a property for each fields, for example: selectedDeliveryMethod, selectedAssesments, selectedAvailibity, etc... and then use two way binding to set the selected* properties in function of the dropdown. To display it you can display it only when the value is not defined (undefined), and when you click on the close icon, you set the value to undefined, so it will disapear.

Example:

Component

@Component( ... )
export class AppComponent 
 public selectedItem: any;
 public itemArray: any = [
 "USA",
 "Canada",
 "France",
 ];

 public removeSelectedItem(): void 
 this.selectedItem = undefined;
 

HTML

<select [(ngModel)]="selectedItem">
 <option *ngFor="let item of itemArray"> item </option>
</select>

Selected filter: 
<span *ngIf="selectedItem != undefined">
 selectedItem 
 <button (click)="removeSelectedItem()">Remove selected item</button>
</span>

There is a stackblitz to show you how it works: https://stackblitz.com/edit/angular-eytqnx

Another option would be to add the select item of any dropdown into an Array and then display it using the *ngFor directive with a custom template (text + close icon)

Hope it helps.

share|improve this answer

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges

@Component( ... )
export class AppComponent 
 public selectedItem: any;
 public itemArray: any = [
 "USA",
 "Canada",
 "France",
 ];

 public removeSelectedItem(): void 
 this.selectedItem = undefined;
 

<select [(ngModel)]="selectedItem">
 <option *ngFor="let item of itemArray"> item </option>
</select>

Selected filter: 
<span *ngIf="selectedItem != undefined">
 selectedItem 
 <button (click)="removeSelectedItem()">Remove selected item</button>
</span>

share|improve this answer

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges

answered Mar 28 at 9:46

EastrallEastrall

1,44099 silver badges1818 bronze badges