I want to click on a button that when clicked a row is inserted:
<ion-grid>
<ion-row>
<ion-col>
1 of 2
</ion-col>
<ion-col>
2 of 2
</ion-col>
</ion-row>
</ion-grid>
<button (click)="addrow"></button>
On a typescript side:
addrow(){
//code
}
Do you know any example using ionic 2 and typescript?
You can use an array to add rows dynamically. Please take a look at this plunker. Please notice that in the plunker I also use a maxQuantity property to disable the button (and avoid new rows to be added to the grid).
The view:
<ion-header>
<ion-navbar>
<ion-title>Ionic Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid>
<ion-row *ngFor="let row of rows">
<ion-col>
{{ row?.firstCol }}
</ion-col>
<ion-col>
{{ row?.secondCol }}
</ion-col>
</ion-row>
</ion-grid>
<button ion-button [disabled]="rows?.length === maxQuantity" (click)="addrow()">Add a row</button>
</ion-content>
The component:
@Component({...})
export class HomePage {
public rows: Array<{ firstCol: string, secondCol: string }> = [];
private maxQuantity: number = 5;
constructor() {}
public addrow(): void {
this.rows.push({ firstCol: '1 of 2', secondCol: '2 of 2' });
}
}