katan / angular-material-demos

Angular +7 and Material Design Examples

Angular Material demos

This project provides a functionality demos using Material Design.
Still working to provide a beta release.

Dependencies

Mandatory

• @angular/core ^7.x
• @angular/cdk ^7.x
• @angular/material ^7.x

Optional

• @material/layout-grid ^0.x (Adds responsive styles)
• material-design-icons-iconfont ^4.x (Material icons font)
• @kolkov/angular-editor ^0.x (A WYSWYG html editor)
• crypto-js ^3.x (Use for encryption & encoding data on browser storage)
• file-saver ^2.x (Use for generate file to download)
• xlsx ^0.x (Use to convert Arrays on Excel format)
• ngx-perfect-scrollbar (A beautify scroll bar)

Features

• Uses theming Angular material
• Simple folder structure
• Uses last packages released
• Is Focus on minor initial bundles sizes and best performance
• Demos provideds:
  • Data tables
  • Tabs
  • Forms (Working on)
  • Espansion panels (AKA Accordion)
  • More demos on next releases ...

Development server

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

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use npm run build:prod on the root path for a production build.

Bundles analyzer

Run npm run analyze on the root path to analyze the bundles project.

Running unit tests (not yet)

Run ng test to execute the unit tests via Karma.

Running end-to-end tests (not yet)

Run ng e2e to execute the end-to-end tests via Protractor.

angular-material-demos's Issues

Provide a forms demos

• I'm submitting a ...

  • bug report
  • feature request

• What is the current behavior?
  Missing form demos.

• What is the expected behavior?
  Adds more Forms.
  Adds validation forms demo.

• What is the motivation / use case for changing the behavior?
  Provide a full form demos.

• Other information
  none

Breadcrumb doesn't execute at start

Expected Behavior

Reload a specific route page like: '/form/simple/form' and expect the breadcrumb shows correctly.

Current Behavior

Reload a specific route page like: '/form/simple/form' and the breadcrumb shows a slash '/'.
If the route changes the breadcrumbs run correctly.

Possible Solution

Review why the routing life cycle doesn't handling by the breadcrumb at start

Steps to Reproduce

1. Open new tab and paste: 'localhost:4200/forms/simple-form'
2. The breadcrumb only show a slash

Context (Environment)

The affectation is minimum but is strange and only affect at start.

Detailed Description

See the possible solution.

Add a login page

• Add a login/recovery password pages
• Save signin data on session storage
• Default redirect to login page
• Implement logout; remove session storage & redirect to login page

Expande/Collpase the side menu when routing changes

• I'm submitting a ...

  • bug report
  • feature request

• Do you want to request a feature or report a bug?
  Feature.

• What is the current behavior?
  The side menu at start has collaspsed.

• What is the expected behavior?
  The side menu expande/collapse on the correct menu selection when the routing changes.

• What is the motivation / use case for changing the behavior?
  UX improvements

• Other information

The Sidenav Component should be Subscribe on the router events to detect changes and handle the expanse/collapse menu

The XLSX module outside vendor.js

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...

  • bug report
  • feature request

• Do you want to request a feature or report a bug?
  Feature.

• What is the current behavior?
  The vendor has increased hugely.

• What is the expected behavior?
  The XLSX module should be inside another not a main required javascript file.

• What is the motivation / use case for changing the behavior?
  Reduce the initial load

• Other information

Create a own module to import the XLSX module, or import inside tabs module or similar.

Move Compare language codes to language service

The compare languages code inside language dropdown component should be moving to the language service to prevent duplication code.

Breadcrumb doesn't works at starts

When user sign in the app redirect to "/form/simple-form", but breadcrumb only show one slash "/".
After works well when changes to another route.