How to use embed Angular UiGrid in AngularJs Component

Question

I try to embed a ui-grid in a component, and the embedded ui-grid doesnt render

I built a Plnkr to visualize the problem.

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <scripts> ... </script>
  </head>
  <body>
    <div ng-controller="MainCtrl as $ctrl">
      DataGrid in HTML
      <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
      <h1>Template/ Component</h1>
      <hero-detail hero="$ctrl.hero" myData="$ctrl.myData"}"</hero-detail>
    </div>
    
    <script src="app.js"></script>
  </body>
</html>

app.js

angular.module('app', ['ngTouch', 'ui.grid'])
  .controller('MainCtrl', MainCtrl)
  .component('heroDetail', {
  template: `
      <div>
        DataGrid in Template
        <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
        <span>Name: {{$ctrl.hero.name}}</span>
        
      </div>
  `,
  bindings: {
    hero: '=',
    myData: '='
  }
});

function MainCtrl() {
  this.hero = {name: 'Spawn'};
  this.myData = [
    {
        firstName: "Cox",
        lastName: "Carney",
        company: "Enormo",
        employed: true
    },
    ...
  ];
}

Do you have an idea how to arrive at a workable solution?

Thanks for your input!

Did my answer help you?

rhavelka
– rhavelka

2021-03-08 14:14:33 +00:00
Commented Mar 8, 2021 at 14:14 — rhavelka
– rhavelka, Commented Mar 8, 2021 at 14:14

rhavelka · Accepted Answer · 2021-03-05 16:54:40Z

1

Looking at this github, all camelCase bindings in the component are translated to kabab-case in the html. So your component reference in the index.html needs to be changed from

<hero-detail hero="$ctrl.hero" myData="$ctrl.myData"></hero-detail>

into

<hero-detail hero="$ctrl.hero" my-data="$ctrl.myData"></hero-detail>

Also, a side note, you have a typo where ="$ctrl.myData"}"</hero-detail> needs to be changed to ="$ctrl.myData"></hero-detail>

answered Mar 5, 2021 at 16:54

rhavelka

2,4244 gold badges26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use embed Angular UiGrid in AngularJs Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related