📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.
▶️ Subscribe to My YouTube Channel (176K+ subscribers): Java Guides on YouTube
▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube
- ActivatedRoute contains route-specific information such as route parameters, global query params etc.
- Router is used to navigate from one component to another component.
Using Router
Step 1: Import Router
import { Router } from '@angular/router';
Step 2: Router Instance
constructor(private router: Router) {
}
Step 3: Using a Router navigate() Function
this.router.navigate(['/details', id]);
import { EmployeeDetailsComponent } from './../employee-details/employee-details.component';
import { Observable } from "rxjs";
import { EmployeeService } from "./../employee.service";
import { Employee } from "./../employee";
import { Component, OnInit } from "@angular/core";
import { Router } from '@angular/router';
@Component({
selector: "app-employee-list",
templateUrl: "./employee-list.component.html",
styleUrls: ["./employee-list.component.css"]
})
export class EmployeeListComponent implements OnInit {
employees: Observable<Employee[]>;
constructor(private employeeService: EmployeeService,
private router: Router) {}
ngOnInit() {
this.reloadData();
}
reloadData() {
this.employees = this.employeeService.getEmployeesList();
}
deleteEmployee(id: number) {
this.employeeService.deleteEmployee(id)
.subscribe(
data => {
console.log(data);
this.reloadData();
},
error => console.log(error));
}
employeeDetails(id: number){
this.router.navigate(['details', id]);
}
}
ActivatedRoute
Step 1. Import ActivatedRoute Service
import { ActivatedRoute } from '@angular/router';
Step 2: Inject ActivatedRoute Instance
constructor(private route: ActivatedRoute,private employeeService: EmployeeService) { }
Step 3: Routing with Parameters
{ path: 'details/:id', component: EmployeeDetailsComponent }
ngOnInit() {
this.employee = new Employee();
this.id = this.route.snapshot.params['id'];
this.employeeService.getEmployee(this.id)
.subscribe(data => {
console.log(data)
this.employee = data;
}, error => console.log(error));
}
this.id = this.route.snapshot.params['id'];
import { EmployeeService } from './../employee.service';
import { Employee } from './../employee';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
employee: Employee = new Employee();
submitted = false;
constructor(private employeeService: EmployeeService,
private router: Router) { }
ngOnInit() {
}
newEmployee(): void {
this.submitted = false;
this.employee = new Employee();
}
save() {
this.employeeService.createEmployee(this.employee)
.subscribe(data => console.log(data), error => console.log(error));
this.employee = new Employee();
this.gotoList();
}
onSubmit() {
this.submitted = true;
this.save();
}
gotoList() {
this.router.navigate(['/employees']);
}
}
Comments
Post a Comment
Leave Comment