multi page registration form in angular 6

Question

I have a parent component as under and 4 child components for registration. The data is not visible if i retrun from step L2 to L1. Any idea?

<div class="container-fluid page-content" mat-dialog-content>
    <div class="row">
        <ul class="nav nav-pills nav-justified">
            <li [ngClass]="{'active': this.actL1}"><a (click)="onClick('l1')" data-toggle="pill">L1</a></li>
            <li [ngClass]="{'active': this.actL2}"><a (click)="onClick('l2')" data-toggle="pill">L2</a>
            </li>
            <li [ngClass]="{'active': this.actL3}"><a (click)="onClick('l3')" data-toggle="pill">L3</a>
            </li>
            <li [ngClass]="{'active': this.actL4}"><a (click)="onClick('l4')" data-toggle="pill">L4</a></li>
        </ul>
        <app-request-ltype *ngIf=actL1></app-request-ltype>
        <app-request-ptype *ngIf=actL2></app-request-ptype>
        <app-request-stype *ngIf=actL3></app-request-stype>
        <app-request-rType *ngIf=actL4></app-request-rtype>
    </div>
</div>

ltype component (RequestDetails ts file contains eg name:string)

import { Component, OnInit, getDebugNode } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { RequestDetails } from '';

@Component({
  selector: 'app-request-l1',
  templateUrl: './request-l1.component.html',
  styleUrls: ['./request-l1.component.css']
})
export class LtypeComponent implements OnInit {

  requestL1Form: FormGroup;



  constructor(private l1FormB: FormBuilder,  private router: Router, private route: ActivatedRoute) {
    this.requestL1Form = this.createL1FormGroup(l1FormB);
  }

  ngOnInit() {
  }

  createL1FormGroup(l1FB: FormBuilder) {
    return l1FB.group({
      l1Data: l1FB.group( new RequestDetails())
    });
}

onSubmit() {
  console.log('submitted values:', this.requestL1Form.value);
}

}