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)
Usage
<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)
Usage
<mm-button (clickEvent)="some_event()">Button Content</mm-button>
Text (TextComponent)
Usage
<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>