Learn Angular Step by Step – Session 5 : Lets start a Demo app

In this session we will be creating a new sample application from the previous knowledge where we can continue it to the next sessions as well. In the latter we will be giving an introduction to directives.
So as the first thing we will make a new app. Here I have decided to go with a application with following requirements.

This is going to be a small library application. Lets say you have a cupboard of books and you want keep track of those books. Further you want search a book by its name or author and add books to the system with the details of it. Also your friends will borrow books from you. So you want to keep track of them as well. Let’s develop this system as in this series step by step. I will further add them to the git repository then you can get the complete project if you need some extra lookup.

With the knowledge you got from past sessions you can create a project and generate components. There will be a header and footer for the site with some styling.

As the firsts step Lets create angular application from below command.

ng new LibApp

This will create a new application and install dependencies. After creating the app lets open it with vscode and run the application using “ng serve”.

Now the default application will run and we need to modify it as per our requirement.Since we want to use nice header and footer for our application lets create header and footer components using ng g c lib-header and ng g c lib-footer. Then I am deleting the content inside the app.component.ts file and add header and footer. At this point you know that we have to use the component’s selector as a html tag to import that component. So app.component.ts files looks like below after modifying it.

and web page looks like this.

Lets add bootstrap css to make our styling easier and clearer. To add bootstrap I am running the script npm install bootstrap . Then I need to import the css to the application. For that I am opening the angular.json file and import the style in the style section as below. “node_modules/bootstrap/dist/css/bootstrap.min.css”

If you open the browser you will see the fonts and some styling as been changed in our application. Then I will edit lib-header.component.html file and lib-footer.component.ts file to show header and footer. This is the header component.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
    aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  <a class="navbar-brand" href="#">Lib APp</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    <div class="form-inline my-2 my-lg-0">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#"> Log In</a>
        <li class="nav-item">
          <a class="nav-link" href="#"> Sign Up</a>

And this is the the footer components. Though it is good to use classes for styling I am using inline style here to make it clear.

<footer style="background-color: black; color:white; text-align:center; width:100%; bottom:0; position:absolute">

After these modifications our site will have header and footer as below.

Now we have initiate the project structure with the knowledge from previous lessons. We will continue building this application in the up coming tutorials while learning the theory as well. In the next session we will be learning about angular directives. You can use comment section to convey your messages and ask questions as always. Let’s meet again in the next session.

Comment here