{"action":"opened","issue":{"url":"https://api.github.com/repos/angular/angular/issues/7289","repository_url":"https://api.github.com/repos/angular/angular","labels_url":"https://api.github.com/repos/angular/angular/issues/7289/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/7289/comments","events_url":"https://api.github.com/repos/angular/angular/issues/7289/events","html_url":"https://github.com/angular/angular/issues/7289","id":136515965,"number":7289,"title":"Need a way for a component to add CSS classes to host non-destructively","user":{"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},"labels":[{"url":"https://api.github.com/repos/angular/angular/labels/state:%20Needs%20Design","name":"state: Needs Design","color":"006b75"},{"url":"https://api.github.com/repos/angular/angular/labels/type:%20feature","name":"type: feature","color":"EEEEEE"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-02-25T21:21:00Z","updated_at":"2016-02-25T21:21:00Z","closed_at":null,"body":"Say a user wants to add margin around a component:\r\n```html\r\n<cool-thing class=\"extra-margin\"> ... \r\n```\r\n\r\nBut the component itself has need to set a dynamic CSS class to the host element:\r\n```ts\r\n@Component({\r\n  ...\r\n  host: { '[class]': 'myCustomStyle' }\r\n})\r\nclass CoolThing {\r\n  myCustomStyle: string = figureOutWhichClassToUse();\r\n}\r\n```\r\n\r\nDoing this in the component will completely overwrite the `class` property, wiping away the user's classes.\r\n\r\nIn other situations, `NgClass` serves this purpose, but a component cannot apply a directive to its host element. Using the `[class.whatever]` syntax also doesn't solve this, as the `whatever` is the variable part. \r\n\r\n\r\n### Proposal\r\nEach component can, conceptually, have two distinct `class` lists: one that is from the user and one that comes from the component itself. These could be resolved independently with Angular rendering the union. Any time the user uses `ngClass` or the `[class.whatever]` syntax, it should override whatever is set to \"class\". \r\n\r\n\r\ncc @mhevery "}}