Angular 4 Tutorial: Routing and Navigation Example

Angular 4 Routing and Navigation Example

In Angular 2 and Angular 4 you can navigation between pages without the need of reloading the whole page.

Angular 4 Router

By using Angular router you can move from one page to another without reloading the whole page.

Angular 4 Router Example

In the following example i will create a page with two links, each link will change the content of the page without going to a different url.

I started by creating a new Angular 4 project, in Angular 4 structure there is a main component which i will add the links to it 'ex.: about and news' links.

Create Pages Components

Now i will start by creating 2 components, one for the about page and the other

Please check the rest of the written Angular 4 Routing tutorial:

If you want to know how to Install Angular 4 or check my first Angular 4 Tutorial please check Angular 4 QuickStart - Part 1:

Angular 4 Structure:

How to Create a Component in Angular 4 :

Angular 4 Simple Binding:

Angular 4 Components Properties, Arrays and Objects :

Angular 4 Directives (ngFor, ngif , ngClass, ngStyle )

Angular 4 Pipes Tutorials with Examples:

[anisfathima]

Thank you so much. Now I am clear about routing in angular..

[jeffreysevinga]

Thanks man! Just straight forward basic example, what i was looking for for hours :P
Subscribed ;)

[amalk]

thank u that's so much useful for a beginner like me

[Prakashpujar]

Thanks buddy..! it's working fine and it's so easy method.:)

[Juznik]

Very good video! What about sub-navigations? How do you structure them?

[vivekgopalakrishnan]

if i divide my homepage in to 3 components like -header, content and footer .... and call them in the app.component.html
like <app-header></app-header>
<app-content> and so on
how could i use this method to route?

[Jet]

Not really the most clean way to do it but good job :)

[outlawzgamingclan]

Rubbish... just loads the new component on top of you app.component. Might try to suggest how to navigate from page to page instead.