Ionic 3 - Add Rows Dynamically with ion-select using new component


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { InputRowComponent } from './input-row/input-row.component'

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {

  // will hold data for the elements added to the form
  inputRowValues = [{}]

  constructor(public navCtrl: NavController) { }

  // adds new entry into the inputRowValues array
  addRow() {

  // removes entry from the  inputRowValues array based on the id
  onDelete(_event) {
    this.inputRowValues = this.inputRowValues.filter((i: any) => !==



	<div padding>
		<button ion-button (click)="addRow()" block >Add New Row Item</button>
    <div padding>Swipe Row Items To Delete...</div>

    <div *ngFor="let i of inputRowValues; let ii=index"  style="font-size:smaller">
      <app-input-row [data]="i" (onDelete)="onDelete($event)"></app-input-row>


import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

  selector: 'app-input-row',
  templateUrl: './input-row.component.html',
  styleUrls: ['./input-row.component.css']
export class InputRowComponent implements OnInit {

  // the data object to hold values from this component
  @Input() data: any

  // emitt an event to indicate the user has clicked on 
  // the delete button in this component
  @Output() onDelete = new EventEmitter<any>();

  // constructor
  constructor() {

  // when the component is created, add a unique id
  // to the data so we can find it when deleting
  ngOnInit() { = new Date().getTime()

  // when the delete button has been clicked, emitt an event
  // that includes the object that was clicked on
  deleteClicked() {


		<ion-label>Comp├ętence {{index}}</ion-label>
		<ion-select [(ngModel)]="data.value">
			<ion-option value="informatique">Informatique</ion-option>
			<ion-option value="jardinnage">Jardinnage</ion-option>
			<ion-option value="impression3D">Impression 3D</ion-option>
			<ion-option value="menuiserie">Menuiserie</ion-option>
			<ion-option value="secouriste">Secouriste</ion-option>
			<ion-option value="montagevideo">Montage Video</ion-option>
			<ion-option value="excel">Excel</ion-option>
			<ion-option value="word">Word</ion-option>
			<ion-option value="sharepoint">Sharepoint</ion-option>
			<ion-option value="soudeur">Soudeur</ion-option>

    <ion-item-options side="right">
      <button ion-button color="danger"  (click)="deleteClicked(item)">DELETE</button>