Angular - Example 4 - Page Navigation Using Router(Call Component)

1. Create New Project Using Following Cmd - ng new PageNavigation - PageNavigation as Project Name

2. Open Visual Studio Code Application and open project.

3. Generate new component using cmd - 'ng g c PageList\Page1'

                                                              'ng g c PageList\Page2'

                                                              'ng g c PageList\Page3'

   g - generate 

   c - Component 

   PageList - New Folder Name

   Page1 - new Component Name

4. 4 new files are created for each new component - .html, .spec.ts, .ts, .css

5. After Creating New Component automatically changed in 'app.module.ts' file.

6. Open the file 'app-routing.module.ts' and changed code in the file - like below image

7. Open the file 'app.component.html' and changed code in the file - like below image

8. Open the file 'app.component.ts' and changed code in the file - like below image

9. And to complie and run this project -- ng serve --o

Output

A. If Page is empty

B. After click link button Redirect Page2 

C. After click button Redirect Page3