angular - Angular2: Get selected option in select component -
i using angular 2.0.0-rc.4.
i have form (parent component), , have in drop-down lists other components, each dropdown has ts
, html template
else where, each 1 data component. when submitting form need selected value of each one. how can access parent ?
-parent form html:
<form class="" (submit)="submitnewmodel($event, label.value)"> <div class="form-group"> <label for="label" class="control-label"> label </label> <input type="text" name="label" #label class="form-control" placeholder="model's label"> </div> <styles-dropdown></styles-dropdown> <colors-dropdown></colors-dropdown> <modes-dropdown></modes-dropdown> <shapes-dropdown></shapes-dropdown> <button type="submit" name="button">create new model</button> </form>
-parent ts
:
import { component } '@angular/core'; ... @component({ selector: 'models', templateurl: 'app/models/models.component.html', directives: [ stylesdropdowncomponent, ... ] }) export class modelscomponent { constructor(){ } submitnewmodel(event, label) { event.preventdefault(); console.log('value label', label); console.log(event); //how selected values here ? } }
-drop down component html:
<div class="portlet-body"> <div class="form-group"> <label for="styles" class="control-label"> style </label> <select name="style-select" id="styles" class="form-control select2"> <option value="">select style</option> <option *ngfor="let style of styles" value="{{style.id}}">{{ style.label }}</option> </select> </div>
-drop down ts
:
import { component } '@angular/core'; import { clienthttp } '../../common/cigma-http'; import { stylescomponent } '../styles.component'; @component({ selector: 'styles-dropdown', templateurl: 'app/styles/styles-dropdown/styles.dropdown.component.html', }) export class stylesdropdowncomponent extends stylescomponent { constructor(protected cigmahttp: cigmahttp) { super(cigmahttp) } }
all other dropdown component have same structure 1 above.
use evenemitter pass value parent child component
Comments
Post a Comment