ANGULAR 6 - BANNER PART 1

HOW TO: Build Angular 6 App – Part 1

In these series of articles, I will demonstrate step by step how to build a really simple Angular 6 web application, using Angular Material. This application will call a free API, called  DOG API. All this API does is return links to images of different dogs.  Our Angular 6 project will show those pictures in a list, similar to the way Instagram is showing posts in their app. It will also allow users to like/love a post.

Please be aware that this is a really simple app, put together in under two hours, just for fun. Do your own research before copying and using any of this code. There are lots of more efficient way of doing some of the stuff presented in this tutorial.

Content:

This project will be built using the new way of generating starter components, by generating the default navbar and dashboard.

Expected development time: 30 min – 1h

Dependencies:

Node version  8.x or greater 

NPM version 5.x or greater

Resources:

Top 3 free coding editors

Set up the project

Follow the quick start step by step instructions from angular’s website to set up the new project.

Once the Angular CLI  has been installed you can run this command: ng new random-dogs to create the new project code base.

Create new angular project
Create new angular project

Once the project has finished installing everything, open the terminal in the root directory of the project, in our case just do cd random-dogs or right click on the project folder and select ‘Open in Command Prompt’ or ‘Open in Terminal’.

Once you are in the root directory, run this the following command to serve your application and test that it works. This will start a local host on port 4200, where you should see the same output as the one from the picture below:

ng serve
Serve angular app
Serve angular app

Open http://localhost:4200/ in the browser.

Application served on localhost:4200
Application served on localhost:4200

Well done, you have successfully created the angular project.

Develop application

Generate Navbar

1. Delete contents of app.component.html file.

Open the app.component.html file, located under /src/app/app.component.html. Select all the content of that file and delete it. Save the file afterward.

Empty file contents
Empty file contents

If you check your RandomDogs website now, it will only display a blank page.

2. Add angular material to your project:

ng add @angular/material
Add angular material to project
Add angular material to the project

NOTE: if you get a warning saying that you have a certain number of vulnerabilities, run the command npm audit fix and this will solve the problem.

3. Generate default navbar.

Once the angular material package has been added to the project, we can run the following command to generate the default navigation bar.

ng generate @angular/material:material-nav --name=my-nav
Generate Angular Material Navbar
Generate Angular Material Navbar

This has now created a new folder located in /src/app/my-nav.

New Navbar location
New Navbar location

4. See navbar on the webpage.

In order to be able to see the navigation bar in the webpage, the following code needs to be added to app.component.html: 

<app-my-nav>

</app-my-nav>
”app-my-nav” it’s the component selector name and can be found in /src/app/my-nav/my-nav.component.ts LINE: 7
Save the file and check the webpage. You should see the navbar on the page, just as below:
Navbar no theme
Navbar no theme

As you can see, the navigation bar is there but everything is transparent, no theme has been added. Let’s add a theme:

Open the style.css file from the root directory and add the following line at the top and save the file.

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
Check all the prebuilt themes you can include at node_modules/@angular/material/prebuilt-themes
Once the theme has been imported, the navbar should look like below:
Navbar with theme included
Navbar with theme included

Generate Dashboard

1. Create material dashboard

Open the terminal in /src/app and run the command below to create a default dashboard component.

Create new material dashboard
Create new material dashboard

This will create a new component that can be found in /src/app/my-dashboard

New component created
New component created

2. Show dashboard on the webpage.

Open my-nav.component.html  and add the following element, just like the example in the picture below:

<app-my-dashboard></app-my-dashboard>
Add dashboard element
Add dashboard element

If you check the webpage now, you should see the empty cards, as below:

Navbar and Dashboard
Navbar and Dashboard

HOW TO: use Git to start a project and commit files

Next, in part 2 we will set up the routes and customize the user interface.

Part 2 – routing and customization

error

Leave a Reply

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