ANGULAR 6 - BANNER PART 2

Angular – Routing and Customisation – Part 2

Content:

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),
Add app routes
Add app routes

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

You need to update the first mat-list-item in the <mat-nav-list>. Repalce it with the code below:
<a mat-list-item [routerLink]="['/first-page']">First Page</a>
Set link in navbar
Set link in navbar
This is linking the dashboard component to this link: ‘/first-page‘ .

Next, replace the dashboard element from line 19:

<app-my-dashboard></app-my-dashboard>
with
<router-outlet></router-outlet>
Add router-outlet
Add router-outlet
From now on, when you navigate to the home page, http://localhost:4200/ in this case, it will not display the dashboard. When the first link is clicked (First Page) this will take us to the dashboard, or make it visible in our example. Check this works in the web browser.
No dashboard on home page.
No dashboard on home page.
Dashboard when link clicked
Dashboard when link clicked

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:

Content over navbar.
Content over navbar.

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:

Added z-index for navbar
Added z-index for navbar

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"
Enable menu to hide on any screen
Enable menu to hide on any screen

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
Generate new service called dogs
Generate new service called dogs

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

Service files location
Service files location

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.

dogs.service.ts file - first function
dogs.service.ts file – first function

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:

app.module.ts file - so far
app.module.ts file – so far

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

my-dashboard component - so far
my-dashboard component – so far
  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:

Output of function in console
The output of the function in console

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.