Rent Management App in Angular — Part 1

In this series, we will develop a rent management web application in Angular. I am assuming you have some basic knowledge of javascript as I won’t be talking about everything in detail. We will start from scratch and add more features as we go along; we will also re-do some of the things to keep the application more mature and robust. Let’s begin!

Installation

Make sure you have the latest versions of NPM and Angular CLI installed.

Project Setup

• Run ng new rent-keeper in the terminal/console. This will generate a new Angular project.
• cd rent-keeper and run ng serve -o. Your default browser should open up on localhost:4200 serving the default Angular application. This means all is good for now.
• Ctrl+C and then let's install some things we will need.
• npm install --save font-awesome to install Font Awesome. We will get to use some cool icons using this.
• npm install --save materialize-css to install Materialize CSS for a beautiful material design front-end.

Now that we have all the things in place, let’s proceed.

In Angular, an app is made out of modules and components. For simplicity, you can think of app being made up of modules and modules being made up of several components. There are some modules provided by Angular which can be used for various purposes like calling http services, routing etc.

It is good practice to break the app in various re-usable components.

For starters, let’s make a component that will show us the rent list and be able to take basic inputs ng g c components/rent-list. This will create a new folder called components inside app folder and create a new component rent-list in it. It will have 4 files:

• CSS file: holds CSS for this component
• HTML file: holds HTML for this component
• spec.ts: tests
• .ts: holds all the logic that we define for this component

Similarly, if you look in the app folder, there are app specific files as well. app.component.html will have the global, common HTML code for our app. Remember, Angular is just a single page application by design, whatever logic we write will just be loaded up in the app. We also have CSS and TS files as descibed above.

Apart from this there is also app.module.ts. Now this is the default module of our app. We can have as many modules as needed to make up the app, but using one is just fine too. This file acts as the main point of our app that contains other modules that we have imported, routes, component names of our app.

If you see the file, under @NgModules there are some weird looking arrays.

• declarations: list of all components in our app (it is essential that these are mentioned here and imported in app.module.ts above as well. See how the rent-list has magically shown up here? This is because we added it using the CLI, Angular spared us the pain of adding it manually.
• imports: list of all the modules imported
• providers: list of the services that we use in the app (we'll talk more about it later)
• bootstrap: starting point of our app

First blood

We need a navbar, copy the navbar code from Materialize and paste in app.component.html(delete everything else). Add another container div to hold our app's HTML.

app.component.html

See how we have written app-root? What is this?

Go to app.component.ts and you will see a @Component decorator.

• selector: defines the HTML tag that will be used to display this component. Here is it app-root so the tags by this name will render this component
• templateUrl: defines path to HTML file for this component
• styleUrls: array of paths to CSS files for this component

Cool, this should work. ng serve -o to see it! Uh Oh... seems like something is off, the navbar styles doesn't show up. Why is this?

Remember we added font-awesome and materialize-css before. But how is Angular using them? Or is it even using them yet? No, it isn’t. We need a way to do that.

Go to angular.json file. Here you will see a plethora of configurations and metadata for our app. Find the styles array (should be on line 25), it should already have src.styles.css as one entry. This is the path of global styles file in case you want some styles to be applicable throughout the app. Now modify to look like:

"styles": [ "src/styles.css", "node_modules/font-awesome/css/font-awesome.min.css", "node_modules/materialize-css/dist/css/materialize.min.css" ]

Now, Angular should be able to use these styles. Similarly, there is a scripts array just below to mention any external scripts. Modify it as follows:

"scripts": [ "node_modules/materialize-css/dist/js/materialize.min.js" ]

Great, now serve the application again and you should see the navbar as expected! We will continue with more work in the next part and see how we can modify our component.

Next part

😄