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>