angular 2 route param into data

Question

I have a simple route with 1 parameter:

{
    path: 'item/:id',
    component: ItemComponent,
    data: {title: 'Item detail'}
}

I'm setting page title using data title property in main AppComponent:

export class AppComponent implements OnInit {
    title: string;

    ngOnInit() {
         this.router.events
         .. parse it
         .subscribe((event) => {
                this.title = event['title'];
         });
    }
}

Then I'm just displaying it in AppComponent template:

<h1>{{ title }}</h1>

The problem is if I want to have dynamic title like "Item detail #name(:id)". Is there any way how can I add e.g. route param (:id) or variable into data title property? Something like

{
    path: 'item/:id',
    component: ItemComponent,
    data: {title: 'Item detail #' + :id }
}

I don't think so. But you can keep the data.title param as a "blueprint" and do a search/replace from within the component. — AngularChef
– AngularChef, Commented Feb 15, 2017 at 9:55
Yup. I posted an answer with some code. Any specific reason why you're using router.events to extract the route data/params? (instead of just route.data and route.params) — AngularChef
– AngularChef, Commented Feb 15, 2017 at 10:39
Sure, but in your case you don't want to watch ALL router events, you just want to extract specific route properties and these properties are directly available on ActivatedRoute(.snapshot). — AngularChef
– AngularChef, Commented Feb 15, 2017 at 10:41

AngularChef · Accepted Answer · 2017-02-15 10:37:56Z

4

Like I said in the comments, you could keep the data.title param as a blueprint and replace the dynamic part from within the component.

Route declaration:

{
  path: 'item/:id',
  component: ItemComponent,
  data: { title: 'Item detail [id]' }
}

In data.title, I wrote [id] to make replacement easier but feel free to use whatever symbols you'd like to delimitate the string to replace.

Then, in the component:

export class AppComponent {
  title: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const titlePattern = this.route.snapshot.data['title'];
    const id = this.route.snapshot.params['id'];
    this.title = titlePattern.replace('[id]', id);
  }
}

answered Feb 15, 2017 at 10:37

AngularChef

14.1k9 gold badges55 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dontHaveName Over a year ago

Yeah, but it would not make any sense replacing it inside AppComponent because there might be xx routes with same pattern. Would be better if I change it inside each FeatureComponent so I decided to create a service for it.

Collectives™ on Stack Overflow

angular 2 route param into data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related