How do you render a components html

Question

I am using angular 6 to develop a web app. My app consists of a user-information component, a results component, an api service and a data service. The idea is that the user enters an email(s) address into a text box and presses a button. On that button press I process the email(s) in the user information component and put them into the array and then I call a function from the results component that then uses that array to make the api calls in api service and then subscribe to that data. I finally get my results, and I now want to render those results at the path /results using the data that is located in the data service.

After all my processing to get the results I tried

this.router.navigate(['/results'])

but it would not work. I'm not sure how to do this properly. I have walked through the routing tutorial, but I am still confuses on what I need to include to make this whole thing work.

My results component which looks something like:

@Component(
{
    selector: 'app-results',
    templateUrl: './results.component.html',
    styleUrls: ['./results.component.css'],
    providers: [ApiService, DataService]
})
export class ResultsComponent implements OnInit
{
    constructor(private _apiService: ApiService, private router: Router, private _dataService: DataService)
    {
        this.userResults = this._dataService.getData();
    }
displayedColumns: string[] = ['User Email', 'Result'];
userResults = [];
employeeCheck(user: string)
    {
        console.log('Completing employee check')

        if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[3];
            });
            this.createTable();
        }
        else if (this)
        { //Check that NGP exists and is valid
            this.userResults.push({
                key: user,
                value:  this.messages[4];
            });
            this.createTable();
        }
        else if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[6]
            });
            this.createTable();
        }

        else if (this)
        { 
            this.userResults.push({
                key: user,
                value:  this.messages[5]
            });
            this.createTable();
        }
        else
        { //Don't know what else to do
            this.userResults.push({
                key: user,
                value:  this.messages[7]
            });
            console.log(this.userResults[0].key)
            this._dataService.saveResults(this.userResults);
            this.createTable();
        }
//console.log(this.userResults);

    }


    userCheck(user: string)
    {
        console.log('Checking ', user, ' information.');

        if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[0]
            });
            this.createTable();
        }
        else if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[1]
            });
            this.createTable();
        }
        else if (this)
        {
            this.userResults.push({
                key: user,
                value:  this.messages[2];
            });
            this.createTable();
        }
        else
        {
            this.employeeCheck(user);
        }
    }
createTable()
    {
        console.log(this.userResults)
        console.log('going to results')
        this.router.navigate(['/results'])      
    }

my service looks like:

import { Injectable } from '@angular/core';
import { Observable, Subject, throwError} from 'rxjs';

@Injectable({ providedIn: "root" })
export class DataService {
    private results: any[];
    constructor() { }

    saveResults(someArray){
        console.log('saving results')
        this.results = someArray
        console.log(this.results)
    }
}

From my app.module.ts

const appRoutes: Routes = [
 {path: "", redirectTo: "", pathMatch: "full"},
 {path: "", component: UserInformationComponent },
 {path: "results", component: ResultsComponent }
];

I want to display my results at the endpoint /results

Answer 1

It appears to be malformed route configuration. Try it.

const appRoutes: Routes = [
 {path: "", component: UserInformationComponent, pathMatch: "full"},
 {path: "results", component: ResultsComponent }
];