Skip to main content

Routing and navigation in Angular

Angular provides a complete routing library with the possibility to have multiple router outlets, different path matching strategies, easy access to route parameters and route guards to protect components from unauthorized access. The Angular router is a core part of the Angular platform.

 It's very easy to implement routing and navigation. So now I'm going to implement simple application for routing.

 When we create project it also create  app-routing.module.ts file. Then I created 2 components call DepartmentList and EmployeeList. So now what I want is when I Press the the Employee list button I want to move Employee List form and when press the Department list button  want to  move Department List form.

 First step

You must go to the app-routing.module.ts and you can see there is an array call routes. Then declare your components with name which you want appear on URL.  Don't remember import your component. And you must export your components.


 If you want to redirect to page not found page when user enter the invalid component in URL you can
use that commented code. (You should create page-not-found component)
Second step

Go to the app.module.ts and remove import EmployeeList and DepartmentList componet in the top. When you create the component by default it import the component. After remove you must import routingComponent what we export from before First Step.

Also remove DepartmentList and EmployeeList from @NGModule and add routingComponent on it.

Third step

Now we only have to call components. In Angular we use routerLink for that. And we must provide name when we give name in path creating . So I call components from app.component.ts.


Labels:

Comments

Post a Comment

Popular posts from this blog

Implement a Service From Angular (Http Observables and Rxjs)

What is a Service in Angular? Angular services are singleton objects which get instantiated only once during the lifetime of an application. They contain methods that maintain data throughout the life of an application, i.e. data does not get refreshed and is available all the time. The main objective of a service is to organize and share business logic, models, or data and functions with different components of an Angular application. What is Rxjs ? It is a Reactive Extensions for JavaScript. Also external library to work with Observables.  Implementation So now we are going to create a service using  Http Observables and Rxjs . Basically there are four main steps to do that. 1. Http get request from service. 2. Receive the observable and cast it into an array. 3. Subscribe to the observable component. Now I'm going to implement a service for fetching data from server to our web page.  First Step 1.1  Import HttpClientModule for...
Post a Comment
Read more

Solving Some Health Problems of Software Engineers

Hello guys hope you are stay safe. So I have some ideas about physical issues of software engineers face day today life. Clearly it’s about health problems. Positively our job is not whole life. It’s a part of our life. So we have to balance our life as well as job role. If we think about software engineering there are some things we must consider heavily. If we don’t consider them some day it will effect badly to us. In this duty time is more and more important. So I’m going to list down one by one some major threats. Problem : Bad Back Bad sitting and working postures can cause back and neck aches to occur. Constant sitting in one position is harmful, but unfortunately this is a necessary evil in our profession. Solutions Watch your posture while sitting. Keep an ergonomic environment Take breaks every hour or so and stretch. Don't let your body become stiff. Problem : Bad wrists If you're a knowledge worker, you likely spend hours upon hours scrolling...
Post a Comment
Read more