All Projects → affilnost → Angular5 Example Shopping App

affilnost / Angular5 Example Shopping App

Licence: mit
Angular 5 Example Shopping App + Angular Material + Responsive

Programming Languages

32286 projects

Projects that are alternatives of or similar to Angular5 Example Shopping App

Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (+40.83%)
Mutual labels:  material, angular2, angular5
Example for using Spring Websocket and Angular with Stomp Messaging
Stars: ✭ 18 (-85%)
Mutual labels:  angular2, example-project, angular5
Vantage Ui Template
Template for UI applications in Vantage
Stars: ✭ 193 (+60.83%)
Mutual labels:  material-design, angular-material, angular2
Teradata UI Platform built on Angular Material
Stars: ✭ 2,230 (+1758.33%)
Mutual labels:  material-design, material, angular-material
Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
Stars: ✭ 389 (+224.17%)
Mutual labels:  material-design, material, angular2
Angular5 Seed
Angular5 Seed for Application
Stars: ✭ 222 (+85%)
Mutual labels:  angular-material, angular2, angular5
Rwa Trivia
Trivia App - Real World Angular series
Stars: ✭ 251 (+109.17%)
Mutual labels:  material-design, angular-material, angular-2
Learn Angular From Scratch Step By Step
Angular step by step tutorial covering from basic concepts of Angular Framework to building a complete Angular app using Angular Material components. We will go through the main building blocks of an Angular 7 application as well as the best practices for building a complete app with Angular.
Stars: ✭ 140 (+16.67%)
Mutual labels:  angular-material, angular5, angular-2
A simple Angular module to create a timezone selector using moment-timezone.
Stars: ✭ 12 (-90%)
Mutual labels:  angular2, angular-2, angular5
Angular 4+ Material Design CRUD/Admin app by NinjaCodeGen http://DNAfor.NET
Stars: ✭ 36 (-70%)
Mutual labels:  angular2, angular-material, angular-2
Angular 4 Seed for Angular Forms
Stars: ✭ 37 (-69.17%)
Mutual labels:  angular2, angular-2, angular5
Dejajs Components
Angular components
Stars: ✭ 37 (-69.17%)
Mutual labels:  material, angular2, angular-2
Angular2 Mdl
Angular 2, 4, 5, 6, 7, 8, 9, 10, 11 components, directives and styles based on material design lite (npm: @angular-mdl/core)
Stars: ✭ 562 (+368.33%)
Mutual labels:  material-design, angular2, angular5
Time component for angular/Material2 (5.0.0-rc0)
Stars: ✭ 81 (-32.5%)
Mutual labels:  material-design, angular-material, angular5
Razzle Material Ui Styled Example
Razzle Material-UI example with Styled Components using Express with compression
Stars: ✭ 117 (-2.5%)
Mutual labels:  example-project, boilerplate
A beautiful app designed with Material Design.
Stars: ✭ 1,391 (+1059.17%)
Mutual labels:  material-design, material
📱 KeePass implementation for android with material design and deluxe features
Stars: ✭ 1,395 (+1062.5%)
Mutual labels:  material-design, material
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-2.5%)
Mutual labels:  material-design, material
Material Design tap target for Android.
Stars: ✭ 1,378 (+1048.33%)
Mutual labels:  material-design, material
Materialize, a CSS Framework based on Material Design
Stars: ✭ 38,630 (+32091.67%)
Mutual labels:  material-design, material

Angular 5 Example Shopping App + Angular Material + Responsive

Made with ❤️

Join the chat at MIT Licence Open Source Love TypeScript Build Status



UI Description

The app provides a possibility to maintain shopping lists.

  • Products can be searched with a search field
  • Each product can be added to a shopping list
  • Shopping list can be viewed
  • Products can be removed from shopping list
  • Name of shopping lists can be defined and changed
  • User friendly design

API connection:

  • App uses API, but it can be easily changed to any other api


  • Angular 5+
  • Internationalization (translations)
  • Routing
  • Lazy loading (Shopping module)
  • Material Design
  • Custom loading page
  • Responsive layout (flex layout module)
  • RxJS/Observables
  • Angular forms
  • Http
  • Scalable architecture
  • Following the best practices!

Environment installation

You need to have Node.js and npm installed on your PC/Mac.

Then just run npm install in the project's root.

Development server

Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.


Run npm run build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Possible Issues / Improvements

  • Pagination in the Product Search List
  • Possibility to add multiple products (of one type) to the Shopping List and to change the count of every product
  • Write tests
  • Navigation: Add breadcrumbs, "Back" buttons


Please see the CONTRIBUTING file for guidelines.

Deploying to GitHub Pages

npm run deploy-to-ghpages



Enjoy 😜

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].