Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

prabhuappu
Contributor II

How to use Angular Material design in Qliksense 3.0 Extension?

Hi,

I'm trying to use angular material theme in Qliksense 3.0 extension. As mentioned in the angular material documentation, i included all the dependent libraries,

'../AngularMaterialChart/bower_components/angular-animate/angular-animate',

'../AngularMaterialChart/bower_components/angular-aria/angular-aria',

'../AngularMaterialChart/bower_components/angular-messages/angular-messages',

'../AngularMaterialChart/bower_components/angular-material/angular-material'

And included the dependency using the below code. But it is not working. Is it correct to inject the dependency like this?

angular.module('qlik-angular').requires.push('ngMaterial');

Code:

define(['jquery',

  "text!./bower_components/angular-material/angular-material-less.css",

  "text!extensions/AngularMaterialChart/template.html",

  "text!./style.css",

  'js/qlik',

  '../AngularMaterialChart/bower_components/angular-animate/angular-animate',

  '../AngularMaterialChart/bower_components/angular-aria/angular-aria',

  '../AngularMaterialChart/bower_components/angular-messages/angular-messages',

  '../AngularMaterialChart/bower_components/angular-material/angular-material'

],

  function ($,

    AngularCSS,

    index,

    style,

    qlik

  ) {

    return {

     template: `<div qv-extension >

      <md-button>Sample</md-button>

      </div>`,

     paint: function ($element) {

        $("<style>").html(AngularCSS).appendTo("head");

        $("<style>").html(style).appendTo("head");

        angular.module('qlik-angular').requires.push('ngMaterial');

      },

      controller: ['$scope', function ($scope) {

      }]

    };

  });

Please Help!!!

Regards,

Prabhu Appu

Community Browser