title: How to change the parameter of activated Route on button click
body: <p>Basically, I have two component <code>TodosComponent</code> and <code>TodoDetailsComponent</code>. Clicking on an item in <code>TodosComponent</code> takes me to the <code>TodoDetailsComponent</code> where I grab the parameter and fetch the required data from the API. All is working great.</p>
  <p>But I want to make a next button on my <code>TodoDetailsComponent</code> so that the id passed to the parameter changes and I get the desired result based on the parameter as subscribed to the activatedRoute params. I google(d) and stackoverflow(ed) a lot but unable to find an example which give me direction to carry on. <a href="https://stackblitz.com/edit/angular-xu6btm?file=src%2Fapp%2Ftodo.details.component.ts" rel="nofollow noreferrer">Here</a> is the working demo of the issue. Let me know if required more information. Any information will be helpful that whether is it possible or not.</p>
  <p>TodoDetails.component.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Component({
    template: `&lt;p&gt;Todo Details Component&lt;/p&gt;
      &lt;div&gt;{{ todo | json }}&lt;/div&gt;
      &lt;button type="button" (click)="next()"&gt;Next&lt;/button&gt;
    `
  })
  
  export class TodoDetailsComponent implements OnInit{
    todo;
    constructor(private activatedRoute: ActivatedRoute, private service: Service) { }
  
    ngOnInit() { 
      this.activatedRoute.paramMap.pipe(
        switchMap(params =&gt; this.getTodo(+params.get('id')))
      ).subscribe(todo =&gt; this.todo = todo);
    }
  
    getTodo(id) {
      return this.service.getTodo(id);
    }
  
    next() {
      // if i grab the id over here and increment 
      // by id++ the id increases but as can be seen 
      // parameter is still the same, so won't work
    }</code></pre>
  </div>
  </div>
  </p>