Changing the blog URL from id to title (Contentful & Angular5)

Question

I am creating an app using Contentful and Angular 5. It is all working fine, however the url when clicking on a blog uses /blog/id where as I need it to say /blog/title or /blog/urlslug. here it what it looks like:

http://localhost:4200/blog/Q4YkPptlwAQ0wCIo4oAcI

The routing was done as follows:

  getOneBlog(blogID): Promise<Entry<any>>{
    return this.client.getEntries(Object.assign({
      content_type: 'blog'
    }, {'sys.id': blogID}))
    .then(res => res.items[0]);
  }

  goToBlogDetailsPage(blogId) {

    this.router.navigate(['/blog', blogId]);
  }

and :

  {path: 'blog/:id', component: BlogDetailsPageComponent}

has anyone dealt with this before? I have added a url slug to my content model within contentful, however I do not know how to access the url slug within one of these functions.

Answer 1

You could Location from @angular/common to change the url with a style value.

For example in your component, once the blog article is loaded, you could add the title after the id like this :

this._location.go(this.blogTitle);

You would have a url like http://localhost:4200/blog/Q4YkPptlwAQ0wCIo4oAcI/someBlogTitle.

Here is an stackblitz example for location.