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.
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-appThe 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:
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:
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 IconsNow 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:
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 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:
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:
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:
We’re going to use it as Angular modules, so let’s do some changes:
- Copy the content of the
assets/css/ui.cssfile and paste into thestyle.lessfile. (Comment theui.cssin the index.html file) - Copy the content of the
assets/css/responsive.cssfile and paste into a newresponsive.lessfile. (Comment theresponsive.cssin 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
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.
Do the same for carousel Boostrap component.
Using FontAwesome into Angular applications
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)
We’re going to use angular-fontawesome package.
Follow the instructions mentioned in the package’s page.
Do the same for the widgets-header component.
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:
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.
