Binding index in template Angular 2 -
i need counter starting 2.
how link [mddatepicker], [mddatepickertoggle], #next_payment_?
<div formarrayname="next_payment"> <div *ngfor="let payment of productform.controls.next_payment.controls; let i=index" class="panel panel-default"> <div class="panel-heading"> <span>payment {{i + 2}}</span> <span class="glyphicon glyphicon-remove pull-right" *ngif="productform.controls.next_payment.controls.length > 1" (click)="removenextpayment(i)"></span> </div> <div class="panel-body" [formgroupname]="i"> <div class="form-group col-md-4"> <md-input-container> <input mdinput [mddatepicker]="'next_payment' + + 2" [ngmodel]="npd | date:'yyyy-mm-dd'" (ngmodelchange)="npd = $event" placeholder="date {{i + 2}}" formcontrolname="next_payment_date_{{i+2}}" id="next_payment_date_{{i+2}}"> <button mdsuffix [mddatepickertoggle]="'next_payment' + + 2"></button> </md-input-container> <md-datepicker #next_payment_2></md-datepicker> </div> </div> </div> </div>
you define child component control , pass value attribute. way can still use local template variable #next_payment, , reference [mddatepicker], [mddatepickertoggle].
html
patent component:
<div *ngfor="let payment of productform.controls.next_payment.controls; let i=index" class="panel panel-default"> <div class="panel-heading"> <span>payment {{i+2}}</span> <span class="glyphicon glyphicon-remove pull-right" *ngif="productform.controls.next_payment.controls.length > 1" (click)="removenextpayment(index)"></span> </div> <my-payement-component [index]=i+2><my-payement-component> </div>
child component:
<div class="panel-body" [formgroupname]="index"> <div class="form-group col-md-4"> <md-input-container> <input mdinput [mddatepicker]="next_payment" [ngmodel]="npd | date:'yyyy-mm-dd'" (ngmodelchange)="npd = $event" placeholder="date {{index}}" formcontrolname="next_payment_date" id="next_payment_date"> <button mdsuffix [mddatepickertoggle]="next_payment"></button> </md-input-container> <md-datepicker #next_payment></md-datepicker> </div> </div>
typescript
child component
..... @input() index: number;
i wasn't able test code hope idea
Comments
Post a Comment