> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled-1/using-the-router-1.md).

# Using the Router

## **Changing Routes / Views**

Once all of the setup is done how do we actually change the route to get a different component view?  There are 2 different ways we can do this one that will use HTML's anchor tag, **\<a>** and the other that will use JavaScript, both have their uses.

#### prerequisites:

* [ ] a **router module** with routes
* [ ] router module imported into **app.module.ts**
* [ ] **\<router outlet>** selector in app.component.html

## RouterLink

The Router Link is used when we want to change the route when the user clicks on link or button. In the below code when a user clicks on a link the proper component is loaded where you placed the **\<router-outlet>\</router-outlet>**

{% hint style="info" %}
**Keypoint:** Router Link is used when changing the view on click.
{% endhint %}

{% tabs %}
{% tab title="app.component.html" %}
{% code title="" %}

```typescript
<ul class="nav navbar-nav">
  <li>
    <a routerLink="about">About</a>
  </li>
  <li>
    <a routerLink="l">Services</a>
  </li>
</ul>
```

{% endcode %}
{% endtab %}
{% endtabs %}

#### **Working Stackblitz Example**&#x20;

{% embed url="<https://stackblitz.com/edit/angular-routing-module?embed=1&file=src/app/app.component.html>" %}
Sample Router Link
{% endembed %}

## **Programmatic Router Navigation**

We can also navigate or change the view when something happens. For example, we get a successful login response or some other function is invoked we want to change the route.  We can use Router Class from angular to change the page. Maybe after 5 seconds a new page is loaded

{% hint style="info" %}
**Keypoint:** We can use the Router Class to change the route.
{% endhint %}

### Using the Router.navigate

{% tabs %}
{% tab title="Step One" %}
{% code title="some.component.ts" %}

```typescript
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class someComponent{
}
```

{% endcode %}

**Line 1:** Import the router into your component.  This will give you access to the methods on Router
{% endtab %}

{% tab title="Step Two" %}
{% code title="some.component.ts" %}

```typescript
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class someComponent{
  constructor( private router: Router ){}
}
```

{% endcode %}

**Line 4:** Add it to the component's constructor
{% endtab %}

{% tab title="Step Three" %}
{% code title="some.component.ts" %}

```typescript
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class someComponent{
  constructor( private router: Router ){}
  
  someFunction(){
     this.router.navigate([`/services`])
  }
}
```

{% endcode %}

**Line 12:** We can reference the router and use the navigate method to change to the **"services"** route.&#x20;
{% endtab %}
{% endtabs %}

#### &#x20;Working Stack Blitz Example&#x20;

{% embed url="<https://stackblitz.com/edit/angular-router-navigate?embed=1&file=src/app/services/services.component.html>" %}
Router.navigate Example
{% endembed %}

#### Key Point:

Navigating inside a function is very useful for cases when you need to change the view after something happens, like say login. We we wouldn't want a user to able to move into our app before we checked their email and password.

<br>