CODEWITHSUNDEEP
angularangular-routing
ganesh ughade
ganesh ughade

Reputation: 11

How to create dynamic routes (URL Strings) in angular?

I have a parent componet <app-parent> and in this parent compoent there are few buttons each button will open a new floating panel on top of current parent and in each floating panel there are same buttons which will open the floating panel again on the top of the current floating panel (Stacking of panels) I want each floating panel will have a separate URL, How i will do that?

Upvotes: 1

Views: 250

Answers (1)

Roger
Roger

Reputation: 597

At the start of the project angular asks you if you want to have a routing module. If you agree, it will be created in your app folder. However, if for some reason you did not, then you can still generate it via this cli command: ng generate module app-routing --flat --module=app

This will give you a file similar to this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductAddComponent } from './product-add/product-add.component';
import { ProductGetComponent } from './product-get/product-get.component';
import { ProductEditComponent } from './product-edit/product-edit.component';

// here you can configure routes
const routes: Routes = [
  {
    path: 'product/create',
    component: ProductAddComponent
  },
  {
    path: 'products',
    component: ProductGetComponent
  },
  {
    path: 'edit/:id',
    component: ProductEditComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Just don't forget to reference it in your app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 1

Related Questions