MoarReviews UI components lib

Overview

This is an Angular components library by Alexander Sergan. All of this components are preferable to be stateless or 'dumb' and can be installed in any project with NPM.

Table of Content

• Getting Started
• Useful Commands
  • Generating page
  • Generating UI component
  • Generage a component with own module

• Stack

Getting started

git clone [email protected]:200kph/reviews-components.git
cd reviews-components
npm install
npm start

Useful Commands

• ng build components --watch - builds components library with watcher
• ng serve - serves demo applicaton on port 4200 (visit http://localhost:4200)

Generate a demo page for component

After you'll run a command:

npm run generate:page myNewPage

you will be promted about name of page you want to generate:

Command like pages/myNewComponentPage will create components' folder and files in src/app/pages/ folder. Voilà!

Generate a component

Suppose, you need to add new visual component my-new-shiny to library, just use one simple command:

npm run generate:component myNewShiny

# (which equals)
#ng generate component components/myNewShiny --project=components --styleExt=scss

It will generate my-new-shiny component files in it's own folder in the projects/components/src/lib/componens/ folder:

Generate a component inside specific module

For example, components referred to Mesenger feature are grouped inside a special Messenger module so they can be imported and lazy-loaded only where you need.

# generate a module
ng g module messenger --project=components --styleExt=scss

# a component inside this module
ng g component messenger/clientCard --project=components 
--styleExt=scss 
--export=true 
--module=messenger

Theming

• Blog post
• Presentation (Slides)
• Live coding Video Tutorial
• Meetup Presentation & Live coding Video

Features

Stack

• Angular
• Angular Material
• Bootstrap 4 (only reset, utils and grids)