JqWidgets - Applying a theme to a jqxgrid

Within Angular, I am trying to apply a theme to my grid.

My grid

          <div class="panel-body">
            <jqxGrid #reference 
              [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
              [editable]='true' [columns]='columns'>
           </jqxGrid>

          </div>    

Within the jqwidgets folder there is a theme I would like to use for the table within jqx.energyblue.css

I am unsure how to call this within the grid I created. I am new to this. Any help is much appreciated.

UPDATE***

I may have made some progress. Within the index.html I was able to set the theme property.

  <link href="assets/css/jqx.base.css" rel="stylesheet">
  <link href="assets/css/jqx.energyblue.css" rel="stylesheet">
  <script type="text/javascript">
        $(document).ready(function () {
            // Set the theme.
            $("#jqxTheme").jqxGrid({ theme: "energyblue" });
        });
    </script>

Then made changes to the grid itself.

              <div class="panel-body">
                <jqxGrid id='jqxTheme'
                  [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
                  [editable]='true' [columns]='columns'>
               </jqxGrid>

              </div>

Still it does not work. Any ideas?

Got it. Apply the name of the css theme to your jqxGrid

   <jqxGrid
      [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
      [editable]='true' [columns]='columns' [theme]='"energyblue"'>
   </jqxGrid>