{"id":16178507,"url":"https://github.com/maciejwwojcik/styling-host-elements-in-angular","last_synced_at":"2026-05-01T19:35:04.046Z","repository":{"id":98217776,"uuid":"370083128","full_name":"MaciejWWojcik/styling-host-elements-in-angular","owner":"MaciejWWojcik","description":"Styling the host element is a crucial ability. Understanding that can completely change the way you develop reusable components, making their code clear and easier to maintain. This article will concentrate on techniques that use CSS styles and reduce Typescript logic.","archived":false,"fork":false,"pushed_at":"2021-06-13T13:07:48.000Z","size":157,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T11:36:50.953Z","etag":null,"topics":["angular","style","styling"],"latest_commit_sha":null,"homepage":"https://indepth.dev/posts/1469/techniques-to-style-component-host-element-in-angular","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MaciejWWojcik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-23T15:04:48.000Z","updated_at":"2023-06-29T12:40:03.000Z","dependencies_parsed_at":"2023-05-18T16:46:06.621Z","dependency_job_id":null,"html_url":"https://github.com/MaciejWWojcik/styling-host-elements-in-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MaciejWWojcik/styling-host-elements-in-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaciejWWojcik%2Fstyling-host-elements-in-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaciejWWojcik%2Fstyling-host-elements-in-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaciejWWojcik%2Fstyling-host-elements-in-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaciejWWojcik%2Fstyling-host-elements-in-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MaciejWWojcik","download_url":"https://codeload.github.com/MaciejWWojcik/styling-host-elements-in-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MaciejWWojcik%2Fstyling-host-elements-in-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32510809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","style","styling"],"created_at":"2024-10-10T05:13:53.902Z","updated_at":"2026-05-01T19:35:04.026Z","avatar_url":"https://github.com/MaciejWWojcik.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Styling Host Elements In Angular\n\nThis project includes example code used for this article https://indepth.dev/posts/1469/techniques-to-style-component-host-element-in-angular\n\n## Techniques to style component host element\n\nStyling the host element is a crucial ability. Understanding that can completely change the way you develop reusable components, making their code clear and easier to maintain. This article will concentrate on techniques that use CSS styles and reduce Typescript logic.\n\n\n## Techniques used\n\n- `HostBinding` decorator\n- `:host` pseudo-class selector\n- `:host-context` pseudo-class selector\n\n## Contact\n\nfeel free to contact me:\n\n- maciejwwojcik@gmail.com\n- @maciej_wwojcik on Twitter\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaciejwwojcik%2Fstyling-host-elements-in-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaciejwwojcik%2Fstyling-host-elements-in-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaciejwwojcik%2Fstyling-host-elements-in-angular/lists"}