How to redirect to main component after success login - angular2-routing

Question

I am a new in Angular2 and stacked on next step. My web site starts with a login page. I enter user and password( Login Component), receive from backend success response and want to redirect to the main page ( Main Component).
My project structure is:
here
login.component.ts
import { Component, OnInit, style } from '#angular/core';
import 'rxjs/add/operator/map';
import { Injectable } from '#angular/core';
import { Http, Headers, RequestOptions, Response } from '#angular/http';
import { URLSearchParams } from '#angular/http';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import $ from 'jquery';
import { parse } from 'url';
import { FormControl, FormGroup } from "#angular/forms";
import { LoginServiceService } from './login.service';
import 'rxjs/add/operator/map';
import { users } from './login.users';
import {Router} from '#angular/router';
#Component({
selector: 'app-root',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
public data;
constructor(public jsonLoginDataService: LoginServiceService) {
}
ngOnInit() {
}
login(userName, password) {
let user = new users(userName, password);
this.jsonLoginDataService.checkLogin(user).subscribe(
function (success) {
this.data = success;
//this.datahandle(success);
if(this.data.length==0)
{
console.log("User wasn't found");
}
else
{
//Redirect to Main Component
}
},
error => console.log('Getting Server Data Error :: ' +
JSON.stringify(error)));
}
datahandle(jsonData) {
let keys = Object.keys(jsonData);
}
}
login.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { CommonModule } from '#angular/common';
import { TagCloudModule } from 'angular-tag-cloud-module';
import { LoginComponent } from './login.component';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import {MatDialogModule} from '#angular/material/dialog';
import { LoginServiceService } from './login.service';
import { RouterModule, Routes } from '#angular/router';
import { MainComponent } from '../main/main.component';
import { routing } from './login.routing';
#NgModule({
declarations: [
LoginComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
TagCloudModule,
NgbModule,
MatDialogModule
],
providers: [LoginServiceService],
bootstrap: [LoginComponent]
})
export class LoginModule { }
main.component.ts
import { Component, OnInit, style } from '#angular/core';
import 'rxjs/add/operator/map';
import { Injectable } from '#angular/core';
import { Http, Headers, RequestOptions, Response } from '#angular/http';
import { CcDataServiceService } from './api.service';
import { new_Item } from './main.newItem';
import { URLSearchParams } from '#angular/http';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import $ from 'jquery';
import { new_Income } from './main.newIncome';
import { parse } from 'url';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
#Injectable()
export class MainComponent implements OnInit {
public exp_total_amount: number;
add_category: string;
add_ex_budget: string;
add_income_category: string;
add_income_amount: number;
public real_total_amount: number;
public pass_new_month_amount: number;
public total_income: number;
public current_budget: number;
real_amount: number;
temp_amount: number;
service: string;
service1: string;
expected_amount: number;
deviation: number;
left_amount: number;
history: string;
income_amount: number;
purchase_date: string;
public data;
public data_Income;
public real_data;
public saving_progress: number;
public balance_progress: number;
public left_spend_amount: number;
constructor(public jsonDataService: CcDataServiceService) {
}
ngOnInit() {
this.loadData();
}
datahandle(jsonData) {
//console.log('check your data' + JSON.stringify(jsonData)); //<-----check data
// may parse your data
let keys = Object.keys(jsonData);
}
updateDeviation() {
for (let i = 0; i < this.data.length; i++) {
this.data[i].deviation = Math.round((this.data[i].real_amount * 100) / (this.data[i].expected_amount) * 10) / 10;
}
}
updateTotals() {
this.exp_total_amount = 0;
this.real_total_amount = 0;
for (let i = 0; i < this.data.length; i++) {
this.exp_total_amount += Math.round((this.data[i].expected_amount) * 10) / 10;
this.real_total_amount += Math.round((this.data[i].real_amount) * 10) / 10;
this.data[i].left_amount = Math.round((this.data[i].expected_amount - this.data[i].real_amount) * 10) / 10;
}
this.pass_new_month_amount = Math.round((this.exp_total_amount - this.real_total_amount) * 10) / 10;
//this.
this.checkAmount();
}
updateCurrentBadget() {
this.current_budget = Math.round(this.total_income - this.real_total_amount) * 10 / 10;
this.saving_progress = Math.round(this.current_budget * 100 / this.total_income) * 10 / 10;
this.balance_progress = Math.round(this.pass_new_month_amount * 100 / this.exp_total_amount) * 10 / 10;
this.checkAmount();
}
updateIncome() {
this.total_income = 0;
for (let i = 0; i < this.data_Income.length; i++) {
this.total_income += Math.round((this.data_Income[i].income_amount) * 10) / 10;
}
this.checkAmount();
}
reloadPageData() {
this.loadData();
this.updateIncome();
this.checkAmount();
this.ngOnInit();
}
addCategory(add_category, add_ex_budget) {
let new_item = new new_Item(add_category, add_ex_budget);
this.jsonDataService.setCategory(new_item).subscribe(
function (success) {
this.data = success;
},
error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
this.updateTotals();
this.reloadPageData();
this.updateCurrentBadget();
this.checkAmount();
}
addIncomeCategory(add_income_category, add_income_amount) {
let new_income = new new_Income(add_income_category, add_income_amount);
this.jsonDataService.setIncomeData(new_income).subscribe(
function (success) {
this.data = success;
},
error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
this.updateIncome();
this.reloadPageData();
this.clearFields();
this.checkAmount();
}
deleteCategory(service1) {
this.jsonDataService.deleteCategory(service1).subscribe(
function (success) {
this.data = success;
},
error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
this.updateTotals();
this.reloadPageData();
}
updateBudget(this) {
let updatedData;
for (let i = 0; i < this.data.length; i++) {
if (this.data[i].service === this.service) {
this.data[i].real_amount = +this.data[i].real_amount;
this.data[i].real_amount += this.temp_amount;
this.data[i].history += " $" + this.temp_amount + " - " + this.purchase_date + ";";
updatedData = this.data[i];
}
}
this.jsonDataService.performPayment(updatedData).subscribe(
function (success) {
this.data = success;
},
error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
this.updateDeviation();
this.updateTotals();
this.updateCurrentBadget();
this.clearFields();
this.loadData();
}
hideLog() {
if ($('#input_log').val() === "Show log") {
$('#log_table').css('display', 'block');
$('#input_log').val('Hide log');
}
else if ($('#input_log').val() === "Hide log") {
$('#log_table').css('display', 'none');
$('#input_log').val('Show log');
}
}
clearFields() {
$('input').each(function () {
if (($(this).attr('type') == 'number') || ($(this).attr('type') == 'text'))
$(this).val('');
});
}
checkAmount() {
let xx = (this);
$('#budget_table tbody tr').each(function () {
let y = parseInt($(this).children('td:eq(3)').text());
if (y < 0) {
$(this).children('td:eq(3)').css('color', "red ");
}
if (y > 0) {
$(this).children('td:eq(3)').css('color', "green ");
}
});
$('label').each(function () {
let x = parseInt((this).innerHTML);
if (xx.real_total_amount > xx.exp_total_amount) {
if (x == xx.real_total_amount) {
$(this).css('color', "red ");
}
}
if (xx.real_total_amount < xx.exp_total_amount) {
if (x == xx.real_total_amount) {
$(this).css('color', "green ");
}
}
if ((x == xx.pass_new_month_amount) && (xx.pass_new_month_amount < 0)) {
$(this).css('color', "red ");
}
if ((x == xx.pass_new_month_amount) && (xx.pass_new_month_amount > 0)) {
$(this).css('color', "green ");
}
});
// Progress bar coloured
$('.progress-bar').each(function () {
let width_size = $(this).prop('style')['width'];
let new_width = width_size.replace('%', '');
if (new_width > 100) {
$(this).css('background-color', 'red');
}
});
}
loadData() {
let thisx = this;
let thisi = this;
this.jsonDataService.view_services(thisx).subscribe(
function (success) {
thisx.data = success;
thisx.datahandle(success);
thisx.updateDeviation();
thisx.updateTotals();
},
error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
this.jsonDataService.view_income(thisi).subscribe(
function (success) {
thisi.data_Income = success;
thisi.updateIncome();
thisi.updateCurrentBadget();
},
error => console.log('Getting Server Data Error :: ' + JSON.stringify(error)));
}
}
main.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { CommonModule } from '#angular/common';
import { TagCloudModule } from 'angular-tag-cloud-module';
import { MainComponent } from './main.component';
import { CcDataServiceService } from './api.service';
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
import {MatDialogModule} from '#angular/material/dialog';
// Import HttpClientModule from #angular/common/http
//import {HttpClientModule} from '#angular/common/http';
#NgModule({
declarations: [
MainComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
TagCloudModule,
NgbModule,
MatDialogModule,
],
providers: [CcDataServiceService],
bootstrap: [MainComponent]
})
export class MainModule { }
What I have to do for redirect to MainComponent?
Regards.

Answer 1

Create the Following for Manage Navigation and Routing
app.routing.ts
import {ModuleWithProviders} from '#angular/core'
import {RouterModule,Routes} from '#angular/router'
import {LoginComponent} from './login/login.component.ts'
import {MainPageComponent} from './main/main.component'
export const routes:Routes=[
{
path:'',
redirectTo:'login',
pathMatch:'full'
},
{
path:'login',
component:LoginComponent
},
{
path:'main',
component:MainPageComponent
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
app.module.ts
import { routing } from './app.routes';
#NgModule({
imports: [
routing
]
})
login.component.ts
import {Router} from '#angular/router'
constructor(public router:Router) { }
navigate(){
this.router.navigate(['\main']); //Add this line to navigate in your method
}
Add this line to where you want to place your navigation
app.component.html
<router-outlet></router-outlet>
I hope this help and easy to understand..
learn routing visit this site
https://coryrylan.com/blog/introduction-to-angular-routing