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

plunker


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -