How to use embed Angular UiGrid in AngularJs Component

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.


<!doctype html>
<html ng-app="app">
    <scripts> ... </script>
    <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>
    <script src="app.js"></script>


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


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>


<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>

Leave a Reply

Your email address will not be published. Required fields are marked *