{"action":"closed","issue":{"url":"https://api.github.com/repos/nstudio/xplat-issues/issues/3","repository_url":"https://api.github.com/repos/nstudio/xplat-issues","labels_url":"https://api.github.com/repos/nstudio/xplat-issues/issues/3/labels{/name}","comments_url":"https://api.github.com/repos/nstudio/xplat-issues/issues/3/comments","events_url":"https://api.github.com/repos/nstudio/xplat-issues/issues/3/events","html_url":"https://github.com/nstudio/xplat-issues/issues/3","id":316959582,"node_id":"MDU6SXNzdWUzMTY5NTk1ODI=","number":3,"title":"Approach to dealing with nested smart/ dumb components","user":{"login":"goelinsights","id":2880781,"node_id":"MDQ6VXNlcjI4ODA3ODE=","avatar_url":"https://avatars1.githubusercontent.com/u/2880781?v=4","gravatar_id":"","url":"https://api.github.com/users/goelinsights","html_url":"https://github.com/goelinsights","followers_url":"https://api.github.com/users/goelinsights/followers","following_url":"https://api.github.com/users/goelinsights/following{/other_user}","gists_url":"https://api.github.com/users/goelinsights/gists{/gist_id}","starred_url":"https://api.github.com/users/goelinsights/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/goelinsights/subscriptions","organizations_url":"https://api.github.com/users/goelinsights/orgs","repos_url":"https://api.github.com/users/goelinsights/repos","events_url":"https://api.github.com/users/goelinsights/events{/privacy}","received_events_url":"https://api.github.com/users/goelinsights/received_events","type":"User","site_admin":false},"labels":[{"id":893259149,"node_id":"MDU6TGFiZWw4OTMyNTkxNDk=","url":"https://api.github.com/repos/nstudio/xplat-issues/labels/question","name":"question","color":"d876e3","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-04-23T19:53:21Z","updated_at":"2018-07-22T22:47:51Z","closed_at":"2018-07-22T22:47:51Z","author_association":"NONE","body":"Trying to figure out the pattern for injecting nested smart and dumb components.  Is the solution to re-create them but extract the repeating function logic in the components into services?\r\n\r\nExample (gallery with a list of photos. Smart/dumb component pattern for gallery but not for photo using material design):\r\napp-gallery-page.component.html\r\n```\r\n\r\n<div [data]=\"gallery$ | async\">\r\n  <app-gallery [data]=\"gallery\">\r\n   <mat-grid-list>\r\n      <app-gallery-photo *ngFor=\"photo of gallery.photos\">\r\n        <mat-grid-tile> \r\n            ...\r\n        </mat-grid-tile>\r\n      </app-gallery-photo>\r\n   </mat-grid-list>\r\n  </app-gallery>\r\n</div>\r\n```\r\nIn the current angular smart/ dumb approach you use the html template for AppGalleryPage to drive the remainder of what's displayed downstream. Is there any way to reuse all of this (i.e., swapping out HTML templates using a conditional in templateUrl that would compile, etc, that would be smaller than stuffing all of the HTML for different versions with a flag?)\r\n\r\nIn this case, say material design only works in a SSR (web) and Admin (web) version of the app, but you'd want to reuse the logic in the smart component as a starting point for the AMP version but need a different HTML setup, is there a way to do this that would be better than shipping a bunch of conditional IF blocks, i.e.,?\r\n\r\n\r\napp-gallery-page.component.html\r\n```\r\n\r\n<div [data]=\"gallery$ | async\">\r\n  <app-gallery [data]=\"gallery\">\r\n   <mat-grid-list *ngIf=\"!!web\">\r\n      <app-gallery-photo *ngFor=\"photo of gallery.photos\" [admin]=\"adminStatus\"[version]=\"web\">\r\n        <mat-grid-tile> \r\n            ...stuff\r\n        </mat-grid-tile>\r\n       <app-gallery-photo-admin *ngIf=\"!!adminStatus\">\r\n       <app-gallery-photo-admin\r\n      </app-gallery-photo>\r\n   </mat-grid-list>\r\n    <amp-alternative-to-grid *ngIf=\"!web && !!amp\">\r\n        <app-gallery-photo *ngFor=\"photo of gallery.photos\" [admin]=\"false\" [version]=\"amp\">\r\n             ...stuff\r\n        </app-gallery-photo>\r\n    </amp-alternative-to-grid>\r\n\r\n  </app-gallery>\r\n</app-gallery-page>\r\n```\r\n\r\nSimilar question on if that means that we'd need to ship all the code related to the Admin version so things don't break, despite creating a much lighter non-admin app if we can avoid loading that code.\r\n"}}
{"actor":{"display_login":"NathanWalker"}}