Angular Ecommerce template — Hands-on

You’ll learn how to create Angular modules from an HTML template

If you’re new in Angular, you may need to learn how to create a front-end website from scratch extracting the template from HTML files, Figma, Sketch or other tools.

Photo by Joshua Fuller on Unsplash

In this post, we’re going to get an HTML template from a blog I found on the internet. Note: the time I created this article, I was allowed to use its content.

Source: Angular 11 Bootstrap 4.5 Ecommerce Template Free.

Let’s get started with creating our Angular app

Create a new angular app using thenpx command:

npx @angular/cli new ng-commerce-app

The CLI command line will ask you some questions about the new project you want to build. Answers it as below:

Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? (y/N) N

Would you like to add Angular routing? (y/N) N

Which stylesheet format would you like to use? Less [ http://lesscss.org

Now let’s wait until the Angular CLI finishes it:

CREATE ng-commerce-app/e2e/src/app.e2e-spec.ts (666 bytes)
CREATE ng-commerce-app/e2e/src/app.po.ts (274 bytes)
⠧ Installing packages (npm)…

I’m writing an article explaining the Angular projects structure. Stay tuned for it.

If you go to The Rich Post blog, you’ll get a zip file with the following files structure:

e-shop.zip file

Now let’s use into our Angular application only what we need, the images and CSS folders, because we’re going to use Font Awesome official plugin for Angular. You can check it out here: Fontawesome with Angular.

For now, our app structure looks like this one:

Angular project structure
Photo by mahdis mousavi on Unsplash

The link that I provided says:

Compatibility Heads Up!

If you are using Angular, you need the angular-fontawesome package or Web Fonts with CSS.

So let’s install it using the Angular CLI reference provided by package.json :

npm run ng -- add @fortawesome/angular-fontawesome> ng-commerce-app@0.0.0 ng /home/user/angular-apps/ng-commerce-app
> ng "add @fortawesome/angular-fontawesome"

It will prompt you to choose which options do you want to install, let’s choose the free ones. (To navigate between them, use the arrows up and down, then press SPACE to select one or more), then press ENTER to confirm.

Installed packages for tooling via npm.
? Choose Font Awesome icon packages you would like to use:
◉ Free Solid Icons
◉ Free Regular Icons
❯◉ Free Brands Icons

Now you have it installed in your Angular app and automatically imported in the app module. See it below:

UPDATE package.json (1466 bytes)
UPDATE src/app/app.module.ts (407 bytes)
✔ Packages installed successfully.

Now it’s time to build the Ecommerce template

So let’s see on VSCode how the e-commerce template in an HTML file looks like, I’ll put it side by side to better visualize it:

The Angular e-commerce HTML template on VSCode

It has exactly 315 lines, so we need to break this down into modules and components. Now we’re ready to do it!

I’ll be more straightforward and start it in the app.component.htmlfile.
At the end of this article the HTML template will look like this:

The app.component.html in the VSCode editor

The main template now is much better, but suddenly we’re covered by red lines into our template. That’s the components we need to create, so let’s do it.

Let’s create some components:

  • A search form component: ng g c search-form
  • A widgets header component: ng g c widgets-header
  • A navbar component: ng g c nav-bar
  • A menu category component: ng g c menu-category
  • A products list component: ng g c products-list
  • A download demo component: ng g c download-demo
  • A footer component: ng g c footer

At the time I was writing this article, the original HTML looked like this:

The template after divided into Angular components

Suddenly the author of The Rich Post updated the template and now it has almost 1,000 lines. 😮 ….We’ll continue to build it anyway.

After making all the necessary changes, our template will look like this:

Final code of Angular 11 e-commerce template using bootstrap 5.4

In case you want to show again the “Download app demo text”, uncomment the app-download-demo component in the main HTML template.

Dealing with the imported files in the index.html file

Have a look at the index.html file the original template provides:

Screenshot of the index.html provided by The Rich Post blog

We’re going to use it as Angular modules, so let’s do some changes:

  • Copy the content of theassets/css/ui.css file and paste into thestyle.less file. (Comment the ui.css in the index.html file)
  • Copy the content of the assets/css/responsive.css file and paste into a new responsive.less file. (Comment the responsive.css in the index file)

In the angular.json file, add the newer file into styles brackets.

"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.less",
"src/responsive.less" <--- here
],

Using Bootstrap 4 into Angular applications

Photo by Keila Hötzel on Unsplash

To use Bootstrap in our Angular apps using the power of Angular ng CLI, use it as ng-bootstrap instead of importing CSS files into your index.htmlfile directly. All you need to get started is mentioned on the ng-bootstrap webpage:

It’s time to use Bootstrap and fix the menus and carousel of images.
To do that just provide the correct Angular directives in our app template.

screenshot of Bootstrap dropdown menu changes we must do

Do the same for carousel Boostrap component.

screenshot of Bootstrap carousel changes we must do

Using FontAwesome into Angular applications

Photo by Jeroen den Otter on Unsplash

Now we have to fix the icons in our template.

Failed to load resource: the server responded with a status of 404 (Not Found)
fa-brands-400.woff2:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fa-solid-900.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fa-brands-400.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fa-solid-900.ttf:1 Failed to load resource: the server responded with a status of 404 (Not Found)
fa-brands-400.ttf:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Screenshot of the current template with font errors

We’re going to use angular-fontawesome package.

Follow the instructions mentioned in the package’s page.

Example of usage for the angular-fontawesome package

Do the same for the widgets-header component.

Screenshot of the widgets-header using angular-fontawesome directives

Do the same for the subscribe form and social media in the footer.
After the appropriate changes, our Angular template will be like this one:

screenshot of the final Angular e-commerce template

The final code details the creation of the e-commerce template in the Angular app.

I hope you enjoy this hands-on. Any questions, don’t hesitate to ask me.

Software Engineer | Tech Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store