Feature 2

Feature 2: Integrate shopping cart template to the angular application

Feature 2 is all about designing the user interface. We will install bootstrap 4, jquery and font-awesome library to the angular application. We also download a template from the internet and integrate it with the angular application. Along the way, we will learn how to use google fonts with the angular application, how to fix common template errors while integrating with the angular application.

Description

Step 1: Install Bootstrap 4 on angular application

You can install bootstrap 4 using the node package manager and here is the command

npm install bootstrap

Step 2: Install jQuery 3 on angular application

You can install jQuery 3 using the node package manager and here is the command

npm install jquery

Step 3: Install font-awesome on angular application

You can install font-awesome using the node package manager and here is the command

npm install @fortawesome/fontawesome-free

Step 4: Integrate the shopping cart template with angular application

You can download the Bootstrap 4 Unstyled starter templates from https://startbootstrap.com You can install the shop homepage template using the node package manager and here is the command

npm install startbootstrap-shop-homepage

Step 5: Add search text box in the menu bar

<div class="row">
    <div class="col-md-8">
        <input type="text" class="form-control" placeholder="Search books">
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-primary">Search</button>
    </div>
</div>

Step 6: Update the database records

We need more database records to work with some of the advance features in angular. I have created some of the sql queries so let's download the starter files from the following link

Feature 2 Starter files

Once you download the starter files, extract it. Copy all the image folders to assets folder in angular application and then open the updated queries script file in MySQL workbench, execute all the queries.