export const routes: Routes = [
{path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login',component: LoginComponent },
{path: 'main', component: MainComponent ,},
{ path: 'Dashboard',component: DashboardComponent,
children: [
{
path: ':id',
children: [
{ path: '',redirectTo: 'Registration', pathMatch: 'full'},
{
path: 'Registration',
component: RegistrationComponent,
},
{
path: 'Contact',
component: ContactComponent
},
]
}
]
},];
Struggling to maintain input fields data in contact and registration components? Learn how to avoid losing data when navigating between child components.
DashBoard Component - Registration:
@Component({
selector: 'Registration',
template: `<input type="text" required>`,})
export class RegistrationComponent{
constructor(public router: Router) {}}
DashBoard Component - Contact:
@Component({
selector: 'Contact',
template: `<input type="text" required>`,})
export class ContactComponent{
constructor(public router: Router) {}}
<div>
<a class="Registratin" [routerLink]="[':/registaration']" routerLinkActive="active">
</a>
<a class="Contact" [routerLink]="[':/contact']">
</a>
</div>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>