John Smith John Smith - 28 days ago 6
HTML Question

How can I load whole component in Angular?

In the example shown below when I click

Log in
my whole
login component
is loading. However when I click
I don't have an account
I get something like this this But I would like to have this: this
Any ideas how can I achieve this?

My source code:

login.component.html:

<div class="col-md-6 col-md-offset-3">
<form *ngIf="!authenticated" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
<div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
</div>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
<div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary" >Log in</button>


<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAML" /></div>
<div><a (click)="showSignUp = true" class="btn btn-link">I don't have an account</a>
</div>
</form>

<app-registration *ngIf="showSignUp"></app-registration>

<home *ngIf="authenticated"></home>

</div>


login.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../services/index';

@Component({
moduleId: module.id,
templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
model: any = {};
loading = false;
authenticated: boolean = false;
showSignUp: boolean = false;

constructor(
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService,
private alertService: AlertService) { }

ngOnInit() {
// reset login status
this.authenticationService.logout();

}

login() {
this.loading = true;
this.authenticationService.login(this.model.username, this.model.password)
.subscribe(
data => {
this.authenticated = true;
},
error => {
this.authenticated = false;
this.alertService.error(error);
this.loading = false;
});

}
}


SOLUTION
I solved my problem in the way shown below. Is it done properly or it is not acceptable and should be done in another way?

<div class="col-md-6 col-md-offset-3">
<form *ngIf="!authenticated" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
<div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
</div>
<div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
<div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
</div>
<div class="form-group">
<button [disabled]="loading" class="btn btn-primary" >Log in</button>


<img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///B1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /></div>

<div><a [routerLink]="['/registration']" skipLocationChange class="btn btn-link">I don't have an account.
</a>
</div>

</form>

<home *ngIf="authenticated"></home>
<app-registration *ngIf="showSignUp"></app-registration>

</div>

Answer Source

Instead of including

 <app-registration *ngIf="showSignUp"></app-registration>

in login.html

do the rounting, for example:

   <div><a [routerLink]="['/register']" skipLocationChange  class="btn btn-link">I don't have an account</a>

Adding skipLocationChange will keep the url the same