Angular 9 Tutorial For Beginners #37 - Child Routes

Angular 9 Tutorial For Beginners #37 - Child Routes, Angular Tutorials Child Routes, Angular Child Routes, Angular 9 Child Routes, Angular tutorial learn Routing Child Routes, angular 9 Child Routes tutorial, angular 9 Router Child Routes examples, Angular application folder structure and Angular boot process.

Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular introduction, angular version history, angular full tutorial series, best angular tutorial.

Install bootstrap angular tutorial, Learn how to install Bootstrap in Angular 9 app. In this course you will learn how to create small, medium, large applications with Angular 9 in this development tutorial.

Angular 9 Full Tutorial Playlist

[bhupendra]

Hi, The last part where we want to create a default value for products page can be done by adding default routing to products as below
{ path: 'products',
   children : [
    { path: '',  component: ProductsComponent},
     { path: 'view',  component: ProductViewComponent},
     { path: 'edit',  component: ProductEditComponent},
     { path: 'view/:id',  component: ProductIdComponent }
   ]
  },

[telugutv]

I am hitting like before starting the video. Thank you sridhar garu.

[saivenkat]

Please use in products.component.html file as well then child component works.
If your not using in product then it is not the child routing

[sreenuksr]

Angular 9 Tutorial For Beginners #37 - Child Routes

- we can configure any number of child routes to parent route
- child routes - the syntax will be same as defining the routes array
- using logical grouping (products -> product-edit, product-view, product-update, product-delete)

app-routing.module.ts

const routes: Routes = [
{path:'products',
children:[
{path:'productedit', component:ProductEditComponent},
{path:'productview', component:ProductViewComponent}

]
},

[anitathimothy]

Can we route from one module to another module

[kiranmoulimouli]

Sir what is that search keyword and where u define the button method updatesearch() plz explain it

[lkyug]

for last point we can do this { path:'', component:ProductsComponent },

[AdarshRaj-egcr]

Sir, when i set background image in angular through global css in the body tag, it takes full background, but when i apply it in app.component.html by taking div and using that id when i put background image inside that css it shows margins, its not taking full width.why this is happening and what is the correct way to set background image.please help

[vikhyatverma]

What if i want to Render child Routes on a different Page....
I mean i want to render child Route in primary router-outlet... Because i want to inherit the Header And Footer...
Couldn't find the Solution anywhere...

[monikamoni]

sir, i got this error 'can not bind to 'ngModel' since it is not a known property of input', what should i do? and tell me updatesearch () code also

[manikantayadav]

I was getting access denied error when changing id number in the url how to solve it plss tell me

[vikneshramesh]

@Abha Bhardwaj  I tried it...
But comming
If I add
{
Path :'products'
Component: productsComponents,
Children[
..
....
...
]

It doesn't show the search bar & button which is created in child components

Is there any way to view that ...
Hlp me pls😭

[themathsprodigy]

const routes: Routes = [
{ path: 'products',
component: ProductsComponent,
children:[
{ path: 'view', component: ProductViewComponent},
{ path: 'edit', component: ProductEditComponent},
{ path: 'view/:id', component: ProductIdComponent}

]
},
For me in the above code snippet, the URL "products/view" or "products/edit" always navigate to the Products page i.e . it navigates to the ProductsComponent instead of the ProductViewComponent or ProductEditComponent. I also verified the syntax from the official Angular.io site. The syntax is fine but it doesn't work.