therichpost.com
Open in
urlscan Pro
198.54.115.179
Public Scan
Submitted URL: http://therichpost.com/angular-8-dynamic-routing-working-example/
Effective URL: https://therichpost.com/angular-8-dynamic-routing-working-example/
Submission: On May 16 via manual from US — Scanned from DE
Effective URL: https://therichpost.com/angular-8-dynamic-routing-working-example/
Submission: On May 16 via manual from US — Scanned from DE
Form analysis 7 forms found in the DOM
GET https://therichpost.com/
<form method="get" class="searchform" action="https://therichpost.com/">
<div class="ruby-search">
<span class="search-input"><input type="text" placeholder="Search and hit enter…" value="" name="s" title="search for:"></span>
<span class="search-submit"><input type="submit" value=""><i class="icon-simple icon-magnifier"></i></span>
</div>
</form>GET https://therichpost.com/
<form method="get" class="searchform" action="https://therichpost.com/">
<div class="ruby-search">
<span class="search-input"><input type="text" placeholder="Search and hit enter…" value="" name="s" title="search for:"></span>
<span class="search-submit"><input type="submit" value=""><i class="icon-simple icon-magnifier"></i></span>
</div>
</form>GET https://therichpost.com/
<form class="search-form" method="get" action="https://therichpost.com/">
<fieldset>
<input id="ruby-search-input" type="text" class="field" name="s" value="" placeholder="Type to search…" autocomplete="off">
<button type="submit" value="" class="btn"><i class="icon-simple icon-magnifier" aria-hidden="true"></i></button>
</fieldset>
<div class="header-search-result"></div>
</form>POST https://therichpost.com/wp-comments-post.php
<form action="https://therichpost.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate="">
<p class="comment-form comment-form-comment"><label for="comment">Write your comment here</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="Write your comment here..."></textarea></p>
<p class="comment-form comment-form-author"><label for="author">Name</label><input id="author" name="author" type="text" placeholder="Name..." size="30" aria-required="true"></p>
<p class="comment-form comment-form-email"><label for="email">Email</label><input id="email" name="email" type="text" placeholder="Email..." aria-required="true"></p>
<p class="form-submit"><input name="submit" type="submit" id="comment-submit" class="clearfix" value="Post Comment"> <input type="hidden" name="comment_post_ID" value="6764" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="cb454c5990"></p>
<p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="1684208488397">
<script>
document.getElementById("ak_js_1").setAttribute("value", (new Date()).getTime());
</script>
</p>
</form>POST
<form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-3425 mc4wp-form-theme mc4wp-form-theme-dark" method="post" data-id="3425" data-name="Form">
<div class="mc4wp-form-fields">
<p>
<input type="email" name="EMAIL" placeholder="Your Email Address" required="">
</p>
<p>
<input type="submit" value="Subscribe">
</p>
</div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp"
value="1684208487"><input type="hidden" name="_mc4wp_form_id" value="3425"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1">
<div class="mc4wp-response"></div>
</form>GET https://therichpost.com
<form action="https://therichpost.com" method="get"><label class="screen-reader-text" for="cat">Categories</label><select name="cat" id="cat" class="postform">
<option value="-1">Select Category</option>
<option class="level-0" value="143">.Net Framework (20)</option>
<option class="level-0" value="367">ag-grid (12)</option>
<option class="level-0" value="56">Ajax (11)</option>
<option class="level-0" value="551">Angular (77)</option>
<option class="level-0" value="388">Angular 10 (140)</option>
<option class="level-0" value="418">Angular 11 (113)</option>
<option class="level-0" value="426">Angular 12 (126)</option>
<option class="level-0" value="469">Angular 13 (78)</option>
<option class="level-0" value="476">Angular 14 (81)</option>
<option class="level-0" value="554">Angular 15 (67)</option>
<option class="level-0" value="570">Angular 16 (4)</option>
<option class="level-0" value="280">Angular 7.2.4 (8)</option>
<option class="level-0" value="286">Angular 8 (118)</option>
<option class="level-0" value="315">Angular 9 (107)</option>
<option class="level-0" value="458">Angular Admin Templates (37)</option>
<option class="level-0" value="419">Angular Crud (11)</option>
<option class="level-0" value="423">Angular Ecommerce Templates (66)</option>
<option class="level-0" value="417">Angular Templates (108)</option>
<option class="level-0" value="84">Angular2 (10)</option>
<option class="level-0" value="225">Angular6 (36)</option>
<option class="level-0" value="273">Angular7 (64)</option>
<option class="level-0" value="80">Angularjs (9)</option>
<option class="level-0" value="127">Angularjs1 (2)</option>
<option class="level-0" value="99">Angularjs4 (4)</option>
<option class="level-0" value="454">Asp.NET Core (18)</option>
<option class="level-0" value="457">Asp.Net Core Admin Templates (7)</option>
<option class="level-0" value="456">Asp.Net Ecommerce Templates (8)</option>
<option class="level-0" value="305">AWS (2)</option>
<option class="level-0" value="166">Bitcoin (1)</option>
<option class="level-0" value="167">Blogging (2)</option>
<option class="level-0" value="86">Bootstrap (55)</option>
<option class="level-0" value="228">Bootstrap 4 (262)</option>
<option class="level-0" value="385">Bootstrap 4.5 (111)</option>
<option class="level-0" value="422">Bootstrap 5 (278)</option>
<option class="level-0" value="428">Bootstrap 5 Templates (62)</option>
<option class="level-0" value="112">Bootstrap Templates (33)</option>
<option class="level-0" value="468">BootstrapVue (2)</option>
<option class="level-0" value="465">Bootswatch (1)</option>
<option class="level-0" value="178">c# (1)</option>
<option class="level-0" value="108">Chartjs (19)</option>
<option class="level-0" value="308">chinese dor (1)</option>
<option class="level-0" value="82">Codeigniter (2)</option>
<option class="level-0" value="81">css (12)</option>
<option class="level-0" value="57">css3 (2)</option>
<option class="level-0" value="141">Datatable (65)</option>
<option class="level-0" value="165">Datepicker (3)</option>
<option class="level-0" value="466">Django (1)</option>
<option class="level-0" value="486">Docker (1)</option>
<option class="level-0" value="382">Dokanmultivendor (11)</option>
<option class="level-0" value="271">echarts (1)</option>
<option class="level-0" value="98">ExcelSheet (2)</option>
<option class="level-0" value="266">Express Js (8)</option>
<option class="level-0" value="306">Filezilla (1)</option>
<option class="level-0" value="394">Firebase (6)</option>
<option class="level-0" value="484">Flex Layout (1)</option>
<option class="level-0" value="109">FullCalendar (75)</option>
<option class="level-0" value="126">Git (2)</option>
<option class="level-0" value="128">Google Adsense (1)</option>
<option class="level-0" value="335">google charts (7)</option>
<option class="level-0" value="58">Google Map (11)</option>
<option class="level-0" value="5">Google Map Api (11)</option>
<option class="level-0" value="429">GraphQL (2)</option>
<option class="level-0" value="390">HighCharts (4)</option>
<option class="level-0" value="97">Home Remedies (1)</option>
<option class="level-0" value="196">htaccess (2)</option>
<option class="level-0" value="55">Html (28)</option>
<option class="level-0" value="169">Inheritance (1)</option>
<option class="level-0" value="413">Ionic 5 (9)</option>
<option class="level-0" value="478">Java (3)</option>
<option class="level-0" value="59">Javascript (104)</option>
<option class="level-0" value="51">Jquery (84)</option>
<option class="level-0" value="352">Jquery Isotope (1)</option>
<option class="level-0" value="111">JqueryUi (3)</option>
<option class="level-0" value="107">Json (2)</option>
<option class="level-0" value="516">Json Server (3)</option>
<option class="level-0" value="110">Juqeryui (1)</option>
<option class="level-0" value="106">Laravel (136)</option>
<option class="level-0" value="282">Laravel 5.8 (3)</option>
<option class="level-0" value="291">Laravel 6 (18)</option>
<option class="level-0" value="349">Laravel 7 (22)</option>
<option class="level-0" value="361">laravel 7.2 (9)</option>
<option class="level-0" value="412">Laravel 8 (72)</option>
<option class="level-0" value="472">Laravel 9 (4)</option>
<option class="level-0" value="460">Laravel Admin Templates (8)</option>
<option class="level-0" value="242">Laravl 5.7 (47)</option>
<option class="level-0" value="389">Learn Angular (6)</option>
<option class="level-0" value="565">Material-ui (3)</option>
<option class="level-0" value="227">MaterialAngular (52)</option>
<option class="level-0" value="85">Mom (1)</option>
<option class="level-0" value="275">Mongodb (2)</option>
<option class="level-0" value="251">Month Analytics Report (1)</option>
<option class="level-0" value="145">Music (1)</option>
<option class="level-0" value="337">Mxgraph (2)</option>
<option class="level-0" value="104">Mysql (76)</option>
<option class="level-0" value="415">Next.js (5)</option>
<option class="level-0" value="536">NGRX (2)</option>
<option class="level-0" value="364">ngx smart popover (1)</option>
<option class="level-0" value="78">Nodejs (34)</option>
<option class="level-0" value="77">npm (1)</option>
<option class="level-0" value="559">Nuxt (2)</option>
<option class="level-0" value="204">owl carousel (5)</option>
<option class="level-0" value="53">Payment Methods (2)</option>
<option class="level-0" value="177">Paypal (1)</option>
<option class="level-0" value="83">Paytm (1)</option>
<option class="level-0" value="105">PDO (8)</option>
<option class="level-0" value="235">Photography (1)</option>
<option class="level-0" value="75">Php (111)</option>
<option class="level-0" value="272">piechart (1)</option>
<option class="level-0" value="453">PostgreSQL (3)</option>
<option class="level-0" value="427">PrimeNG (11)</option>
<option class="level-0" value="451">Python (7)</option>
<option class="level-0" value="4">Quotes (4)</option>
<option class="level-0" value="459">React Admin Dashboards (7)</option>
<option class="level-0" value="444">React Native (2)</option>
<option class="level-0" value="195">React-props (1)</option>
<option class="level-0" value="194">Reactjs (268)</option>
<option class="level-0" value="411">Reactjs Crud (5)</option>
<option class="level-0" value="424">Reactjs Ecommerce Templates (29)</option>
<option class="level-0" value="416">Reactjs Templates (48)</option>
<option class="level-0" value="464">Reactjs Tutorial (8)</option>
<option class="level-0" value="462">Redux (2)</option>
<option class="level-0" value="76">Regular Expression (1)</option>
<option class="level-0" value="254">Rest Api (7)</option>
<option class="level-0" value="100">Rest Api Wp (3)</option>
<option class="level-0" value="540">Restaurant Websites Templates (1)</option>
<option class="level-0" value="397">rxjs (1)</option>
<option class="level-0" value="307">select2 (2)</option>
<option class="level-0" value="101">Seo (2)</option>
<option class="level-0" value="479">Spring Boot (4)</option>
<option class="level-0" value="74">Squarespace (1)</option>
<option class="level-0" value="179">Stories (6)</option>
<option class="level-0" value="269">Summernote (1)</option>
<option class="level-0" value="245">Sweetalert (5)</option>
<option class="level-0" value="369">swiperjs (1)</option>
<option class="level-0" value="450">Tailwind Css (16)</option>
<option class="level-0" value="16">Technology (11)</option>
<option class="level-0" value="555">Text Generators (1)</option>
<option class="level-0" value="284">Thrive Architect (2)</option>
<option class="level-0" value="342">tinymce (2)</option>
<option class="level-0" value="60">Tv Series (1)</option>
<option class="level-0" value="79">TypeScript (4)</option>
<option class="level-0" value="1">Uncategorized (2)</option>
<option class="level-0" value="175">Unit Testing (1)</option>
<option class="level-0" value="421">Vue Templates (33)</option>
<option class="level-0" value="420">Vue3 (116)</option>
<option class="level-0" value="103">VueJs (147)</option>
<option class="level-0" value="461">Vuejs Admin Templates (8)</option>
<option class="level-0" value="425">Vuejs Ecommerce Templates (22)</option>
<option class="level-0" value="563">web 3 (1)</option>
<option class="level-0" value="198">Woocommerce (43)</option>
<option class="level-0" value="6">Woocommerce Hooks (72)</option>
<option class="level-0" value="278">Wordpress (47)</option>
<option class="level-0" value="356">Wordpress 5.3.2 (2)</option>
<option class="level-0" value="283">Wordpress Cheat Codes (7)</option>
<option class="level-0" value="7">Wordpress Hooks (64)</option>
<option class="level-0" value="414">wordpress rest api (2)</option>
<option class="level-0" value="52">Wordpress Tricks (109)</option>
<option class="level-0" value="285">WP Plugins (1)</option>
<option class="level-0" value="290">Wp Tricks (17)</option>
<option class="level-0" value="140">xampp (2)</option>
</select>
</form>POST
<form id="mc4wp-form-2" class="mc4wp-form mc4wp-form-3425 mc4wp-form-theme mc4wp-form-theme-dark" method="post" data-id="3425" data-name="Form">
<div class="mc4wp-form-fields">
<p>
<input type="email" name="EMAIL" placeholder="Your Email Address" required="">
</p>
<p>
<input type="submit" value="Subscribe">
</p>
</div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off"></label><input type="hidden" name="_mc4wp_timestamp"
value="1684208487"><input type="hidden" name="_mc4wp_form_id" value="3425"><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-2">
<div class="mc4wp-response"></div>
</form>Text Content
Therichpost
* Home
* Angular
* Angular Templates
* Angular Crud
* Angular Learning
* Angular 15
* Angular 14
* Angular 13
* Angular 12
* Angular 11
* Angular 10
* Angular 9
* Angular 8
* Angular 7.2.4
* Angular7
* Angular6
* Angularjs4
* Angularjs1
* Angularjs
* Reactjs
* Reactjs Templates
* Reactjs Crud
* Reactjs Tutorials
* Vuejs
* Vue Templates
* Vue3
* Vuejs Tutorials
* Laravel
* Laravel 9
* Laravel 8
* Laravel 7
* Laravel 6
* Laravel
* Laravl 5.7
* Php
* WordPress
* Wp Plugin Dev
* WordPress Cheat Codes
* Wp tricks
* Thrive Architect
* Woocommerce Hooks
* WordPress Hooks
* Woocommerce
* WordPress Tricks
* Bootstrap 5
* Products&Tools
* Online Photo Editor
* Fake Json API’S
* About Me
* Contact & Advertise
RECENT POSTS
* Create Admin Dashboard in Angular 16 with Backend Data
* Dokan Multivendor Dashboard Adding Menu Submenu Items with Drop shipping
* Create your own Admin Dashboard Template with Angular 16 Html CSS
* Angular 16 Ecommerce Website Foot Store Free Download
* Angular 15 Ecommerce Website Foot Store Free Download
RECENT COMMENTS
* therichpost on How to make simple sidebar template with Bootstrap 5 and
Angular 13?
* Rodrigo on How to make simple sidebar template with Bootstrap 5 and Angular
13?
* hammami jamel on Angular 9 Datatable Binding with dtOptions
* therichpost on Vue 3 Bootstrap 5 Ecommerce Template Free Download
* loglinn05 on Vue 3 Bootstrap 5 Ecommerce Template Free Download
ARCHIVES
* May 2023
* April 2023
* March 2023
* February 2023
* January 2023
* December 2022
* November 2022
* October 2022
* September 2022
* August 2022
* July 2022
* June 2022
* May 2022
* April 2022
* March 2022
* February 2022
* January 2022
* December 2021
* November 2021
* October 2021
* September 2021
* August 2021
* July 2021
* June 2021
* May 2021
* April 2021
* March 2021
* February 2021
* January 2021
* December 2020
* November 2020
* October 2020
* September 2020
* August 2020
* July 2020
* June 2020
* May 2020
* April 2020
* March 2020
* February 2020
* January 2020
* December 2019
* November 2019
* October 2019
* September 2019
* August 2019
* July 2019
* June 2019
* May 2019
* April 2019
* March 2019
* February 2019
* January 2019
* December 2018
* November 2018
* October 2018
* September 2018
* August 2018
* July 2018
* June 2018
* May 2018
* April 2018
* March 2018
* February 2018
* January 2018
* December 2017
* November 2017
* March 2017
CATEGORIES
* .Net Framework
* ag-grid
* Ajax
* Angular
* Angular 10
* Angular 11
* Angular 12
* Angular 13
* Angular 14
* Angular 15
* Angular 16
* Angular 7.2.4
* Angular 8
* Angular 9
* Angular Admin Templates
* Angular Crud
* Angular Ecommerce Templates
* Angular Templates
* Angular2
* Angular6
* Angular7
* Angularjs
* Angularjs1
* Angularjs4
* Asp.NET Core
* Asp.Net Core Admin Templates
* Asp.Net Ecommerce Templates
* AWS
* Bitcoin
* Blogging
* Bootstrap
* Bootstrap 4
* Bootstrap 4.5
* Bootstrap 5
* Bootstrap 5 Templates
* Bootstrap Templates
* BootstrapVue
* Bootswatch
* c#
* Chartjs
* chinese dor
* Codeigniter
* css
* css3
* Datatable
* Datepicker
* Django
* Docker
* Dokanmultivendor
* echarts
* ExcelSheet
* Express Js
* Filezilla
* Firebase
* Flex Layout
* FullCalendar
* Git
* Google Adsense
* google charts
* Google Map
* Google Map Api
* GraphQL
* HighCharts
* Home Remedies
* htaccess
* Html
* Inheritance
* Ionic 5
* Java
* Javascript
* Jquery
* Jquery Isotope
* JqueryUi
* Json
* Json Server
* Juqeryui
* Laravel
* Laravel 5.8
* Laravel 6
* Laravel 7
* laravel 7.2
* Laravel 8
* Laravel 9
* Laravel Admin Templates
* Laravl 5.7
* Learn Angular
* Material-ui
* MaterialAngular
* Mom
* Mongodb
* Month Analytics Report
* Music
* Mxgraph
* Mysql
* Next.js
* NGRX
* ngx smart popover
* Nodejs
* npm
* Nuxt
* owl carousel
* Payment Methods
* Paypal
* Paytm
* PDO
* Photography
* Php
* piechart
* PostgreSQL
* PrimeNG
* Python
* Quotes
* React Admin Dashboards
* React Native
* React-props
* Reactjs
* Reactjs Crud
* Reactjs Ecommerce Templates
* Reactjs Templates
* Reactjs Tutorial
* Redux
* Regular Expression
* Rest Api
* Rest Api Wp
* Restaurant Websites Templates
* rxjs
* select2
* Seo
* Spring Boot
* Squarespace
* Stories
* Summernote
* Sweetalert
* swiperjs
* Tailwind Css
* Technology
* Text Generators
* Thrive Architect
* tinymce
* Tv Series
* TypeScript
* Uncategorized
* Unit Testing
* Vue Templates
* Vue3
* VueJs
* Vuejs Admin Templates
* Vuejs Ecommerce Templates
* web 3
* Woocommerce
* Woocommerce Hooks
* Wordpress
* Wordpress 5.3.2
* Wordpress Cheat Codes
* Wordpress Hooks
* wordpress rest api
* Wordpress Tricks
* WP Plugins
* Wp Tricks
* xampp
META
* Log in
* Entries feed
* Comments feed
* WordPress.org
Tuesday, May 16, 2023
+919814419350 therichposts@gmail.com
Therichpost
THE BEST TECH AND CODE MAGAZINE.
Therichpost
* Home
* Angular
* Angular Templates
* Angular Crud
* Angular Learning
* Angular 15
* Angular 14
* Angular 13
* Angular 12
* Angular 11
* Angular 10
* Angular 9
* Angular 8
* Angular 7.2.4
* Angular7
* Angular6
* Angularjs4
* Angularjs1
* Angularjs
* Reactjs
* Reactjs Templates
* Reactjs Crud
* Reactjs Tutorials
* Vuejs
* Vue Templates
* Vue3
* Vuejs Tutorials
* Laravel
* Laravel 9
* Laravel 8
* Laravel 7
* Laravel 6
* Laravel
* Laravl 5.7
* Php
* WordPress
* Wp Plugin Dev
* WordPress Cheat Codes
* Wp tricks
* Thrive Architect
* Woocommerce Hooks
* WordPress Hooks
* Woocommerce
* WordPress Tricks
* Bootstrap 5
* Products&Tools
* Online Photo Editor
* Fake Json API’S
* About Me
* Contact & Advertise
Angular 8Bootstrap 4
ANGULAR 8 DYNAMIC ROUTING WORKING EXAMPLE
therichpost3 years ago
posted on Nov. 30, 2019 at 5:21 pmNovember 30, 2019
Angular playing api data
16.6K
Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular
8 dynamic routing working example.
Black Friday Gift
In this post, I have made user component and in user component, I have many
users with with dynamic urls with ids and that urls bring us to users
information page.
--------------------------------------------------------------------------------
Here are the complete steps and please follow them carefully:
1. HERE ARE THE BASICS COMMANDS TO INSTALL ANGULAR 8 ON YOUR SYSTEM:
npm install -g @angular/cli
ng new angulardynamicid //Create new Angular Project
$ cd angulardynamicid // Go inside the Angular Project Folder
ng serve --open // Run and Open the Angular Project
http://localhost:4200/ // Working Angular Project Url
1. npm install -g @angular/cli
2.
3. ng new angulardynamicid //Create new Angular Project
4.
5. $ cd angulardynamicid // Go inside the Angular Project Folder
6.
7. ng serve --open // Run and Open the Angular Project
8.
9. http://localhost:4200/ // Working Angular Project Url
npm install -g @angular/cli
ng new angulardynamicid //Create new Angular Project
$ cd angulardynamicid // Go inside the Angular Project Folder
ng serve --open // Run and Open the Angular Project
http://localhost:4200/ // Working Angular Project Url
2. NOW YOU NEED TO RUN BELOW COMMANDS TO GENERATE COMPONENTS USERS AND
USERDETAILS:
ng g component users
ng g component userdetails
1. ng g component users
2.
3. ng g component userdetails
ng g component users
ng g component userdetails
3. NOW YOU NEED TO ADD BELOW CODE INTO YOUR SRC/APP/APP.MODULE.TS FILE:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule } from '@angular/router';
import { UserdetailsComponent } from './userdetails/userdetails.component';
const appRoutes: Routes = [
{ path: 'user', component: UsersComponent },
{ path: 'user-detail/:id', component: UserdetailsComponent },
];
@NgModule({
declarations: [
AppComponent,
UsersComponent,
UserdetailsComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
1. import { BrowserModule } from '@angular/platform-browser';
2. import { NgModule } from '@angular/core';
3.
4. import { AppComponent } from './app.component';
5. import { UsersComponent } from './users/users.component';
6.
7. import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
8. import { Routes, RouterModule } from '@angular/router';
9. import { UserdetailsComponent } from './userdetails/userdetails.component';
10.
11. const appRoutes: Routes = [
12. { path: 'user', component: UsersComponent },
13. { path: 'user-detail/:id', component: UserdetailsComponent },
14.
15.
16. ];
17. @NgModule({
18. declarations: [
19. AppComponent,
20. UsersComponent,
21. UserdetailsComponent
22. ],
23. imports: [
24. BrowserModule,
25. BrowserAnimationsModule,
26. RouterModule.forRoot(
27. appRoutes,
28. { enableTracing: true } // <-- debugging purposes only
29. )
30. ],
31. providers: [],
32. bootstrap: [AppComponent]
33. })
34. export class AppModule { }
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Routes, RouterModule } from '@angular/router';
import { UserdetailsComponent } from './userdetails/userdetails.component';
const appRoutes: Routes = [
{ path: 'user', component: UsersComponent },
{ path: 'user-detail/:id', component: UserdetailsComponent },
];
@NgModule({
declarations: [
AppComponent,
UsersComponent,
UserdetailsComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
4. NOW YOU NEED TO ADD BELOW CODE INTO SRC/APP/APP.COMPONENT.HTML FILE:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <div class="jumbotron text-center">
<h1>Angular 6 Routing Example</h1>
</div> -->
<nav class="navbar navbar-expand-sm bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" routerLink="/">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="/user">users</a></li>
</ul>
</nav>
<br>
<div class="container-fluid">
<h3><router-outlet></router-outlet></h3>
</div>
1. <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
2. <!-- <div class="jumbotron text-center">
3. <h1>Angular 6 Routing Example</h1>
4. </div> -->
5. <nav class="navbar navbar-expand-sm bg-light">
6. <ul class="nav nav-pills">
7. <li class="nav-item"><a class="nav-link" routerLink="/">Home</a></li>
8. <li class="nav-item"><a class="nav-link" routerLink="/user">users</a></li>
9. </ul>
10. </nav>
11. <br>
12.
13. <div class="container-fluid">
14. <h3><router-outlet></router-outlet></h3>
15. </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <div class="jumbotron text-center">
<h1>Angular 6 Routing Example</h1>
</div> -->
<nav class="navbar navbar-expand-sm bg-light">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" routerLink="/">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="/user">users</a></li>
</ul>
</nav>
<br>
<div class="container-fluid">
<h3><router-outlet></router-outlet></h3>
</div>
For bootstrap styling, I have directly added bootstrap cdn but we can add it
right also and for that you can follow this :- Add Bootstrap in Angular
5. NOW YOU NEED TO ADD BELOW CODE INTO SRC/APP/USERS/USERS.COMPONENT.HTML FILE:
<h1>Users</h1>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" routerLink="/user-detail/1">user1</a></li>
<li class="nav-item"><a class="nav-link" routerLink="/user-detail/2">user2</a></li>
</ul>
1. <h1>Users</h1>
2. <ul class="nav nav-pills">
3. <li class="nav-item"><a class="nav-link"
routerLink="/user-detail/1">user1</a></li>
4. <li class="nav-item"><a class="nav-link"
routerLink="/user-detail/2">user2</a></li>
5. </ul>
<h1>Users</h1>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" routerLink="/user-detail/1">user1</a></li>
<li class="nav-item"><a class="nav-link" routerLink="/user-detail/2">user2</a></li>
</ul>
6. NOW YOU NEED TO ADD BELOW CODE INTO
SRC/APP/USERDETAILS/USERDETAILS.COMPONENT.HTML FILE:
<h2> User No: {{id}}</h2>
1. <h2> User No: {{id}}</h2>
<h2> User No: {{id}}</h2>
7. NOW YOU NEED TO ADD BELOW CODE INTO
SRC/APP/USERDETAILS/USERDETAILS.COMPONENT.TS FILE:
import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'app-userdetails',
templateUrl: './userdetails.component.html',
styleUrls: ['./userdetails.component.css']
})
export class UserdetailsComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
public id: string;
ngOnInit() {
// Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
this.id = this.activatedRoute.snapshot.paramMap.get('id');
console.log(this.id);
}
}
1. import { Component, OnInit } from '@angular/core';
2. import {Router, ActivatedRoute, Params} from '@angular/router';
3. @Component({
4. selector: 'app-userdetails',
5. templateUrl: './userdetails.component.html',
6. styleUrls: ['./userdetails.component.css']
7. })
8. export class UserdetailsComponent implements OnInit {
9.
10. constructor(private activatedRoute: ActivatedRoute) {}
11. public id: string;
12. ngOnInit() {
13.
14. // Note: Below 'queryParams' can be replaced with 'params' depending on
your requirements
15. this.id = this.activatedRoute.snapshot.paramMap.get('id');
16. console.log(this.id);
17.
18.
19. }
20.
21. }
import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
@Component({
selector: 'app-userdetails',
templateUrl: './userdetails.component.html',
styleUrls: ['./userdetails.component.css']
})
export class UserdetailsComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
public id: string;
ngOnInit() {
// Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
this.id = this.activatedRoute.snapshot.paramMap.get('id');
console.log(this.id);
}
}
This is it and if you have any query related to this post then please do comment
below.
Jassa
Thank you
Share on FacebookShare on TwitterShare on PinterestShare on LinkedIn Share on
TumblrShare on RedditShare on VKontakte
therichpostNovember 30, 2019
previous article
ANGULAR 8 DATE INPUT BINDING DATE VALUE
next article
ANGULAR 8 BOOTSTRAP POPUP REGISTER FORM
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am
freelance full stack developer. I love coding. I know WordPress, Core php,
Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13,
Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify,
Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.
All posts bytherichpost
LEAVE A REPLY CANCEL REPLY
Write your comment here
Name
Email
Δ
This site uses Akismet to reduce spam. Learn how your comment data is processed.
YOU MIGHT ALSO LIKE
Angular 13Angular Ecommerce TemplatesBootstrapBootstrap 4
BUILD COMPLETE ECOMMERCE WEBSITE IN ANGULAR 13 – SINGLE PRODUCT PAGE
1 year ago
Angular 13Angular Ecommerce TemplatesBootstrapBootstrap 4
BUILD COMPLETE ECOMMERCE WEBSITE IN ANGULAR 13 – HOME PAGE
1 year ago
Angular 13Bootstrap 4
ANGULAR 13 STEP FORM WIZARD WORKING EXAMPLE
1 year ago
BootstrapBootstrap 4Vue3VueJsVuejs Ecommerce Templates
VUE 3 FREE ECOMMERCE TEMPLATE FULLY RESPONSIVE
1 year ago
Angular 13Angular Ecommerce TemplatesBootstrapBootstrap 4
ANGULAR 13 FREE ECOMMERCE SITE FULLY RESPONSIVE
1 year ago
BootstrapBootstrap 4ReactjsReactjs Ecommerce Templates
REACTJS FREE ECOMMERCE TEMPLATE FULLY RESPONSIVE
1 year ago
SUBSCRIBE NEWSLETTER
Leave this field empty if you're human:
Receive our editor's picks weekly
RECENT COMMENTS
* therichpost on How to make simple sidebar template with Bootstrap 5 and
Angular 13?
* Rodrigo on How to make simple sidebar template with Bootstrap 5 and Angular
13?
* hammami jamel on Angular 9 Datatable Binding with dtOptions
* therichpost on Vue 3 Bootstrap 5 Ecommerce Template Free Download
* loglinn05 on Vue 3 Bootstrap 5 Ecommerce Template Free Download
LATEST POSTS
AngularAngular 16Angular Admin TemplatesAngular TemplatesBootstrap 5Bootstrap 5
TemplatesBootstrap Templates
CREATE ADMIN DASHBOARD IN ANGULAR 16 WITH BACKEND DATA
1 day ago
308
read more
DOKAN MULTIVENDOR DASHBOARD ADDING MENU SUBMENU ITEMS WITH DROP SHIPPING
3 days ago
CREATE YOUR OWN ADMIN DASHBOARD TEMPLATE WITH ANGULAR 16 HTML CSS
7 days ago
ANGULAR 16 ECOMMERCE WEBSITE FOOT STORE FREE DOWNLOAD
1 week ago
RECOMMENDED FOR YOU
CATEGORIES
Categories Select Category .Net Framework (20) ag-grid (12) Ajax (11)
Angular (77) Angular 10 (140) Angular 11 (113) Angular 12 (126) Angular
13 (78) Angular 14 (81) Angular 15 (67) Angular 16 (4) Angular 7.2.4 (8)
Angular 8 (118) Angular 9 (107) Angular Admin Templates (37) Angular
Crud (11) Angular Ecommerce Templates (66) Angular Templates (108)
Angular2 (10) Angular6 (36) Angular7 (64) Angularjs (9) Angularjs1 (2)
Angularjs4 (4) Asp.NET Core (18) Asp.Net Core Admin Templates (7) Asp.Net
Ecommerce Templates (8) AWS (2) Bitcoin (1) Blogging (2) Bootstrap (55)
Bootstrap 4 (262) Bootstrap 4.5 (111) Bootstrap 5 (278) Bootstrap 5
Templates (62) Bootstrap Templates (33) BootstrapVue (2) Bootswatch (1)
c# (1) Chartjs (19) chinese dor (1) Codeigniter (2) css (12) css3 (2)
Datatable (65) Datepicker (3) Django (1) Docker (1) Dokanmultivendor (11)
echarts (1) ExcelSheet (2) Express Js (8) Filezilla (1) Firebase (6) Flex
Layout (1) FullCalendar (75) Git (2) Google Adsense (1) google charts (7)
Google Map (11) Google Map Api (11) GraphQL (2) HighCharts (4) Home
Remedies (1) htaccess (2) Html (28) Inheritance (1) Ionic 5 (9) Java (3)
Javascript (104) Jquery (84) Jquery Isotope (1) JqueryUi (3) Json (2) Json
Server (3) Juqeryui (1) Laravel (136) Laravel 5.8 (3) Laravel 6 (18)
Laravel 7 (22) laravel 7.2 (9) Laravel 8 (72) Laravel 9 (4) Laravel Admin
Templates (8) Laravl 5.7 (47) Learn Angular (6) Material-ui (3)
MaterialAngular (52) Mom (1) Mongodb (2) Month Analytics Report (1)
Music (1) Mxgraph (2) Mysql (76) Next.js (5) NGRX (2) ngx smart
popover (1) Nodejs (34) npm (1) Nuxt (2) owl carousel (5) Payment
Methods (2) Paypal (1) Paytm (1) PDO (8) Photography (1) Php (111)
piechart (1) PostgreSQL (3) PrimeNG (11) Python (7) Quotes (4) React Admin
Dashboards (7) React Native (2) React-props (1) Reactjs (268) Reactjs
Crud (5) Reactjs Ecommerce Templates (29) Reactjs Templates (48) Reactjs
Tutorial (8) Redux (2) Regular Expression (1) Rest Api (7) Rest Api Wp (3)
Restaurant Websites Templates (1) rxjs (1) select2 (2) Seo (2) Spring
Boot (4) Squarespace (1) Stories (6) Summernote (1) Sweetalert (5)
swiperjs (1) Tailwind Css (16) Technology (11) Text Generators (1) Thrive
Architect (2) tinymce (2) Tv Series (1) TypeScript (4) Uncategorized (2)
Unit Testing (1) Vue Templates (33) Vue3 (116) VueJs (147) Vuejs Admin
Templates (8) Vuejs Ecommerce Templates (22) web 3 (1) Woocommerce (43)
Woocommerce Hooks (72) Wordpress (47) Wordpress 5.3.2 (2) Wordpress Cheat
Codes (7) Wordpress Hooks (64) wordpress rest api (2) Wordpress Tricks (109)
WP Plugins (1) Wp Tricks (17) xampp (2)
ABOUT US
Angular 14 React WordPress Vuejs Angular free templates. Ecommerce free
templates downloads. Angular Free admin dashboards.
SUBSCRIBE NEWSLETTER
Leave this field empty if you're human:
FIND US ON SOCIALS