Angular – Routing and Customisation – Part 2

Content:

• Part 1 – Setting up the project
• Part 2 – Routing & Customisation (this one)
• Part 3 – Populate UI with Data

Routing

Read more about angular routing and navigation, here.

Make sure you read the docs and fully understand how routing works in Angular, it’s one of the most important topics when developing this kind of applications.

Let’s change Link 1 to First Page in the navbar. Whenever the link is clicked, it should take us to the dashboard page, therefore, the dashboard page should not be visible by default.

1. Add the route to /src/app/app.module.ts.

In /src/app/app.module.ts add the code below, above the @NgModule. Import MyDashboardComponent. 

const appRoutes: Routes = [

{ path: "first-page", component: MyDashboardComponent }

];

In your imports, add the following line:

RouterModule.forRoot(appRoutes),

2. Add route to /src/app/my-nav/my-nav.component.html

<a mat-list-item [routerLink]="['/first-page']">First Page</a>

<app-my-dashboard></app-my-dashboard>

<router-outlet></router-outlet>

Customise Web App

1. Small navbar changes.

At the moment, there’s something strange happening with our dashboard when you scroll down. As you have probably already noticed, when you scroll down, the dashboard cards go over the navigation bar, all the way up the page. Like below:

We can quickly solve this issue by adding a z-index to the mat-toolbar on line 12, in the nav html component. Like below:

Since we have already opened this file, we can change the name of the project to be upper case. Replace the text from line 16 (random-dogs) with Random Dogs. Save the file.

From line 13, remove the code below from the button element. This will enable the navbar to have the toggle button all the time. The user being able to hide or show the menu.

*ngIf="isHandset$ | async"

If you check your page in the browser now, the name of the project should be uppercase and the dashboard content shouldn’t scroll over the nav bar. Also, if you click the toggle button next to the name of the project, the menu will hide or show up.

2. Show dogs as posts.

2.1 Let’s create a service that will call the DOG API and give us back the data.

Learn more about Angular Services.

Open my-dashboard in the terminal and run the command below:

ng g service dogs

The command above just generated two new files in /src/app/my-dashboard. 

Open dogs.service.ts and create a function that will call the DOG API and get the data back.

First, update your constructor to look like the one below and construct the Http module:

constructor(private http: Http) {}

Copy the code below and paste it under the constructor.

getRandomPics():Observable<any> {

return this.http.get("https://dog.ceo/api/breeds/image/random/5", {});

}

You can open this link (https://dog.ceo/api/breeds/image/random/5) in your browser, to see how the output will look like. The code above is the function that calls the API and returns back the data.

Second, open your app.module.ts file and do the following two things:

1. Add HttpModule to your imports.
2. Add DogsService to your providers.

Your app.module.ts file should like the one from the picture below:

Third, open my-dashboard.component.html file and make sure it looks like the one from the picture below, by following the next steps:

1. Class should implement OnInit.
2. Initiate DogsService in the constructor.
3. ngOnInit function should call getRandomPics function every time the page loads.
4. Create getRandomPics function and console log the output.

How to solve – No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Once all the above steps have been done, you can inspect (CTRL + SHIFT + I or Right Click -> Inspect then click on Console) the console of the web page and see the output below:

If you see the output above its great news. Your application has just called the DOGS API and you get the data back correctly. It is time to populate the cards.

Next, in part 3 we will look into populating the cards with real data from the API.

Part 3 – populate cards with data