Using Angualar 5 how to create a UI with drop down list with values

Kumar AU

Using Angualar 5 how to create a UI with drop down list with hardcoded values (Copy,Move,Delete)

If I select ‘Delete’ in the dropdown list, then only one text box should be displayed below to the dropdown list – this textbox to enter the Delete File name along with Path (example : C:\aa.txt)

If I select ‘Copy Or Move’ in the dropdown list, then two text box should be displayed below to the dropdown list – one text box for Source File name along with Path (example : C:\aa.txt) and other text box for Destination File name along with Path

How to do this using Angualar 5, Can you please guide me. I am new to angular

Image 1????

Image 2:

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
Accepted answer
Hello Kumar AU

you can use the
In your component, you would define the options array with the hardcoded values:
```
options: string[] = ['Copy', 'Move', 'Delete'];
selectedOption: string;
```
To display the text boxes based on the selected option, you can use the *ngIf directive.
```
  Delete File Name:
  



  Source File Name:
  

  Destination File Name:
  
```
In your component, you would define the corresponding variables (deleteFileName, sourceFileName, destinationFileName) to bind the input values.

This way, when the user selects 'Delete' in the dropdown list, only the 'Delete File Name' textbox will be displayed. If the user selects 'Copy' or 'Move', both the 'Source File Name' and 'Destination File Name' textboxes will be displayed.
Kumar AU2y ago
Thank you so much - Jayraj Chhaya