reload particular component in angular when user registers using material dialog

Question

I am trying to load the registered users in to where the registration happens on the . Once the user registers then the registered user should be populated in the .For that i have written the code as below.

This below code is in projects.component.html

<a href="javascript:;" (click)="openDialog()">Register</a>

The below code is in projects.component.ts

openDialog(): void {
    const dialogRef = this.dialog.open(RegisterComponent, {
      width:'50%',
        height:'85%'
    });
  }

When i click on the Register it opens up a dialog box with the below fields. The below code is register.component.html

<form role="form" #heroForm="ngForm">

            <!-- Registration Form on Modal Dialog Box Start -->

            <!-- Name Start -->
            <div class="form-group row">
              <label for="name" class="col-md-0 control-label"></label>
              <div class="col-md-5">
                  <mat-input-container class="full-width">
                      <input required [(ngModel)]="entry.name" name="name" id="name"
                             matInput placeholder="Name">
                  </mat-input-container>
              </div>
          </div>
          <!-- Name End -->

          <!-- Conditional Select Field for Different Account Types. Eg. Git, Bitbucket, GitLab, Github -->
          <div class="form-group row">
            <label class="col-md-0 control-label">
            </label>
            <div class="col-md-5">
                <mat-form-field>
                    <mat-select placeholder="Account Type" required [(ngModel)]="entry.accountType"
                                name="type">
                        <mat-option *ngFor="let type of accountTypes" [value]="type">
                            {{type}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>
        <!-- Conditional Select Field for Different Account Types. Eg. Git, Bitbucket, GitLab, Github End -->             

              <!-- Git  Start    -->
              <div class="form-group row" *ngIf="entry.accountType === 'Git'">
                <label for="gitAccessKey" class="col-md-0 control-label">
                </label>
                <div  class="col-md-5">
                    <mat-input-container class="full-width" *ngIf="entry.accountType != 'Slack'" >
                        <input required [(ngModel)]="entry.accessKey" name="accessKey" id="gitAccessKey"
                               matInput type="text" placeholder="Access-Key">
                    </mat-input-container>
                </div>
                </div>
            </div>

            <div class="form-group row" *ngIf="entry.accountType === 'Git'">
                <label for="gitSecret" class="col-md-0 control-label">
                </label>
                <div class="col-md-5">
                    <mat-input-container class="full-width" >
                        <input required [(ngModel)]="entry.secretKey" name="secret" id="gitSecret"
                               matInput type="password" placeholder="Secret-Key">
                    </mat-input-container>
                </div>
            </div>
            <!-- Git  End    -->
 </form>

The below code is for register.component.ts

import {Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import {Routes, RouterModule, Router, ActivatedRoute}from "@angular/router";
import {AccountService}from '../../../services/account.service';
import {OrgService}from '../../../services/org.service';
import {SnackbarService}from '../../../services/snackbar.service';
import {Account} from '../../../models/account.model';
import {Handler}from '../../dialogs/handler/handler';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss'],
  providers: [AccountService, OrgService, SnackbarService]
})
export class RegisterComponent implements OnInit{
  entry: Account = new Account();
  accountTypes = ['Git', 'GitHub', 'BitBucket', 'GitLab'];
  constructor(private accountService: AccountService, 
    private orgService: OrgService,
    private handler: Handler, 
    private snackbarService: SnackbarService,
    private route: ActivatedRoute, 
    private router: Router,
    public dialogRef: MatDialogRef<RegisterComponent>,
    private dialog: MatDialog) {}

  ngOnInit() {
  }

  create() {
    this.handler.activateLoader();
    this.snackbarService.openSnackBar(this.entry.name + " registering...", "");
    this.accountService.create(this.entry).subscribe(results => {
      this.handler.hideLoader();
      if (this.handler.handle(results)) {
        return;
      }
    this.snackbarService.openSnackBar(this.entry.name + " registered successfully", "");
    this.entry = results['data'];
    console.log(this.entry);
    this.onClose();
    //this.refresh();
    this.router.navigate(['/app/projects/new']);    
    }, error => {
      this.handler.hideLoader();
      this.handler.error(error);
    });
  }

  onClose(){
    this.dialogRef.close();
  }

  refresh() {
    location.reload()
  }
}

See below image for better clarity. So my workflow is something like this, When the user registers himself on the dialog box the registered username should be populated in the dropdown using angular. I have used the window.location.reload(); But the issue with it is it completely reloads the entire page. Which is a bad user experience. So without reloading the entire page is there any other possibility where i can make the user on the same route without distracting him from the current page? Any suggestions please? Means i i want to reload only that particular view.

Answer 1

This is the whole points of SPA and AJAX applications that you don't have to reload the page every time. Same in this case.

You could store all users in a collection. Then when you get confirmation from the server that user has logged in correctly, you could raise an event that pushes this account to the list. Then if all items in your list are bound to this collection, view will be updated automatically.

Here is an example:

select.component.html

<mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="item">
  <mat-option *ngFor="let item of foods" [value]="item.value">
    {{item.viewValue}}
  </mat-option>
</mat-select>

<button mat-raised-button (click)="addItem()">Add item</button>

select.component.ts

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

@Component({
  selector: 'app-select',
  templateUrl: './select.component.html',
  styleUrls: ['./select.component.css']
})


export class SelectComponent implements OnInit {

  foods: Food[] = [
    { value: 'food-0', viewValue: 'Pizza' },
    { value: 'food-1', viewValue: 'Steak' },
    { value: 'food-2', viewValue: 'Fries' },
  ];
  constructor() { }

  ngOnInit() {
  }

  addItem() {
    this.foods.push({value: 'food', viewValue: 'Hamburgers'});
    console.log(`Items count ${this.foods.length}`);
  }

}

export interface Food {
  value: string;
  viewValue: string;
}