I have divided my landing page into small components and now I want to show all of my components on landing page and also display some of the components on different pages/routes. I tried adding it with the routes as childeren but it doesnt work with me. Can anyone help me with this?

const routes: Routes = [  
      {path:'', component:BannerComponent, children:[    
       {path:'',component:VideoComponent}]},   
      {path:'home', component:AboutComponent}
 ];

I want to create a main url directory where some of my components should show and when the user enter another path it should show only those components that are added for that path.

CodePudding user response：

Angular offers you a simple way to do this.

When creating a component, it gives you this:

@Component({
  selector: 'ab-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})

As we can see there is a selector called 'ab-header'.

Just go to the html and paste it in a tag like this.

<ab-header></ab-header>

Hope this helps you

CodePudding user response：

I have followed these steps.

1. First Create a new component ng g c homePage

2. add the desired components in the homePage.component.html

3. Inlude it in the routes

   const routes: Routes = [ {path:'', component:HomePageComponent} ];