Utiliser Gridstack avec Angular2 : ng2-gridstack

écrit par guillaume.perouffe publié le jeudi 2 mars 2017
Si vous avez lu l'épisode numéro 2 de notre AngularOdyssey (sinon, vous devriez) vous savez ce qu'est Gridstack.js, et vous avez déjà envie de l'intégrer à toutes vos applications. Vous avez même peut être déjà essayé, et vous vous êtes alors rendu compte d'une chose : ce n'est pas évident et votre beau code Angular se retrouve inévitablement rempli de vil JQuery. Heureusement, nous vous avons concocté un module prêt à l'emploi qui vous permettra d'implémenter facilement et rapidement des grilles dynamiques dans vos web-apps. Et tout cela sans JQuery ajouté. J'ai nommé, ng2-gridstack. Voyons comment l'utiliser. Tout d'abord vous allez devoir l'installer. Nous l'avons mis à disposition sur npm, il vous suffit donc de le récupérer et le charger dans votre projet. Commençons par charger les dépendances de ng2-gridstack, à savoir JQuery, JQueryUI, lodash et bien sûr, gridstack.js. Pour cet exemple nous allons tout récupérer depuis des serveurs distants, mais libre à vous de les inclure à votre projet.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.js"></script>
Procédons ensuite au chargement de notre module dans le projet. Nous utilisons pour cela SystemJs, encore une fois, vous pouvez utiliser le chargeur de module que vous préférez.
(function (global) {
    System.config({
        paths:{
            (...)
        },
        map: {
            'ng2-gridstack': 'https://npmcdn.com/ng2-gridstack@0.1.10/ng2-gridstack',
            (...)
        },
        packages: {
            'ng2-gridstack': {
                main: './ng2-gridstack.js',
                defaultExtension: 'js'
            },
            (...)
        }
    });
})(this);
Et voilà, le composant gridstack est accessible partout dans votre projet. Il ne vous reste plus qu'à l'importer dans le module de votre choix. Supposons que l'on ait l'architecture suivante:
app/
|_app.module.ts
|_app.componenent.ts
|_main.ts
index.html
systemjs.config.js
On souhaite importer le composant gridstack dans notre module App. Voici à quoi ressemble la déclaration du module avec l'import de ng2-gridstack.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component.ts'
import { GridStackComponent, GridStackItemDirective } from 'ng2-gridstack'

@NgModule({
    imports: [
      BrowserModule
    ],
    declarations: [
      AppComponent,
      GridStackComponent,
      GridStackItemDirective
    ],
    providers: [
    ]
    bootstrap: [AppComponent]
})
export class AppModule { }
Et nous en venons enfin à l'utilisation. La manière la plus simple d'utiliser ng2-gridstack est d'appeler le composant gridstack dans votre vue et de lui passer un template composé de tous les items que vous souhaitez afficher dans votre grille. Le code suivant permettra d'afficher deux cartes de taille 3x3 côte à côte sur une grille de 12 unités en largeur.
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  template: `
  <gridStack w="12" animate="true">
    <div gridStackItem
        [x]="0" [y]="0" [h]="3" [w]="3" [customid]="10">
        <h1>Carte 1</h1>
    </div>
    <div gridStackItem
        [x]="3" [y]="0" [h]="3" [w]="3" [customid]="10">
        <h1>Carte 2</h1>
    </div>
  </gridStack>
  `
})
export class AppComponent {
  constructor() {  }
}
Pas si compliqué, n'est-ce-pas? Cet exemple est vraiment la grille la plus simple que vous pouvez construire, libre à vous ensuite de rajouter les éléments que vous voulez à vos cartes (des inputs, des grilles, des boutons, un Pac-Man...), ou même de procéder au remplissage automatique de la grille avec les fonctionnalités avancées du module présentées dans la documentation.