Angular 2 : Give value to button based on dropdown menu value - html

Question

I am new to angular 2.
I have a button and a drop down which is appeared. When I click on any of the option then its value should be given to the button .
.common_select_box {
width: 100%;
}
.common_select_box button {
border: thin #cfdadd solid;
border-radius: 0 !important;
width: 100%;
text-align: left;
padding: 7.45px 12px;
border-radius: 1.5px !important;
}
.common_select_box button .caret {
display: inline-block;
width: 0;
height: 0;
margin-right: 2px;
vertical-align: middle;
border-top: 6px dashed;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
top: 14px;
right: 5px;
}
.common_select_box ul.dropdown-menu {
border: 1px solid #cfdadd;
border-radius: 2px;
box-shadow: none !important;
width: 100%;
padding: 0px;
}
.common_select_box ul.dropdown-menu li {
padding: 5px 15px;
font-size: 12px;
list-style-type:none;
}
.common_select_box ul.dropdown-menu li:hover {
background: #edf1f2 !important;
}
<div class="common_select_box">
<!--give open class to below div when clicking on button-->
<div class="input-group-btn dropdown {{dropdown1? 'open':''}}" (click)="dropdown1=!dropdown1">
<button type="button" class="btn btn-default font_size_12 no_box_shadow ticket_info_subline_text_color" dropdown-toggle="" aria-haspopup="true" aria-expanded="false" >Select <span class="caret" style="color: #bfbfbf;"></span></button>
<ul class="dropdown-menu">
<li >Option 1</li>
<li >Option 2</li>
<li >Option 3</li>
</ul>
</div><!-- /btn-group -->
</div>
When I click on option 1 . then its value should be given to button tag.
Any Help Would be great.
Thank You.

Answer 1

This will work,
<div class="common_select_box">
<div class="input-group-btn dropdown {{dropdown1? 'open':''}}"
(click)="dropdown1=!dropdown1">
<button type="button" class="btn btn-default font_size_12 no_box_shadow
ticket_info_subline_text_color" dropdown-toggle=""
aria-haspopup="true" aria-expanded="false">{{selectedNav}}<span
class="caret" style="color: #bfbfbf;"></span> </button>
<ul class="dropdown-menu">
<li (click)="setNav(item)" *ngFor="let item of navs">{{item}}</li>
</ul>
in .ts file
export class PropertyComponent {
selectedNav: any; navs = ['option 1', 'option 2', 'option 3']
ngOnInit() {
this.selectedNav = 'select value';
}
setNav(nav){
this.selectedNav = nav;
}
}