Angular renders child component in parent view - html

Question

I have an application in which the user can register an account. After registration he needs to confirm it by entering a code he received in the email.
Follwowing route setup:
const routes: Routes = [
{
path: 'register', component: RegisterComponent, children: [
{path: 'confirm', component: ConfirmRegisterComponent, pathMatch: 'full'}
]
},
];
RegisterComponent.ts:
export class RegisterComponent implements OnInit {
registerForm: FormGroup = new FormGroup({
username: new FormControl('', Validators.required),
email: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
});
constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {
}
ngOnInit(): void {
}
performRegister() {
console.log(this.registerForm.value);
this.authService.register(this.username, this.email, this.password).subscribe(
(response: AbstractResponse) => this.handleResponse(response)
);
}
handleResponse(response: AbstractResponse) {
if (response.status === 200) {
this.router.navigate(['confirm'], {relativeTo: this.route, queryParams: {id: response.payload}})
}
}
get username() {
return this.registerForm.get('password')?.value;
}
get email() {
return this.registerForm.get('email')?.value;
}
get password() {
return this.registerForm.get('password')?.value;
}
}
RegisterComponent.html with router-outlet:
<router-outlet></router-outlet>
<h1>Register</h1>
<form (ngSubmit)="performRegister()" [formGroup]="registerForm">
<div class="form-group">
<label for="username">Username</label><br/>
<input class="form-control" formControlName="username" id="username" name="username" ngModel
placeholder="Username" type="text">
<div *ngIf="username?.invalid && (username?.dirty || username?.touched)"
class="alert alert-danger">
<div *ngIf="username?.errors?.required">
Username is required.
</div>
</div>
<br/>
</div>
<div class="form-group">
<label for="email">Email:</label><br/>
<input class="form-control" formControlName="email" id="email" name="email" ngModel placeholder="Email address"
type="email">
<div *ngIf="email?.invalid && (email?.dirty || email?.touched)"
class="alert alert-danger">
<div *ngIf="email?.errors?.required">
Username is required.
</div>
</div>
<br/>
</div>
<div class="form-group">
<label for="password">Your password:</label> <br/>
<input class="form-control" formControlName="password" id="password" name="password" ngModel
placeholder="Password" type="password">
<div *ngIf="password?.invalid && (password?.dirty || password?.touched)"
class="alert alert-danger">
<div *ngIf="password?.errors?.required">
Username is required.
</div>
</div>
<br/>
</div>
<div class="form-check">
<input class="form-check-input" id="exampleCheck1" type="checkbox">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button [disabled]="!registerForm.valid" class="btn btn-secondary" type="submit">Register</button>
<br/>
<a routerLink="/login">Login</a>
</form>
RegisterConfirmation.ts:
#Component({
selector: 'app-confirm-register',
templateUrl: './confirm-register.component.html',
styleUrls: ['./confirm-register.component.css']
})
export class ConfirmRegisterComponent implements OnInit {
private id!: string;
public confirmationCodeForm: FormGroup = new FormGroup({
code: new FormControl('', Validators.required),
});
constructor(private authService: AuthService, private router: Router, private activatedRoute: ActivatedRoute) {
}
ngOnInit(): void {
this.activatedRoute.queryParams.subscribe(params => {
this.id = params['id'];
})
}
get code() {
return this.confirmationCodeForm.get('code')?.value;
}
performConfirmRegistration() {
this.authService.confirmRegistration(this.id, this.code).subscribe(
(response: AbstractResponse) => this.handleResponse(response)
);
}
handleResponse(response: AbstractResponse) {
if (response.status === 200) {
this.router.navigate(['login'])
}
}
}
and the html:
<h1>Confirm Registration</h1>
<form (ngSubmit)="performConfirmRegistration()" [formGroup]="confirmationCodeForm">
<div class="form-group">
<label for="code">Confirmation Code</label><br/>
<input class="form-control" formControlName="code" id="code" name="code" ngModel
placeholder="XXX-XXX-XXX" type="text">
<div *ngIf="code?.invalid && (code?.dirty || code?.touched)"
class="alert alert-danger">
<div *ngIf="code?.errors?.required">
Confirmation code is required.
</div>
</div>
<br/>
</div>
<button [disabled]="!confirmationCodeForm.valid" class="btn btn-secondary" type="submit">Confirm</button>
<br/>
</form>
But it seems to render both components simultanously which i dont want :/
Can somebody help me on this? I know it works without specifing the confirm as a child of register, but i think it being the child is better.

Answer 1

you can has a router like
const routes: Routes = [
{path: 'register', component: RegisterComponent}
{path: 'register/confirm', component: ConfirmRegisterComponent}
]
and remove the <router-outlet> of the RegisterComponent