@anyapp/components v0.0.2

anyapp

A simple framework for any (angular) app

Table of contents

• Features
• Getting started

• Configuration

Features

Components

• Components: button
• Components: checkbox
• Components: datepicker
• Components: icon
• Components: input
• Components: label
• Components: select
• Components: slider
• Components: table
• Components: textarea
• Components: loading
• Components: header
• Components: list
• Components: card
• Directive: form
• Layout: side-menu
• Layout: top-menu

Core

• Authentication
• Http
• Exception and error
• Application

Tools

• Helper

Getting started

Step 1: Install anyapp dependencies:

npm install --save @angular/material @angular/cdk @angular/material-moment-adapter

Optional dependencies (read below):

npm install --save hammerjs moment material-design-lite

To support masked inputs: npm install --save ngx-mask

Step 2: Install anyapp:

npm install --save @anyapp/components @anyapp/core @anyapp/tools

Step 3: Import AnyAppComponentsModule and the angular FormsModule:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AnyAppComponentsModule } from '@anyapp/components';
import { AnyAppCoreModule } from '@anyapp/core';
import { AnyAppToolsModule } from '@anyapp/tools';

@NgModule({
  declarations: [AppComponent],
  imports: [
  BrowserAnimationsModule, FormsModule,
  AnyAppComponentsModule, AnyAppCoreModule, AnyAppToolsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: Include a theme

AnyApp depends on Angular Material predefined themes and MDL (https://getmdl.io). If you're using the Angular CLI, you can add any of the four styles to your styles.scss or include it in .angular-cli.json (Angular v5 and below) or angular.json (Angular v6 onwards).

@import "~@anyapp/components/assets/styles/deeppurple-amber.bundle.min.css";
or
@import "~@anyapp/components/assets/styles/indigo-pink.bundle.min.css";
or
@import "~@anyapp/components/assets/styles/pink-bluegrey.bundle.min.css";
or
@import "~@anyapp/components/assets/styles/purple-green.bundle.min.css";

Step 5: Include the required scripts

AnyApp depends also depends on a few scripts (hammer, moment, mdl). If you're using the Angular CLI, you can add include the js in the scripts section of .angular-cli.json (Angular v5 and below) or angular.json (Angular v6 onwards).

node_modules/@anyapp/components/assets/scripts/scripts.bundle.js

Alternatively you can include the inidividual scripts:

node_modules/@anyapp/components/assets/scripts/individual/hammerjs.js
node_modules/@anyapp/components/assets/scripts/individual/material.js
node_modules/@anyapp/components/assets/scripts/individual/moment.js

Or you can include the scripts on your own (by either referencing it from your own node_modules or using a CDN

Configuration

You can set global configuration by providing custom ANYAPP_DEFAULT_COMPONENTS_CONFIG

<AnyAppComponentsConfig>{
  messageDuration: 2000,
  locale: "nl",
  errorMessages: {          
    required: "This field is required",
    email: "This has to be an e-mailaddress",
    pattern: "This field doesn't match the pattern",
    minLength: "This field doesn't match the min length",
    maxLength: "This field doens't match the max length",
    invalidFormMessage: "The form is invalid"
  },
  tableConfig: {
    pageSize: 50,
    selectOption: TableSelectEnum.NoSelect
  },
  buttonConfig: {
    buttonTimeoutThreshold: 250
  },
  formConfig: {
  }