title: How to Pass the Data from One form to Another Form in Angular2
body: <p>I want to pass the data from one form to another. After clicking <strong>Next</strong> button of Form1, Form2 should show the <em>data entered in Form1</em>. How to achieve this..Can anyone help me out..Thanks in Advance</p>
  
  <p><strong>Form1.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="Form1" (ngSubmit)="saveNewCustomer(Form1.value)"&gt;
  &lt;label&gt;Mobile No.&lt;/label&gt;
  &lt;div class="form-group"&gt;
      &lt;input class="form-control" name="MobileNo" placeholder="Mobile No" #MobileNo="ngModel" [(ngModel)]="CustomerForm.MobileNo"&gt;
  &lt;/div&gt;
  
  &lt;label&gt;Name&lt;/label&gt;
  &lt;div class="form-group"&gt;
      &lt;input class="form-control" name="Name" placeholder="Name" #Name="ngModel" [(ngModel)]="CustomerForm.Name"&gt;
  &lt;/div&gt;
  
  &lt;label&gt;Amount&lt;/label&gt;
  &lt;div class="form-group"&gt;
      &lt;input class="form-control" name="Amount" placeholder="Amount" #Amount="ngModel" [(ngModel)]="CustomerForm.Amount"&gt;
  &lt;/div&gt;
  
  &lt;div class="form-row"&gt;
      &lt;div class="form-group col-md-8"&gt;
          &lt;button type="submit" class="btn btn-lg btn-block btn-primary"&gt;Next&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Form1.component.ts</strong></p>
  
  <pre><code>export class Form1Component implements OnInit {
  public CustomerForm: FormGroup;
  public submitted: boolean;
  FormValues: FormVM[] = [];
  FormValue: FormVM;
  constructor(private fb: FormBuilder, private router: Router, private dataService: AppDataService,) { }
  ngOnInit() {
      this.CustomerForm = this.fb.group({
          MobileNo: [''],
          Name: [''],
          Amount: ['']
      });
  }
  saveNewCustomer(customer: FormVM) {      
      this.submitted = true; 
      this.router.navigate(['/Form2']);        
  }
  </code></pre>
  
  <p>Above are the Form 1 component code and below is Form 2 component code, which I should get After clicking <strong>Next</strong> button of Form1 
  <strong>Form2.component.html</strong></p>
  
  <pre><code>    &lt;h5&gt;Form2&lt;/h5&gt;
  &lt;form class="cat-form" *ngFor="let list of FormValues"&gt;
      &lt;label&gt;Mobile No.&lt;/label&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" name="MobileNo"&gt;
          {{list.MobileNo}}
      &lt;/div&gt;
  
      &lt;label&gt;Name&lt;/label&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" name="Name"&gt;
          {{list.Name}}
      &lt;/div&gt;
  
      &lt;label&gt;Amount&lt;/label&gt;
      &lt;div class="form-group"&gt;
          &lt;input class="form-control" name="Amount"&gt;
          {{list.Amount}}
      &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Form2.component.ts</strong></p>
  
  <pre><code>export class Form2Component {
      FormValues: FormVM[] = [];
      FormValue: FormVM;
      constructor(private dataService: AppDataService, private router: Router, private getdata: Form1Component) {
          getdata.FormValues;
      }
      ngOnInit() {
  
      }
  }
  </code></pre>