CODEWITHSUNDEEP
angularauthenticationspinner
RAL
RAL

Reputation: 327

Mat spinner is not shown

I want to show a spinner when log in is processed.

login.component.ts:

constructor(public spinner: SpinnerComponent) { }

  ngOnInit() {
    this.spinner.showSpinner = false;
  }

  login() {
    this.spinner.showSpinner = true;
    this.userService.login(this.username, this.password).subscribe(loginResponse => {
      ...
      this.spinner.showSpinner = false;
    });
  }

spinner.component.ts:

export class SpinnerComponent {

  @Input()
  showSpinner;

  constructor() { }
}

spinner.component.html:

<div *ngIf="showSpinner">
    <mat-spinner [mode]="indeterminate"></mat-spinner>
</div>

It seems that communication between login component and spinner component to set the showSpinner value is not correct.

Any idea about how to show the spinner?

Upvotes: 1

Views: 3205

Answers (3)

wFitz
wFitz

Reputation: 1286

login.component.ts

isWaiting: boolean = false;
constructor() { 
}
ngOnInit() { 
}

login() {
  this.isWaiting = true;
  this.userService.login(this.username, 
    this.password).subscribe(loginResponse => {
    ...
    this.isWaiting = false;
  });
}

in html 

<mat-spinner *ngIf="isWaiting" [mode]="'indeterminate'"> 
</mat-spinner>

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24472

You just add spinner component to login html like this

login.component.html 

<app-spinner [showSpinner]="showSpinner"></app-spinner>

login.component.ts:

  public showSpinner:bollean=false; 
  ngOnInit() {
    this.showSpinner = false;
  }

  login() {
    this.showSpinner = true;
    this.userService.login(this.username, this.password).subscribe(loginResponse => {
      ...
      this.showSpinner = false;
    });
  }

Upvotes: 1

Aniket Avhad
Aniket Avhad

Reputation: 4145

Don't use the @Input() with showSpinner property

just create showspinner as boolean like,

showSpinner: boolean;

@Input() decorator means you are passing value by component decorator

Upvotes: 0

Related Questions