{"action":"opened","issue":{"url":"https://api.github.com/repos/thelgevold/angular-2-samples/issues/4","labels_url":"https://api.github.com/repos/thelgevold/angular-2-samples/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/thelgevold/angular-2-samples/issues/4/comments","events_url":"https://api.github.com/repos/thelgevold/angular-2-samples/issues/4/events","html_url":"https://github.com/thelgevold/angular-2-samples/issues/4","id":103822938,"number":4,"title":"Component hierarchy sample","user":{"login":"webteckie","id":5872515,"avatar_url":"https://avatars.githubusercontent.com/u/5872515?v=3","gravatar_id":"","url":"https://api.github.com/users/webteckie","html_url":"https://github.com/webteckie","followers_url":"https://api.github.com/users/webteckie/followers","following_url":"https://api.github.com/users/webteckie/following{/other_user}","gists_url":"https://api.github.com/users/webteckie/gists{/gist_id}","starred_url":"https://api.github.com/users/webteckie/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/webteckie/subscriptions","organizations_url":"https://api.github.com/users/webteckie/orgs","repos_url":"https://api.github.com/users/webteckie/repos","events_url":"https://api.github.com/users/webteckie/events{/privacy}","received_events_url":"https://api.github.com/users/webteckie/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-29T02:21:33Z","updated_at":"2015-08-29T02:21:33Z","closed_at":null,"body":"Can you please provide an example for a component hierarchy?  Something like:\r\n\r\n```\r\n<component-1 class=\"component-1\">\r\n    <component-2 class=\"component-2\">\r\n         <component-3 class=\"component-3\">\r\n         </component-3>\r\n    </component-2>\r\n</component-1>\r\n```\r\n\r\nNOTES:\r\n- I like to see an example where component-2 maintains a data list that component-3 iterates over and displays its items so that I can see an example of cross-hierarchy data access.  E.G.\r\n  Data:\r\n  <script>\r\n      var nameList = [\r\n          {first: 'John', last: 'Doe'},\r\n          {first: 'Jane', last: 'Doe'},\r\n      ];\r\n  </script>\r\n\r\n  Component-1 template:\r\n  <div class=\"name-directory\">\r\n      <component-2 content goes here>\r\n  </div>\r\n\r\n  Component-2 template:\r\n  <div class=\"name-list\">\r\n      <component-3 content goes here>\r\n  </div>\r\n\r\n  Component-3 template:\r\n  <div class=\"list-item\">\r\n      <ul *ng-for=\"#name in nameList\">\r\n          <li>{{#name.last}}, {{#name.first}}</li>\r\n     </ul>\r\n  </div>\r\n\r\n- I would like for the whole component hierarchy to be re-usable in an app page.\r\n\r\nAs given this can probably be simplified but the point of the exercise is to see how component insertion works in a hierarchy of components.\r\n\r\nI have all this working in our Angular 1 with directives/transclusion but having a hard time migrating it to Angular 2.\r\n\r\n\r\n\r\n"}}