npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rybos/angular2gridster

v15.0.0

Published

[![npm version](https://badge.fury.io/js/angular2gridster.svg)](https://badge.fury.io/js/angular2gridster)

Downloads

2

Readme

angular2gridster

npm version

Note This is a fork of Angular2Gridster. It is updated to Angular 15 with some minor tweaks and updates added.

Angular implementation of the well-known Gridster (no jQuery, no external libraries, only Angular and Rx.js).

Versions:

  • Version 15.x works with Angular 15.x.
  • Version 14.x works with Angular 14.x.
  • Version 13.x works with Angular 13.x.
  • Version 12.x works with Angular 12.x.
  • Version 11.x works with Angular 11.x.
  • Version 10.x works with Angular 10.x.
  • Version 9.x works with Angular 9.x.
  • Version 8.x works with Angular 8.x.
  • Version 7.x works with Angular 7.x.
  • Version 6.x works with Angular 6.x.
  • Version 5.x works with Angular 5.x.
  • Version 4.x works with Angular 4.x.

Versions 1.x and 0.x work only with Angular 4.x, but the newest states you can find in v4.x.

Installation

npm install @hyperviewhq/angular2gridster

Once installed you need to import our module: The example imports in AppModule, but it could also be imported in any other module - depends on where you want to use it.

Additional steps for System.js

To make Angular2gridster works with System.js you need to provide a dedicated configuration in systemjs.config.js. It requires a change in `map`` object and 'packages' as follows:

System.config({
    map: {
        // ...
        rxjs: 'node_modules/rxjs',
        angular2gridster: 'node_modules/@hyperviewhq/angular2gridster',
    },
    packages: {
        // ...
        rxjs: {defaultExtension: 'js'},
        angular2gridster: {main: 'dist/index.js', defaultExtension: 'js'},
    },
});

Example usage

<ngx-gridster [options]="gridsterOptions" [draggableOptions]="{ handlerClass: 'panel-heading' }">
    <ngx-gridster-item
        *ngFor="let widget of widgets"
        [(x)]="widget.x"
        [(y)]="widget.y"
        [(w)]="widget.w"
        [(h)]="widget.h"
    >
        <!-- some content -->
    </ngx-gridster-item>
</ngx-gridster>

For version before 6.0.0:

<gridster [options]="gridsterOptions" [draggableOptions]="{ handlerClass: 'panel-heading' }">
    <gridster-item
        *ngFor="let widget of widgets"
        [(x)]="widget.x"
        [(y)]="widget.y"
        [(w)]="widget.w"
        [(h)]="widget.h"
    >
        <!-- some content -->
    </gridster-item>
</gridster>
widgets: Array<any> = [...];
gridsterOptions = {
  lanes: 2, // how many lines (grid cells) dashboard has
  direction: 'vertical', // items floating direction: vertical/horizontal/none
  floating: false, // default=true - prevents items to float according to the direction (gravity)
  dragAndDrop: false, // possible to change items position by drag n drop
  resizable: false, // possible to resize items by drag n drop by item edge/corner
  useCSSTransforms: true, // Uses CSS3 translate() instead of position top/left - significant performance boost.
  responsiveSizes: true, // allow to set different item sizes for different breakpoints
  // ResponsiveOptions can overwrite default configuration with any option available for specific breakpoint.
  responsiveOptions: [
        {
            breakpoint: 'sm',
            lanes: 3
        },
        {
            breakpoint: 'md',
            minWidth: 768,
            lanes: 4,
            dragAndDrop: true,
            resizable: true
        },
        {
            breakpoint: 'lg',
            lanes: 6,
            dragAndDrop: true,
            resizable: true
        },
        {
            breakpoint: 'xl',
            minWidth: 1800,
            lanes: 8,
            dragAndDrop: true,
            resizable: true
        }
    ]
};

Warning

If you use responsiveOptions, then item coords will be assigned to different breakpoint attributes:

  • till sm (480px), it uses x and y attributes
  • sm (480px - 768px), it uses xSm and ySm attributes
  • md (768px - 1250px), it uses xMd and yMd attributes
  • lg (1250px - 1800px), it uses xLg and yLg attributes
  • from xl (1800px), it uses xXl and yXl attributes

(widths in px are only example and works for `responsiveOptions in the example above).

If you set responsiveSizes: true, item size can be different for different breakpoints. In this case, size will be bound to following attributes:

  • till sm (480px), it uses w and h attributes
  • sm (480px - 768px), it uses wSm and hSm attributes
  • md (768px - 1250px), it uses wMd and hMd attributes
  • lg (1250px - 1800px), it uses wLg and hLg attributes
  • from xl (1800px), it uses wXl and hXl attributes

Demo

Clone or download this repository and just run:

npm i
npm run build
npm start

Go to: http://localhost:4200/

Compilation problems

If somebody will have compilation problems please add an issue (if not yet created). I will try to fix it as soon as possible. The angular compiler has still some issues open and it is changing frequently.

As a temporary solution copy files from the/``projects/angular2gridster/src/lib` folder to dedicated folder in your project.

Issues

If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via CodeSandbox:

Edit Angular

The project is in development so don't hesitate to write any questions or suggestions on issue list. I look forward to getting a response from you.

Origin

This project was created on the idea of GridList](https://github.com/hootsuite/grid). Great alternative for Gridster.