by Sai gowtham

Angular router redirection and 404 pages

In this tutorial, we are going to learn about how to redirect a user from one page to another page and how to handle not found pages.

Redirection

Redirection is a technique to move a user to a different page instead of the page they requested because the page they are asking is currently not available in the site.

Example:

Open your appRoutes array.

app.module.ts
const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  {path: 'contact-us', redirectTo: 'contact'}];

In the above code, we have added redirectTo property with value contact to contact-us route.

It means if any user tries to navigate contact-us path they have been redirected to the contact path.

If you try to redirect user whenever he or she clicks on a login button or form submission for that you can check out navigate method example

Notfound pages

Notfound pages help us to match the invalid paths which are not present on our website. if anyone tries to navigate that invalid path we are showing them a not found page instead of a blank page so that they can understand they are not in the correct path.

Open your terminal and run following command.

ng g c notfound

This above command will generate a notfound component.

Now we need to update our appRoutes array.

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'contact-us', redirectTo: 'contact' },
  { path: '**', component: NotfoundComponent }];

Here we have added a path ** it means it matches all invalid paths in our app and show them a NotfoundComponent we just created.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2022 (Beginner + Advanced)
JavaScript - The Complete Guide 2022 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY