I have a form that I have broken into several different components in Angular. By the end of the form, all the data needs to be submitted together.

My thought process was to create a provider to handle/save the form data and at the end of the form, use the provider to package it up so it can be sent to an API. I have two examples of my form components below. In total there are 6 components.

This code works, but I feel I am not utilizing angular in the best possible way. Any suggestions/criticisms are greatly appreciated.

Form Data Provider

import Injectable from '@angular/core';

interface membershipType 
 membershipId: number


interface primaryMember 
 firstName: string,
 lastName: string,
 phoneNumber: number,
 address: string,
 city: string,
 state: string,
 zip: number


@Injectable()
export class MembershipFormProvider 

membershipTypeData: membershipType;
primaryMemberData: primaryMember

constructor() 



setMembershipType(formData: membershipType)
 this.membershipTypeData = formData;


getMembershipType()
 return this.membershipTypeData;


setPrimaryMember(formData: primaryMember)
 this.primaryMemberData = formData;


getPrimaryMember()
 return this.primaryMemberData;

First Form Component

.ts File

import MembershipFormProvider from '../../providers/membership-form/membership-form';

@IonicPage(
 name: 'register-membership-type',
 defaultHistory: ['sign-in']
)
@Component(
 selector: 'page-register-membership-type',
 templateUrl: 'register-membership-type.html',
)
export class RegisterMembershipTypePage {

selectedPlan: number = 1;

constructor(
 public navCtrl: NavController, 
 public navParams: NavParams,
 private formData: MembershipFormProvider) 


selectPlan(plan: number)
 this.selectedPlan = plan;


submitData()
 let membershipType = 
 'membershipId' : this.selectedPlan
 

 this.formData.setMembershipType(membershipType);
 this.navCtrl.push('register-primary-member');

.html file

<ion-header no-border>

 <ion-navbar color="primary">

 </ion-navbar>

</ion-header>

<ion-content >
 <div padding-left class="header-content">
 <h1>Register</h1>
 <p>We offer different membership plans, which one works best for you?</p>
 </div>

 <ion-list>
 <ion-item padding-vertical (click)="selectPlan(1)">
 <ion-icon *ngIf="selectedPlan == 1" item-start name="checkmark-circle-outline"></ion-icon>
 <h2>Individual Membership</h2>
 <p>1 Adult, 16 years or older</p>
 <p item-end>$34.00</p>
 </ion-item>

 <ion-item padding-vertical (click)="selectPlan(2)">
 <ion-icon *ngIf="selectedPlan == 2" item-start name="checkmark-circle-outline"></ion-icon>
 <h2>Dual Membership</h2>
 <p>2 Adults or
 1 Adult and 1 Child</p>
 <p item-end>$49.00</p>
 </ion-item>

 <ion-item padding-vertical (click)="selectPlan(3)">
 <ion-icon *ngIf="selectedPlan == 3" item-start name="checkmark-circle-outline"></ion-icon>
 <h2>Family Membership</h2>
 <p>2 Adults and up to 4 Children</p>
 <p>* Additional Adult $25.00</p>
 <p>* Additional Child $14.00</p>
 <p item-end>$69.00</p>
 </ion-item>
 </ion-list>

 <div padding>
 <button (click)="submitData()" class="submit-button" ion-button block>Next</button>
 </div>
</ion-content>

Second Form Component

.ts File

import Component from '@angular/core';
import IonicPage, NavController, NavParams from 'ionic-angular';

import MembershipFormProvider from '../../providers/membership-form/membership-form';


@IonicPage(
 name: 'register-primary-member',
 defaultHistory: ['RegisterMembershipTypePage']
)
@Component(
 selector: 'page-register-primary-member',
 templateUrl: 'register-primary-member.html',
)
export class RegisterPrimaryMemberPage 

 constructor(
 public navCtrl: NavController, 
 public navParams: NavParams,
 private formData: MembershipFormProvider) 
 

 submitData(firstName,lastName,phoneNumber,address,city,state, zip)

 let formData = 
 'firstName' : firstName,
 'lastName' : lastName,
 'phoneNumber' : phoneNumber,
 'address' : address,
 'city' : city,
 'state' : state,
 'zip' : zip,
 ;

 this.formData.setPrimaryMember(formData);
 this.navCtrl.push('register-primary-member');
 

.html file

<ion-header no-border>

 <ion-navbar color="primary">

 </ion-navbar>

</ion-header>

<ion-content padding>
 <div class="header-content">
 <h1>Register</h1>
 <p>Your plan must have one primary member, please enter their information below</p>
 </div>

 <ion-list no-lines>

 <ion-item>
 <ion-label floating>First Name</ion-label>
 <ion-input [(ngModel)]="firstName"></ion-input>
 </ion-item>


 <ion-item>
 <ion-label floating>Last Name</ion-label>
 <ion-input [(ngModel)]="lastName"></ion-input>
 </ion-item>

 <ion-item>
 <ion-label floating>Phone Number</ion-label>
 <ion-input [(ngModel)]="phoneNumber"></ion-input>
 </ion-item>


 <ion-item>
 <ion-label floating>Address</ion-label>
 <ion-input [(ngModel)]="address"></ion-input>
 </ion-item>


 <ion-item>
 <ion-label floating>City</ion-label>
 <ion-input [(ngModel)]="city"></ion-input>
 </ion-item>


 <ion-item class="select">
 <ion-label floating>State</ion-label>
 <ion-select [(ngModel)]="state" interface="popover">
 <ion-option value="sc">SC</ion-option>
 <ion-option value="al">AL</ion-option>
 </ion-select>
 </ion-item>


 <ion-item>
 <ion-label floating>Zip</ion-label>
 <ion-input [(ngModel)]="zip"></ion-input>
 </ion-item>

 </ion-list>

 <button (click)="submitData(firstName,lastName,phoneNumber,address,city,state, zip)" class="submit-button" ion-button block>Next</button>
</ion-content>