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:
- Part 1 – Setting up the project (this one)
- Part 2 – Routing & Customisation
- Part 3 – Populate UI with Data
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:
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.
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
Open http://localhost:4200/ in the browser.
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.
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
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
This has now created a new folder located in /src/app/my-nav.
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>
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';
Generate Dashboard
1. Create material dashboard
Open the terminal in /src/app and run the command below to create a default dashboard component.
This will create a new component that can be found in /src/app/my-dashboard
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>
If you check the webpage now, you should see the empty cards, as below:
Next, in part 2 we will set up the routes and customize the user interface.