refresh functionality added

Author: alok722

src/app/app.component.html

@@ -2,7 +2,20 @@
  <div class="row">
  <div class="col col-md-4 offset-md-4">
  <div class="text-center">
- <app-card [user]="user"></app-card>
+ <app-card [user]="user" (getUser)="getUser()" *ngIf="user; else loadingBlock"></app-card>
+
+ <ng-template #loadingBlock>
+ <div class="text-center mt-5">
+ <div
+ class="spinner-border spinner-grow-mg text-white"
+ role="status"
+ >
+ <div class="text-white">
+ loading....
+ </div>
+ </div>
+ </div>
+ </ng-template>
  </div>
  </div>
  </div>

src/app/app.component.ts

@@ -11,14 +11,23 @@ import { UserService } from './services/user.service';
 export class AppComponent implements OnInit {
  user: any;
 
- constructor(private userService: UserService, private toastr: ToastrService) {}
+ constructor(private userService: UserService, private toastr: ToastrService) { }
 
  ngOnInit() {
  this.userService.getUser().subscribe((user: any) => {
  this.user = user.results[0];
  this.toastr.info('Profile Loaded. . .');
  }, (err) => {
- this.toastr.error(err.status, 'Opps');
+ this.toastr.error(err.status, 'Opps, Please reload. . .');
+ });
+ }
+
+ getUser() {
+ this.userService.getUser().subscribe((user: any) => {
+ this.user = user.results[0];
+ this.toastr.info('Profile Loaded. . .');
+ }, (err) => {
+ this.toastr.error(err.status, 'Opps, Please reload. . .');
  });
  }
 }

src/app/card/card.component.html

@@ -26,5 +26,6 @@ <h3>
  <fa-icon [icon]="faDatabase"></fa-icon>
  Registered on {{ user?.registered?.date | date }}
  </div>
+ <button class="btn btn-primary mt-3 btn-sm" (click)="refresh()">Refresh</button>
  </div>
 </div>

src/app/card/card.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, EventEmitter, Output  } from '@angular/core';
 import {
  faEnvelope,
  faMapMarkedAlt,
@@ -11,9 +11,10 @@ import {
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
 })
-export class CardComponent implements OnInit {
+export class CardComponent {
 
  @Input()user;
+ @Output('getUser') getUser: EventEmitter<any> = new EventEmitter();
 
  faEnvelope = faEnvelope;
  faMapMarkedAlt = faMapMarkedAlt;
@@ -22,7 +23,8 @@ export class CardComponent implements OnInit {
 
  constructor() { }
 
- ngOnInit(): void {
+ refresh() {
+ this.getUser.emit();
  }
 
 }