Angular 2 Web Components

Components, Angular 2
npm install ng2-comps@0.1.7


Angular 2 Comps (ng2-comps)

This library is under development. Will contain a set of components to be used for easily creating angular2 web pages with pure native typescript and angular 2 code.

The library

The components

The components are: * Modal - a normal modal window * Button - a normal button * Dropdown - a normal dropdown button * Text - a text typography container * IconComponent - a container for the icon * FormDatetimeComponent - datetime picker * FormTextComponent - input text * LeftComponent - fixed position left container (useful for menus) * RightComponent - fixed position right container (useful for right chat/notifications) * HeaderComponent - fixed position header container (useful for menus) * FooterComponent - fixed position footer container (useful for site info)

The styles

All the components are deeply customized through main scss system. It is possible to create or change your theme based on the scss property.

Install the library

npm install --save ng2-comps

Import the library with SystemJs

Add ng2-comps to your systemjs.config.js

``` var map = { ... 'ng2-comps': 'node_modules/ng2comps', ...

}; ... var packages = { ... 'ng2-comps': { main: 'index.js', defaultExtension: 'js' }, ... }; ... ```

Add the library in your angular 2 components

import { COMPS_DIRECTIVES } from 'ng2-comps'; .... @Component({ ... directives: [...,COMPS_DIRECTIVES], ... })

Modal (ModalComponent)


<mm-modal #modalRef> <mm-modal-header-title> <mm-text>Header</mm-text> </mm-modal-header-title> <mm-modal-header-right> <mm-icon class="bigger fa-lg fa fa-times link" (click)="modalRef.close()"></mm-icon> </mm-modal-header-right> <mm-modal-footer-right> <mm-button (clickEvent)="modali.close()">Cancel</mm-button> <mm-button type="error" (clickEvent)="modalRef.close()">OK</mm-button> </mm-modal-footer-right> </mm-modal>

Button (ButtonComponent)


<mm-button (clickEvent)="some_event()">Button Content</mm-button>

Text (TextComponent)


<mm-text>Text here</mm-text>

Dropdown (DropdownComponent)

<mm-dropdown #drop (clickOutside)="drop.close()"> <mm-dropdown-title>Sample</mm-dropdown-title> <mm-dropdown-item><a href="#">First item</a></mm-dropdown-item> <mm-dropdown-item><a href="#">Second item</a></mm-dropdown-item> </mm-dropdown>