show selected Drop down value in same page in angular4

Question

I am working on Angular4 i want to show the selected dropdown value in the left side on the same page. i want the output like when selecting a packing type value and press add button the selected value can be moved to the right side portion. actually, I am new in angular. can anyone help please its a big help form me

my Html Code is

    <form #newForm="ngForm" (ngSubmit)="OnSubmit(newForm.value);newForm.reset()">
                            <div class="form-group">
                                <label>Packing Type</label>
                                <select class="form-control" >
                                    <option value="0" disabled>Please Select Packing type</option>
                                    <option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
                                </select>
                            </div>


for add button
                            <input type="button" value="Add Item" class="btn btn-success" (click)="addItems(newForm.value);newForm.reset()" />

                        </div>

this is my TS Component file

    addItems(value: any) {
    this.items = new IComboDetails(value.itemcode, value.itemdescription, value.PackingtypeName, value.quantity);        
    this.stockitems.push(this.items);

}

Answer 1

Here is working example

<select [(ngModel)]="myDropDown" (ngModelChange)="onChangeofmyOptions($event)">
    <option value="one">One my value</option>
    <option value="two">Two  my value</option>
    <option value="three">Three  my value</option>
</select>
<input [hidden]="myDropDown !=='two'"type="text">

.ts

onChangeofOmyptions(newGov) {
     console.log(newGov);
}

in your case

<select class="form-control" (ngModelChange)="onChangeofmyOptions($event)" >
<option value="0" disabled>Please Select Packing type</option>
<option *ngFor="let item of products" value={{item.ItemID}}>{{item.PackingtypeName}}</option>
                                    </select>




onChangeofOptions(newGov) {
     console.log(newGov);
     this.myDropDown=newGov;
}

get value to right side

<input type="text" value={{myDropDown}}>

for binding

 this.myDropDown=newGov;