2,306
edits
Changes
Jump to navigation
Jump to search
mLine 173:
Line 173: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
→app-routing.module.ts
export class AppRoutingModule { }
export class AppRoutingModule { }
</syntaxhighlight>
=== routing with parameters ===
==== app-routing.module.ts ====
<syntaxhighlight lang="typescript">
import { RouterModule, Routes } from '@angular/router';
import {WelcomeComponent} from "./welcome/welcome.component";
const routes: Routes = [
{ path: 'welcome/:name', component: LoginComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
</syntaxhighlight>
==== welcome/welcome.component.ts ====
<syntaxhighlight lang="typescript">
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from @angular/core;
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
message = 'Some Welcome Message'
name = ''
// ActivatedRoute
constructor(private route:ActivatedRoute){
}
ngOnInit(){
console.log(this.message)
name = this.route.snapshot.params['name'];
}
}
</syntaxhighlight>
==== login/login.component.ts ====
<syntaxhighlight lang="typescript">
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username = 'Rafa'
password = ''
errorMessage = 'Invalid credentials'
invalidLogin = false
constructor() { }
ngOnInit(): void {
}
handleLogin(){
// console.log(this.username)
this.invalidLogin = !(this.username === 'Rafa' && this.password === 'abcd');
if ( !this.invalidLogin ) {
this.router.navigate(['welcome', this.username])
}
}
}
</syntaxhighlight>
</syntaxhighlight>
==Error component==
==Error component==
ng g c error
ng g c error