Angular 2 Web Components
Homepage Repository npm Download
npm install ng2-comps@0.1.4
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 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)
All the components are deeply customized through main scss system. It is possible to create or change your theme based on the scss property.
npm install --save ng2-comps
Add ng2-comps to your systemjs.config.js
``` var map = { ... 'ng2-comps': 'node_modules/ng2comps', ...
}; ... var packages = { ... 'ng2-comps': { main: 'index.js', defaultExtension: 'js' }, ... }; ... ```
import { COMPS_DIRECTIVES } from 'ng2-comps';
....
@Component({
...
directives: [...,COMPS_DIRECTIVES],
...
})
<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>
<mm-button (clickEvent)="some_event()">Button Content</mm-button>
<mm-text>Text here</mm-text>
<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>