• Preparing the projectFirst, let’s create a minimal project scaffold using the following Angular CLI commands: – ng new medium-dynamic-routes –routing – cd medium-dynamic-routesNext, generate components for a Home and NotFound routes: – ng g component home –module=app – ng g component not-found –module=appThe “Home” component is going to be our landing…
• module.ts file and add the following entries to the “Routes” collection: – const routes: Routes = [ – { path: ”, component: HomeComponent }, – { path: ‘**’, component: NotFoundComponent } – ];I also suggest replacing the content of the main application template app.component.html with a list of links you…
• Let’s create two more components that are going to back our dynamic routes with the next commands: – ng g component page1 –module=app – ng g component page2 –module=appTo simplify the process of testing, we are going to generate the list of available links automatically.
• Next, update the component template to display a dynamic list at the bottom of the static one like in the example below: – ul – lia [routerLink]=”home”Home/a/li li *ngFor=”let link of links” – a [routerLink]=”link.path”{{ link.text }}/a – property of our interest is Router.config that holds information about known routes….
• Also, to display it on the main page we fill the “links” collection like in the next code snippet: – this.links.push( – { text: ‘page1’, path: ‘page1’ }, – { text: ‘page2’, path: ‘page2’ }, – );If you run the application now, there should be three links on the main…

@DenysVuika: Dynamic routes with #Angular router. An easy way to create routes based on conditions at runtime:

Dynamic Routes with AngularPhoto by Edouard Ki on UnsplashIn this article, I am going to show you an excellent Angular Router feature related to dynamic route population. It can be handy both for projects and unit testing.

Preparing the projectFirst, let’s create a minimal project scaffold using the following Angular CLI commands:

ng new medium-dynamic-routes –routing

cd medium-dynamic-routesNext, generate components for a Home and NotFound routes:

ng g component home –module=app

ng g component not-found –module=appThe “Home” component is going to be our landing page. We display “NotFound” component for all the missing content.

To set the initial set of routes, modify the app-routing.module.ts file and add the following entries to the “Routes” collection:

const routes: Routes = [

{ path: ”, component: HomeComponent },

{ path: ‘**’, component: NotFoundComponent }

];I also suggest replacing the content of the main application template app.component.html with a list of links you are going to test. For the moment it is only the “Home” link, but we are going to extend it shortly.

ul

lia you run the application now with the ng serve –open command, you should see the “home works!” label on the main page. That means the default route works as expected, and shows us the auto-generated by Angular CLI content.

By default, the application runs at the http://localhost:4200/ address. Try adding navigating to some “missing” address,…