how to navigate one route to another in angular 2

Question

I make a two different component of angular 2 .I am learning routing from this link https://angular.io/docs/ts/latest/tutorial/toh-pt5.html

I make two component .In first component I have one button I want to move to move to second component

here is my code https://plnkr.co/edit/GBOI9avZaPGaxaLQbtak

I define routes like that

    const routes =[
      {
        path: 'ft',
        component: First
      },
      {
        path: 'sd',
        component: Second
      }
    ]

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App,First ,Second]
})

I am using <router-outlet>

but I am not able to move one component to another

Milad · Accepted Answer · 2016-12-18 02:52:14Z

7

There you go :

@Component({
  selector: 'first',
  template: `
    <div>
      <button (click)="moveToSecond()">move to secon comp</button>
    </div>
  `,
})
export class First {
  name:string;
  constructor(private router:Router) {
  }

  moveToSecond(){
    this.router.navigate(['/sd']);
  }
}

https://plnkr.co/edit/wIuaffLskQd8GJuqLlY6?p=preview

You had heaps of errors :D

Anyway , in order to navigate to another route , you'd need to use router

answered Dec 18, 2016 at 2:52

Milad

28.8k11 gold badges78 silver badges91 bronze badges

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

Comments

Nate May · Accepted Answer · 2016-12-18 06:31:01Z

6

You can also navigate of the button itself without calling a component function

<button routerLink="/sd">move to secon comp</button>

answered Dec 18, 2016 at 6:31

Nate May

4,0717 gold badges40 silver badges92 bronze badges

Collectives™ on Stack Overflow

how to navigate one route to another in angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related