{"action":"created","issue":{"url":"https://api.github.com/repos/angular/material/issues/6336","labels_url":"https://api.github.com/repos/angular/material/issues/6336/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/6336/comments","events_url":"https://api.github.com/repos/angular/material/issues/6336/events","html_url":"https://github.com/angular/material/issues/6336","id":122452664,"number":6336,"title":"angular material and ngupgrade","user":{"login":"david-gang","id":1292882,"avatar_url":"https://avatars.githubusercontent.com/u/1292882?v=3","gravatar_id":"","url":"https://api.github.com/users/david-gang","html_url":"https://github.com/david-gang","followers_url":"https://api.github.com/users/david-gang/followers","following_url":"https://api.github.com/users/david-gang/following{/other_user}","gists_url":"https://api.github.com/users/david-gang/gists{/gist_id}","starred_url":"https://api.github.com/users/david-gang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/david-gang/subscriptions","organizations_url":"https://api.github.com/users/david-gang/orgs","repos_url":"https://api.github.com/users/david-gang/repos","events_url":"https://api.github.com/users/david-gang/events{/privacy}","received_events_url":"https://api.github.com/users/david-gang/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/angular/material/labels/priority:%20high","name":"priority: high","color":"0052cc"}],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/angular/material/milestones/30","html_url":"https://github.com/angular/material/milestones/1.1.0","labels_url":"https://api.github.com/repos/angular/material/milestones/30/labels","id":1459999,"number":30,"title":"1.1.0","description":"","creator":{"login":"jelbourn","id":838736,"avatar_url":"https://avatars.githubusercontent.com/u/838736?v=3","gravatar_id":"","url":"https://api.github.com/users/jelbourn","html_url":"https://github.com/jelbourn","followers_url":"https://api.github.com/users/jelbourn/followers","following_url":"https://api.github.com/users/jelbourn/following{/other_user}","gists_url":"https://api.github.com/users/jelbourn/gists{/gist_id}","starred_url":"https://api.github.com/users/jelbourn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jelbourn/subscriptions","organizations_url":"https://api.github.com/users/jelbourn/orgs","repos_url":"https://api.github.com/users/jelbourn/repos","events_url":"https://api.github.com/users/jelbourn/events{/privacy}","received_events_url":"https://api.github.com/users/jelbourn/received_events","type":"User","site_admin":false},"open_issues":12,"closed_issues":0,"state":"open","created_at":"2015-12-14T19:21:59Z","updated_at":"2015-12-30T23:10:10Z","due_on":null,"closed_at":null},"comments":15,"created_at":"2015-12-16T08:31:46Z","updated_at":"2016-01-04T11:04:24Z","closed_at":null,"body":"As angular material is the leading ui library created by google, and angular2, the next generation of angular is now in beta it is important to be able to work with both of them.\r\n\r\nThere is the excellent ngupgrade library.\r\nI tried to upgrade the angular material components with the function: adapter.upgradeNg1Component(<name of the directive>)\r\n\r\nThese are the results.\r\n\r\nThe following fail:\r\n\r\n* mdAutocomplete - Uncaught Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 11-11 [\\] in expression [inputId || \\'fl-input-\\' + $mdAutocompleteCtrl.id]. \r\n* mdButton - Uncaught Error: Upgraded directive 'mdButton' does not support 'replace'.\r\n* mdCard - Uncaught Error: Directive 'mdCard' is not a component, it is missing template.\r\n* mdChip - Uncaught Error: Directive 'mdChip' is not a component, it is missing template.\r\n* mdChipRemove - Uncaught Error: Directive 'mdChipRemove' is not a component, it is missing template.\r\n* mdContent - Uncaught Error: Directive 'mdContent' is not a component, it is missing template.\r\n* mdDialog - Uncaught Error: Directive 'mdDialog' is not a component, it is missing template.\r\n* mdDivider - Uncaught Error: Directive 'mdDivider' is not a component, it is missing template.\r\n* mdFabActions - Uncaught Error: Directive 'mdFabActions' is not a component, it is missing template.\r\n* mdFabSpeedDial - Uncaught Error: Directive 'mdFabSpeedDial' is not a component, it is missing template.\r\n* mdFabTrigger - Uncaught Error: Directive 'mdFabTrigger' is not a component, it is missing template.\r\n* mdGridList - Uncaught Error: Directive 'mdGridList' is not a component, it is missing template.\r\n* mdHighlightText - Uncaught Error: Upgraded directive 'mdHighlightText' does not support 'terminal'.\r\n* mdIcon - Uncaught Error: Directive 'mdIcon' is not a component, it is missing template.\r\n* mdInkRipple - Uncaught Error: Directive 'mdInkRipple' is not a component, it is missing template.\r\n* mdInputContainer - Uncaught Error: Directive 'mdInputContainer' is not a component, it is missing template.\r\n* mdList -  Uncaught Error: Directive 'mdList' is not a component, it is missing template.\r\n* mdListItem - Uncaught Error: Directive 'mdListItem' is not a component, it is missing template.\r\n* mdMenu - Uncaught Error: Directive 'mdMenu' is not a component, it is missing template.\r\n* mdMenuBar - Uncaught Error: Directive 'mdMenuBar' is not a component, it is missing template.\r\n* mdRadioGroup - Uncaught Error: Directive 'mdRadioGroup' is not a component, it is missing template.\r\n* mdSelect - Uncaught Error: Directive 'mdSelect' is not a component, it is missing template.\r\n* mdSidenav - Uncaught Error: Directive 'mdSidenav' is not a component, it is missing template.\r\n* mdSidenavFocus - Uncaught Error: Directive 'mdSidenavFocus' is not a component, it is missing template.\r\n* mdSubheader - Uncaught Error: Upgraded directive 'mdSubheader' does not support 'replace'.\r\n* mdSwipeDown - Uncaught Error: Directive 'mdSwipeDown' is not a component, it is missing template.\r\n* mdSwipeLeft - Uncaught Error: Directive 'mdSwipeLeft' is not a component, it is missing template.\r\n* mdSwipeRight - Uncaught Error: Directive 'mdSwipeRight' is not a component, it is missing template.\r\n* mdSwipeUp - Uncaught Error: Directive 'mdSwipeUp' is not a component, it is missing template.\r\n* mdTab - Uncaught Error: Upgraded directive 'mdTab' does not support 'terminal'.\r\n* mdTabs - Uncaught Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 26-26 [\\] in expression [$mdTabsCtrl.maxTabWidth + \\'px\\'].\r\n* mdVirtualRepeat - Uncaught Error: Upgraded directive 'mdVirtualRepeat' does not support 'terminal'.\r\n* mdVirtualRepeatContainer \r\n\r\nThe following work:\r\n* mdCheckbox\r\n* mdChips\r\n* mdContactChips\r\n* mdDatepicker\r\n* mdFabToolbar\r\n* mdGridTile\r\n* mdProgressCircular\r\n* mdProgressLinear \r\n* mdRadioButton \r\n* mdSlider \r\n* mdSwitch \r\n* mdToolbar\r\n* mdTooltip \r\n* mdVirtualRepeatContainer \r\n\r\n\r\n\r\nWhen trying to upgrade the providers with  adapter.upgradeNg1Provider(<provider>):\r\n\r\nAll work (at least just upgrading)\r\n\r\n*$mdBottomSheet\r\n* $mdDateLocaleProvider \r\n* $mdDialog \r\n* $mdIcon\r\n* $mdIconProvider\r\n* $mdInkRipple\r\n* $mdMedia\r\n* $mdSidenav\r\n* $mdSticky\r\n* $mdToast\r\n\r\n\r\nI see a possible ways to fix this:\r\n* Changing ngupgrade. This is not possible as they are very strong against supporting these types of directives https://github.com/angular/angular/issues/4891 and they have there reasons\r\n* Changing angular material directives: This could be a possibility but there is a reason why these directives were created this way and they were created by smart people, so just to change it because of ngupgrade is odd\r\n* Creating a wrapper library where the directives are wrapped into other directives. I think most directives except the attribute directives could just be wrapped in other directives, especially with angular 1,5 which supports multiple transclusions\r\n\r\n(This is a rough idea not code that runs)\r\n```typescript\r\nclass MaterialUpgrade {\r\nconstructor(private adapter: UpgradeAdapter) {\r\n}\r\ngetMdIcon {\r\n    angular.module('material-upgrade').directive('mdIcon2',() => {\r\ntemplate:'<md-icon><md-icon> // parameters binding ...\r\n\r\n})\r\n\r\nreturn adapter.upgradeNg1Component('mdIcon2)\r\n}\r\n```\r\nThis has the downside that the name of the directives are different than the original ones, and attribute directives are not covered.\r\n\r\nSo I don't see any 100% solution.\r\n\r\nGetting an angular material 2 wouldbe a good solution when it comes out together with angular2 :-)\r\n\r\nI am sure you will find a smart solution here :+1: \r\n"},"comment":{"url":"https://api.github.com/repos/angular/material/issues/comments/168647205","html_url":"https://github.com/angular/material/issues/6336#issuecomment-168647205","issue_url":"https://api.github.com/repos/angular/material/issues/6336","id":168647205,"user":{"login":"bartlomiejborzucki","id":2742766,"avatar_url":"https://avatars.githubusercontent.com/u/2742766?v=3","gravatar_id":"","url":"https://api.github.com/users/bartlomiejborzucki","html_url":"https://github.com/bartlomiejborzucki","followers_url":"https://api.github.com/users/bartlomiejborzucki/followers","following_url":"https://api.github.com/users/bartlomiejborzucki/following{/other_user}","gists_url":"https://api.github.com/users/bartlomiejborzucki/gists{/gist_id}","starred_url":"https://api.github.com/users/bartlomiejborzucki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bartlomiejborzucki/subscriptions","organizations_url":"https://api.github.com/users/bartlomiejborzucki/orgs","repos_url":"https://api.github.com/users/bartlomiejborzucki/repos","events_url":"https://api.github.com/users/bartlomiejborzucki/events{/privacy}","received_events_url":"https://api.github.com/users/bartlomiejborzucki/received_events","type":"User","site_admin":false},"created_at":"2016-01-04T11:04:24Z","updated_at":"2016-01-04T11:04:24Z","body":"+1\r\n"}}