⚡Angular 17 Routing For Beginners | Routing in Angular 17| Angular 17 Routing| Angular 17 Tutorial

[Music] hello guys welcome to my YouTube channel if you are new to my Channel please subscribe to my channel like this video and press the Bell icon in this video I will show you how to do routing in angular 17 before proceeding I assume that you have a basic knowledge of angular I have already installed angular 17 if you want to know how to install angular 17 press the I button and watch the video open your terminal in vs code open command prompt do not use Windows Powershell else you will get an error now type the command and G serve to run the app now open your browser and type Local Host colon 4200 and you can see the angular 17 Page with new angular logo now let's see the directory structure of angular 17 the SRC folder is the main folder the app folder contains the components templates and styles for your application this is the CSS file for app component this is the HTML file for app component this is the test file for app component this is the typescript file for app component you can see that this component is a standalone component router Outlet is imported and added inside Imports array add title for app component this is app config typescript file this is the app. root. TS file we will add the roots inside this file this is index.html file you can see app Root selector where the content of the root component will be rendered in the HTML file this is main.ts file which is the main entry point for the application this is styles.css file which is a global stylesheet file we will create three components home about and contact click on this icon and select command prompt to open a new command prompt now type the command NG generate component home-- skip Das tests this command will create home. component. CSS home. component component. HTML and home. component.ts files inside app /home folder it will not create spec. TS test file you can see that home folder is created and home. component. CSS home. component. HTML and home. component.ts files are created in the home folder now type the command NG G space g space c space about space-- Skip Das tests here G is for Generate and C is for component this command will create about. component. CSS about. component. HTML and about. component.ts files inside app /ab folder it will not create spec. TS test file you can see that about folder is created in CSS HT HML and TS files are created in the about folder now type the command NG space g space c space contact space-- skip Das tests this command will create contact. component. CSS contact. component. HTML and contact. component.ts files inside app contact folder it will not create spec. TS test file open app. component. HTML file and delete all the default HTML here add app Home selector which will be used to display home component open home. component.ts file you can see that the selector name is app dhome open about. component.ts s file here the selector name is app dashabout here the selector name is app- contact now after app Home selector add app about selector and app contact selector here you can see app home is not a known element error to fix this open app. component.ts file and import home about and contact components and add them in the Imports array now you can see that the error is gone now open your browser and you will see that all the components have been rendered now let's add Tailwind CSS CDN in our app for styling open google.com and type tailin CSS CDN press enter open this link copy the script tag open index.html file paste the script tag here now let's add Tailwind CSS classes to check if the CDN is working or not now open your browser and you will see that Tailwind CSS classes have been applied to the text open app. roots. TS file to add the roots in curly braces type path in single quotes followed by a colon and a single quote then add a comma include component followed by a colon and the home component don't forget to import home component add a comma after the ending curly brace after the home route now add a route for about import about component now let's add contact route import contact component open app. component. HTML file and remove all the selectors now add router Outlet directive which acts as a placeholder that angular dynamically fills based on the current router State now open your browser and you will see that only the cont content of the home component is displayed as this is our home route now type local hoston 4200 about to open the about route now type Local Host colon 4200c Conta to open the contact route here you can see that only the content of the contact component is displayed it means routing is working now let's add some Tailwind CSS templates in our components in Google type tail blocks. CC scroll down select this template block and click on dark mode icon now click on yellow y color now click on view code and copy the code open home. component. HTML remove the paragraph and paste the code here now we will add template for about component scroll down select this template block now click on view code and copy the code open about. component. HTML remove the paragraph and paste the code here now we will add template for contact component select this template block now click on view code and copy the code open contact. component. HTML remove the paragraph and paste the code here now if you open the contact page you will see an error you need to use an HTML entity instead of the at symbol in the contact component copy this HTML entity open contact. component. HTML file and replace the symbol with the copied entity now you will see that the error has gone and contact form is displayed type Local Host colon 4200 about to go to the about page you can see that the template of the about page is displayed here now type Local Host colon 4200 to go to the homepage you can see that the template of the homepage is displayed here now we need to add a nav bar to navigate from one page to another in your terminal type the command NG space g space c space navb space-- skip Das tests this command will create navb bar. component. CSS navb bar. component. HTML and navb bar. component.ts files inside app /nb bar folder it will not create spec. TS test file select this template block now click on view code and copy the code in navb bar. component. HTML file remove the paragraph and paste the code now open app. component. HTML file and add the app navbar selector before router Outlet as we want to display the navbar on all pages you can see the error app navbar is not a known element to fix this error we need to import the navbar component in app. component.ts file in app. component.ts file remove the imported component's home component about component and contact component also remove these components from the Imports array now add nav bar comp component in the Imports array and import the component now if you try to open the links they will not open because we haven't added the router link directive to the navbar links open navb bar. component. HTML file remove the text and type home in second link type about here remove the text and type contact remove this code now in the tag of home link before the Class Type router link equals in double quote slash in the a tag of about link type router link equals in double quot slab in the a tag of contact link type router link equals in Double quot SL Conta now if you click on the links in the nav bar the pages will not open because we haven't imported the routerlink directive in the navb bar. component.ts file open navb bar. component.ts file add routerlink directive in the Imports array and import it now if you click on the nav bar links all the pages will open here all the pages are opening but we need to add an active link indicator so that when a particular page is opened a border will be displayed under the corresponding link open navb bar. component. CSS file and add. active class add border transform and transition property and their values in the active class now add routerlink active equals in double quotes active where routerlink active is an angular directive and active is the active class copy this code and paste inside all the links open navb bar. component.ts file add router link active directive in the Imports array and import it you can see that the active link is displaying under the link when we open a page but there is a small small issue the active link is displaying under both the home and about or contact links open angular website which is the new website for angular documentation click on the docs link now click on the routing link now open router reference click on active router links scroll down here you can see that active root links Cascade down through each level of the root tree so parent and child router links can be active at the same time to override this Behavior bind to the router link active options input binding with the exact colon true expression by using exact colon true a given router link is only active if its URL is an exact match to the current URL L open navbar do component. HTML file and bind the router link active options input binding with exact colon true expression to all the links following the router link active directive now if you open any link the active class board order will only be displayed under the link of the page that is currently open click on routing in single page applications link now click on identify the active route here you can see ARA current when active equals page ARA current when active is a input which sets the AR current to a specified value when the link becomes active Aria current when active makes sure that visually impaired users which may not perceive the different styling being applied can also identify the active button copy ARA current when active equals page add Aria current when active equals page to all the links after after router link active options you can see that all the links are functioning correctly here you can see that we are on homepage but the title is not changing if we go to the contact page the same title is displaying open app. root. TS file here we will add the title property after the path in all the roots in single quotes type title colon and in single quotes type the title of the page add a title proper proper Y and specify the title of each page in all the roots now you will see that when you go from one page to another the title of the page changes now if a user types a root that doesn't exist we need to display a 404 page not found page after Local Host colon 4200 type something randomly and you will see a blank page displayed with the Navar now let's create a page not found component in your terminal type the command NG G space g space c space page not found space-- skip Das tests this command will create page notf found. component. CSS pageot found. component. HTML and page not found. component.ts files inside app /page notfound folder it will not create spec. TS test file open page not found. component. HTML file and add this code which will display a 404 page not found text and a link to go back to home now open page not found. component.ts file and add routerlink and routerlink active directives in the Imports array then import them click on routing in single page applications link now click on adding a 404 page here you can see that we need to add double star in single quotes in the Path property the new route uses a path double Stars this path is how angular identifies a wild card route any route that does not match an existing route in your configuration will use this route the Wild Card route is placed at the end of the array the order of your roots is important as angular applies roots in order and uses the first match it finds now open app. roots. TS file and add the page not found root at the end of the array do not forget to import the page not found component now if you type a route that doesn't exist a 404 page not found page will be displayed click on the home link and you will go to the homepage now let's say you have a link or button on the homepage when the user clicks on this button they can go to another page open contact. component. HTML file and copy this code now open home. component. HTML file and paste the code before the closing section tag replace the button text with contact now add routerlink equal SL contact in double quotes open home. component.ts file add router link directive in the Imports array and import it now open homepage and click on the contact button and you will go to the contact page now let's proceed to implement the redirect click on common routing tasks now click on setting up redirects you can see that to set up a redirect configure a route with the path you want to redirect from the component you want to redirect to and a path match value that tells the router how to match the URL we need to add the redirect before the page not found Route here the third route is a redirect so that the router defaults to the first component route notice that this redirect precedes the Wild Card route now open app. roots. TS file in the home rout add home in single quotes to The Path property now after the contact route add a route that redirects the user to display the home component copy the this code paste the code here replace first component with home open page not found. component. HTML file type /home in the router link open navb bar. component. HTML file type /home in the router link click on the home link and you will now see the URL showing Local Host colon 4200 slome remove /home from the URL press enter and you will observe that it redirects to local hoston 4200 slome go to contact page and enter the URL Local Host 4200 and it will redirect to local hoston 4200 slome thanks for watching please like share and subscribe to my channel I will see you in next tutorial till then stay safe

Channel: Php Node Tuts

Views: 17,512

Keywords: angular, angular 17, angular routing, angular 17 routing, angular project, angular 17 project, routing in angular 17, angular 17 standalone, angular tutorial 17, angular 17 course, routing in angular, routing angular, what is routing in angular, routing in angular 16, angular 16 routing, dynamic routing in angular, angular routing on button click, how to do routing in angular, how to add routing in angular, what is angular routing

Id: lIb_gnleUns

Length: 31min 13sec (1873 seconds)

Published: Sun Dec 03 2023