multi page registration form in angular 6 - angular6

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);
}
}