Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
prabhuappu
Creator II
Creator 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

0 Replies