All Projects → affilnost → Angular5 Example Shopping App

affilnost / Angular5 Example Shopping App

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

Programming Languages

typescript
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
spring-websocket-angular6
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
Covalent
Teradata UI Platform built on Angular Material
Stars: ✭ 2,230 (+1758.33%)
Mutual labels:  material-design, material, angular-material
Md2
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
ng2-timezone-selector
A simple Angular module to create a timezone selector using moment-timezone.
Stars: ✭ 12 (-90%)
Mutual labels:  angular2, angular-2, angular5
ncg-crud-ngx-md
Angular 4+ Material Design CRUD/Admin app by NinjaCodeGen http://DNAfor.NET
Stars: ✭ 36 (-70%)
Mutual labels:  angular2, angular-material, angular-2
Angular4-seed
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
Materialtimecontrol
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
Materialdesigndemo
A beautiful app designed with Material Design.
Stars: ✭ 1,391 (+1059.17%)
Mutual labels:  material-design, material
Keepassdx
📱 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
Materialtaptargetprompt
Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/
Stars: ✭ 1,378 (+1048.33%)
Mutual labels:  material-design, material
Materialize
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 https://gitter.im/Angular-5-Example-Shopping-App/Lobby MIT Licence Open Source Love TypeScript Build Status

LIVE DEMO

angular-example-shopping-app

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 shutterstock.com API, but it can be easily changed to any other api

Features

  • 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.

Build

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

Contributing

Please see the CONTRIBUTING file for guidelines.

Deploying to GitHub Pages

npm run deploy-to-ghpages

License

MIT

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].