Clash Royale CLAN TAG

reload particular component in angular when user registers using material dialog

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.