{"action":"created","issue":{"url":"https://api.github.com/repos/angular/angular/issues/12758","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/12758/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/12758/comments","events_url":"https://api.github.com/repos/angular/angular/issues/12758/events","html_url":"https://github.com/angular/angular/issues/12758","id":187847674,"number":12758,"title":"Accessing instances of dynamic components with ng-content","user":{"login":"jwa107","id":2524299,"avatar_url":"https://avatars.githubusercontent.com/u/2524299?v=3","gravatar_id":"","url":"https://api.github.com/users/jwa107","html_url":"https://github.com/jwa107","followers_url":"https://api.github.com/users/jwa107/followers","following_url":"https://api.github.com/users/jwa107/following{/other_user}","gists_url":"https://api.github.com/users/jwa107/gists{/gist_id}","starred_url":"https://api.github.com/users/jwa107/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jwa107/subscriptions","organizations_url":"https://api.github.com/users/jwa107/orgs","repos_url":"https://api.github.com/users/jwa107/repos","events_url":"https://api.github.com/users/jwa107/events{/privacy}","received_events_url":"https://api.github.com/users/jwa107/received_events","type":"User","site_admin":false},"labels":[{"id":375501288,"url":"https://api.github.com/repos/angular/angular/labels/comp:%20core%20&%20compiler","name":"comp: core & compiler","color":"c7def8","default":false},{"id":130606845,"url":"https://api.github.com/repos/angular/angular/labels/type:%20feature","name":"type: feature","color":"EEEEEE","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-11-07T22:27:00Z","updated_at":"2016-11-11T19:28:08Z","closed_at":null,"body":"**I'm submitting a ...**\r\n```\r\n[] bug report \r\n[ x ] feature request\r\n[ ] support request\r\n```\r\n\r\n**Current behavior**\r\nQuerying ngContent with a superclass doesn't work.\r\n\r\n**Expected behavior**\r\nQuerying ngContent with a superclass should work.\r\n\r\n**Minimal reproduction of the problem with instructions**\r\nCurrently, if you have a component that uses ng-content inside of its template, it can render out whatever you pass to it. (ie. any other component or html). However referencing this component is only possible if you know exactly what component it will be.\r\n\r\n\r\n```\r\n@ContentChildren(Component1) myComponent;\r\n```\r\n\r\n\r\nIn the case where you don't know, you can't select it. My request would be that you can select the components off a super class. Say, `Component1 extends MySuperClass` and `Component2 extends MySuperClass` you can select their instances like so: \r\n\r\n```\r\n@ContentChildren(MySuperClass) myComponents;\r\n```\r\n\r\n**What is the motivation / use case for changing the behavior?**\r\nThe motivation behind this is allowing dynamic components to be injected yet allow their instance to be referenced by their parent component. In my particular use-case I am allowing the developer to build pages of a wizard containing whatever component they need -- I then assume that they have a class or interface on them that they share so that I can call functions on them like, say, `validate` so I can move forward in the wizard.\r\n\r\n```\r\n<wizard>\r\n    <page>\r\n        <component1></component1>\r\n    </page>\r\n    <page>\r\n        <component2></component2>\r\n    </page>\r\n</wizard>\r\n```\r\n\r\n**Please tell us about your environment:**\r\nWindows 10, Angular 2.0.1, WebStorm, Webpack/Gulp\r\n\r\n\r\n**Additional Notes**\r\nA workaround currently is instead to pass the components in as a config (say an array of components) and then refer to them that way. However it would be nice to be able to reference the instances of the components injected dynamically via ng-content\r\n\r\nI would also think that this may be related to https://github.com/angular/angular/issues/8580 in the sense that I would expect these two scenarios to work the same. The linked issues mentions that super class selectors should work (at least when the components aren't dynamically defined).\r\n"},"comment":{"url":"https://api.github.com/repos/angular/angular/issues/comments/260036001","html_url":"https://github.com/angular/angular/issues/12758#issuecomment-260036001","issue_url":"https://api.github.com/repos/angular/angular/issues/12758","id":260036001,"user":{"login":"tbosch","id":690815,"avatar_url":"https://avatars.githubusercontent.com/u/690815?v=3","gravatar_id":"","url":"https://api.github.com/users/tbosch","html_url":"https://github.com/tbosch","followers_url":"https://api.github.com/users/tbosch/followers","following_url":"https://api.github.com/users/tbosch/following{/other_user}","gists_url":"https://api.github.com/users/tbosch/gists{/gist_id}","starred_url":"https://api.github.com/users/tbosch/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tbosch/subscriptions","organizations_url":"https://api.github.com/users/tbosch/orgs","repos_url":"https://api.github.com/users/tbosch/repos","events_url":"https://api.github.com/users/tbosch/events{/privacy}","received_events_url":"https://api.github.com/users/tbosch/received_events","type":"User","site_admin":false},"created_at":"2016-11-11T19:28:08Z","updated_at":"2016-11-11T19:28:08Z","body":"You already have the following choices:\r\n\r\n- mark the element with a `#someName` and then query for `someName`\r\n- provide the component under a new token, and then query for that token. E.g.\r\n\r\n```\r\nconst MyToken = new OpaqueToken('myToken');\r\n\r\n@Component({\r\n  providers: [{provide: MyToken, useExisting: forwardRef(() => MyComponent)}]\r\n})\r\nclass MyComponent {}\r\n\r\n...\r\n\r\n`@ContentChildren(MyToken)`"}}
{"actor":{"display_login":"tbosch"}}