tiberiuzuld / Angular Gridster2
Licence: mit
Angular gridster 2
Stars: ✭ 956
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to Angular Gridster2
Clever Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Clever is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 98 (-89.75%)
Mutual labels: dashboard, angularjs, angular2
Paperadmin
A flat admin dashboard using Angular JS 2/4
Stars: ✭ 80 (-91.63%)
Mutual labels: dashboard, angularjs, angular2
Root Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Root is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 54 (-94.35%)
Mutual labels: dashboard, angularjs, angular2
Coreui Free Bootstrap Admin Template
CoreUI is free bootstrap admin template
Stars: ✭ 11,038 (+1054.6%)
Mutual labels: dashboard, angularjs, angular2
Dashing Icinga2
Dashing dashboard for Icinga 2 using the REST API
Stars: ✭ 195 (-79.6%)
Mutual labels: widgets, dashboard
Angular4-seed
Angular 4 Seed for Angular Forms
Stars: ✭ 37 (-96.13%)
Mutual labels: angularjs, angular2
Angular-Firebase-Sortable-Table
Angular Firebase Sortable Table is a module that makes tables creation with firebase an easy task.
Stars: ✭ 28 (-97.07%)
Mutual labels: angularjs, angular2
Angular5 Iot Dashboard
Multipurpose dashboard admin for IoT softwares, remote control, user interface. Develop your client dashboards in Angular 5 with vast variety of components available.
Stars: ✭ 148 (-84.52%)
Mutual labels: dashboard, angular2
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (-96.03%)
Mutual labels: angularjs, angular2
Light Bootstrap Dashboard Angular2
Light Bootstrap Dashboard Angular 2
Stars: ✭ 299 (-68.72%)
Mutual labels: dashboard, angular2
Django Suit Dashboard
Create a dashboard within Django admin interface.
Stars: ✭ 75 (-92.15%)
Mutual labels: widgets, dashboard
Thingsboard
Open-source IoT Platform - Device management, data collection, processing and visualization.
Stars: ✭ 10,526 (+1001.05%)
Mutual labels: widgets, dashboard
router
Keep your Angular2+ router state in Redux
Stars: ✭ 28 (-97.07%)
Mutual labels: angularjs, angular2
Ngx Gauge
A highly customizable Gauge component for Angular 9+ apps and dashboards
Stars: ✭ 158 (-83.47%)
Mutual labels: dashboard, angular2
ng-apimock
Node plugin that provides the ability to use scenario based api mocking: for local development for protractor testing
Stars: ✭ 102 (-89.33%)
Mutual labels: angularjs, angular2
Blueprint
Free, feature-rich, easily customizable Android dashboard for icon packs
Stars: ✭ 389 (-59.31%)
Mutual labels: widgets, dashboard
Angular Material Dashboard
A material-design dashboard by using angular
Stars: ✭ 347 (-63.7%)
Mutual labels: dashboard, angular2
Staradmin Free Angular Admin Template
Star Admin Angular Admin is a free admin template based on Bootstrap 4 and Angular
Stars: ✭ 112 (-88.28%)
Mutual labels: dashboard, angularjs
angular-gridster2
Demo
Angular implementation of angular-gridsterRequires Angular 11.x
For other Angular versions check the other branches.
Install
npm install angular-gridster2 --save
Should work out of the box with webpack, respectively angular-cli.
import { GridsterModule } from 'angular-gridster2';
@NgModule({
imports: [ GridsterModule ],
...
})
Browser support
What Angular supports here
How to use
<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let item of dashboard">
<!-- your content here -->
</gridster-item>
</gridster>
Initialize a simple dashboard:
import { GridsterConfig, GridsterItem } from 'angular-gridster2';
options: GridsterConfig;
dashboard: Array<GridsterItem>;
static itemChange(item, itemComponent) {
console.info('itemChanged', item, itemComponent);
}
static itemResize(item, itemComponent) {
console.info('itemResized', item, itemComponent);
}
ngOnInit() {
this.options = {
itemChangeCallback: AppComponent.itemChange,
itemResizeCallback: AppComponent.itemResize,
};
this.dashboard = [
{cols: 2, rows: 1, y: 0, x: 0},
{cols: 2, rows: 2, y: 0, x: 2}
];
}
changedOptions() {
this.options.api.optionsChanged();
}
removeItem(item) {
this.dashboard.splice(this.dashboard.indexOf(item), 1);
}
addItem() {
this.dashboard.push({});
}
Note: The gridster will take all the available space from the parent. It will not size depending on content. The parent of the component needs to have a size.
Having iFrame in widgets content
iFrames can interfere with drag/resize of widgets. For a workaround please read this issue #233
Interact with content without dragging
Option 1 (without text selection):
<gridster-item>
<div (mousedown)="$event.stopPropagation()" (touchstart)="$event.stopPropagation()">
Some content to click without dragging the widget
</div>
<div class="item-buttons">
<button md-icon-button md-raised-button class="drag-handler">
<md-icon>open_with</md-icon>
</button>
<button md-icon-button md-raised-button class="remove-button" (click)="removeItem($event, item)"
(touchstart)="removeItem($event, item)" mdTooltip="Remove">
<md-icon>clear</md-icon>
</button>
</div>
</gridster-item>
Option 2 (with text selection):
<gridster-item>
<div class="gridster-item-content">
Some content to select and click without dragging the widget
</div>
<div class="item-buttons">
<button md-icon-button md-raised-button class="drag-handler">
<md-icon>open_with</md-icon>
</button>
<button md-icon-button md-raised-button class="remove-button" (click)="removeItem($event, item)"
(touchstart)="removeItem($event, item)" mdTooltip="Remove">
<md-icon>clear</md-icon>
</button>
</div>
</gridster-item>
here
ContributorsSupporters
@ea20140129 @matpag (Mattia Pagini) @DerekJDev (Derek Johnson)
License
The MIT License
Copyright (c) 2021 Tiberiu Zuld
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].