Angular Show or hide element based on option value selected dynamically from list

905 views Asked by At

I have dynamic list of select pickers in angular and each select picker contains values like First Name, Last Name, Gender, Birth Date, Address

I have tried the solution given in

Angular - Show or Hide based on Dropdown list value

but with this solution, when I change any value in dropdown, it affects in each dropdown. For ex. I select First Name then All the 5 dropdowns has automatically selected First Name, So I can not solve my problem with this solution

I have 1 more select picker Date Format which I want to display only if user selects Birth Date else it will not display.

I have tried with [(ngModel)]="option" but it will apply to all select pickers on 1 change

How can I display Date Format select picker based on record value selection.

For ex - 1,

In 1st Record Dropdown User selects Last Name

In 2nd Record Dropdown User selects Address

In 3rd Record Dropdown User selects First Name

In 4th Record Dropdown User selects Birth Date (At this Place only Date Format Dropdown should display)

In 5th Record Dropdown User selects Gender

then, for ex.-1 As above I want to display Date Format dropdown element only at time of 4th selection and should hide if user change to other value

For ex - 2,

In 1st Record Dropdown User selects Last Name

In 2nd Record Dropdown User selects Birth Date (At this Place only Date Format Dropdown should display)

In 3rd Record Dropdown User selects First Name

In 4th Record Dropdown User selects Address

In 5th Record Dropdown User selects Gender

then, for ex.-2 As above I want to display Date Format dropdown element only at time of 2nd selection and should hide if user change to other value

angular code :

In ts file

public records : string[] =  ['One', 'Two', 'Three', 'Four', 'Five'];
public dateFormats : string[] =  ['One', 'Two', 'Three', 'Four', 'Five'];

In html file

<div class="row" *ngFor="let rec of records; let i = index">

    <div class="col-lg-4">
        <select class="selectpicker" (change)="onDropdownChange($event,i);">
            <option value="" [selected]="true">Please Select Record</option>
            <option value="First_Name">First Name</option>
            <option value="Last_Name">Last Name</option>
            <option value="Birth_Date">Birth Date</option>
            <option value="Gender">Gender</option>
            <option value="Address">Address</option>
        </select>
    </div>
    
    <ng-container *ngIf="ifBirthDate">

        <div class="col-lg-4">
            <label>Select Date Format</label>
        </div>
        <div class="col-lg-4">
            <option *ngFor="let format of dateFormats" value="{{format}}">{{format}}</option>
        </div>

    </ng-container>
                            
</div>
0

There are 0 answers