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

Building a RESTful CRUD API with Node.js, Express, MongoDB

Used Libraries Express Validator Mongoose _____________Just 3 Steps________________ Step 1 Initialize the project npm init -y npm install --save-dev nodemon npm install express mongoose npm install validator Now go to the package.json and modifiy the scripts property like this. Then create folder call utils and create a file call db.js inside it. Here is my project structure. If  you haven't any idea to get MongoDB Connection String please refer first part from  here. Follow these set of code for RESTful API crud operations.    Step 2     db.js const mongoose = require('mongoose'); const validator = require('validator'); const url = 'MongoDB Connection String'; mongoose.connect(url,{useUnifiedTopology:true,useNewUrlParser:true}); const Schema = mongoose.Schema; const userSchema = new Schema({     name : {         type : String,         require : true, ...
3 comments
Read more

What is Angular?

What is Angular? Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google. Angular is a complete rewrite from the same team that built AngularJS. For now it's stable release is 8.2.14. What is the difference between Angular and AngularJs? Basically Angular is based on TypeScript. AngularJs  is based on JavaScript. What is TypeScript? TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript is designed for development of large applications and transcompiles to JavaScript. What is JavaScript? JavaScript, often abbreviated as JS, is a high-level, just-in-time compiled, multi-paradigm programming language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions. Why we need...
4 comments
Read more