how to navigate one page to another in Agular

saDpooro 0
Viewed 37

I have an Angular project and I want to go to the registration page when I click the registration button. I tried to link the registration page, but it didn't work, I'm a beginner, that is, when I click on registration, I want the main page to disappear and go to the navigation page. This is a main page and my navigation menu

and this is my registration page

this is my navigation menu code

   <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand white-color" href="#">Sarabanda</a>
      </div>
      <div>
        <ul class="d-flex column">
          <li class="rem"><a class="color" href="#">Job offers</a></li>
          <li class="rem">
            <a class="color" href="#">Curriculum Vitae</a>
          </li>

          <li class="rem"><a class="color" href="#">Post a job</a></li>
          <span class="line rem"></span>
          <li class="login-border rem">
            <a href="#" class="bold login">Login</a>
          </li>

          <li>
            <a href="/src/app/registration/registration.component.html" class="bold rem">Register</a>
          </li>
          <div>
  </div>
registration routes navigation typescript angular
3 Answers

Please try using the pre-exist property routerLink on anchor in Angular.

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

Reference Link - https://angular.io/api/router/RouterLink#description
pr_veen0

Angular does the routing for you. You just simple need to tell it how. This is the basic routing described here:

https://angular.io/guide/router#defining-a-basic-route

The steps you need to do:

  1. If you dont have AppRoutingModule, create one, with CLI command: "ng new routing-app --routing --defaults", then import it into AppModule.

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

       imports: [    
            AppRoutingModule
          ],

  1. Import RouterModule and Routes into your routing module.

    import { Routes, RouterModule } from '@angular/router';        
const routes: Routes = [];

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

  2. Define your routes in app-routing.module.ts

const routes: Routes = [{ path: 'registration-component', component: RegistrationComponent }];

  1. Use your route as:

    <a routerLink="/registration-component" class="bold rem">Register</a>

szabolcs varga0

add path and componentname liken this

after yout component.ts File Import Router from @angular core

this.router.navigate(['pathname'])

codewithharshad0
Related