{"id":1195,"date":"2021-06-08T09:17:32","date_gmt":"2021-06-08T07:17:32","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1195"},"modified":"2022-06-08T17:54:40","modified_gmt":"2022-06-08T15:54:40","slug":"how-to-add-class-to-your-host-element-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2021\/06\/08\/how-to-add-class-to-your-host-element-in-angular\/","title":{"rendered":"How to add class to your host element in Angular"},"content":{"rendered":"\n

There are different ways to solve that, depending of the situation or what we want to achieve. <\/p>\n\n\n\n

Solution A : (Static class)<\/span><\/em><\/h5>\n\n\n\n
@Component({\n   selector: 'app-component',\n   template: '<ng-content><\/ng-content>',\n\n})\nexport class App implements OnInit {\n  constructor(private cdRef:ChangeDetectorRef) {}\n  \n  someField: boolean = false;\n\n  @HostBinding('class.someClass') someField: boolean = false;\n\n  ngOnInit() {\n    this.someField = true; \/\/ set class `someClass` on `<app-component>`\n    \/\/this.cdRef.detectChanges(); \n  }\n}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Solution B :  (dynamic class)<\/em><\/span><\/h5>\n\n\n\n
If you want to add a dynamic class to your host element, you may combine your HostBinding<\/code> with a getter as<\/p>\n\n\n\n
@HostBinding('class') get class() {\n    return aComponentVariable \/\/ the name of the class. \n}<\/code><\/pre>\n\n\n\n
Example:<\/h5>\n\n\n\n
HTML: <\/em> app.component.html<\/em><\/span><\/p>\n\n\n\n
<h3>Pick the color of the text component<\/h3>\n<input type=\"radio\" name=\"headingColor\" [value]=\"'Blue'\" id=\"Blue\" [(ngModel)]=\"headingColor\"><label for=\"Blue\">Blue<\/label>\n<input type=\"radio\" name=\"headingColor\" [value]=\"'Red'\" id=\"Red\" [(ngModel)]=\"headingColor\"><label for=\"Red\">Red<\/label>\n<input type=\"radio\" name=\"headingColor\" [value]=\"'Green'\" id=\"Green\" [(ngModel)]=\"headingColor\"><label for=\"Green\">Green<\/label><\/code><\/pre>\n\n\n\n
TYPESCRIPT:<\/em> app.component.<\/em>ts<\/span><\/p>\n\n\n\n
import { Component, HostBinding } from '@angular\/core';\n\n@Component({\n  selector: 'my-app',\n  templateUrl: '.\/app.component.html',\n  styleUrls: [ '.\/app.component.css' ]\n})\nexport class AppComponent  {\n  headingColor: string = 'Black';\n\n  @HostBinding('class') get HeadingClass() {\n    return this.headingColor\n  }\n}<\/code><\/pre>\n\n\n\n
STYLESHEET:<\/em>  app.component.<\/em>css<\/span><\/p>\n\n\n\n
:host.Black{\n  color: Black;\n}\n\n:host.Green {color: Green}\n\n:host.Blue {color: Blue}\n\n:host.Red {color: Red}<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Solution C :  (Use of ElementRef property)<\/span><\/em><\/h5>\n\n\n\n
import {Component, OnInit, ElementRef} from '@angular\/core';\n\n@Component({\n  selector: 'my-app',\n  template: '<ng-content><\/ng-content>'\n})\nexport class AppComponent implements OnInit { \n\n private currentIconClass: string;\nget hostElement(): HTMLElement {\n    return this._elementRef.nativeElement;\n  }\n  constructor(public _elementRef: ElementRef<HTMLElement>) {\n  }\n ngOnInit() {\n    this.setIconClass(this.hostElement.textContent);\n  }\n  private setIconClass(iconClass: string): void {\n\n    if (!iconClass) {\n      console.warn('Missing iconClass!');\n      return;\n    }\n\n    this.clearElement();\n\n    if (this.currentIconClass) {\n      this.hostElement.classList.remove(this.currentIconClass);\n    }\n\n    this.currentIconClass = iconClass;\n\n    this.hostElement.classList.add(this.currentIconClass);\n  }\n   private clearElement(): void {\n    this.hostElement.textContent = undefined;\n  }\n}<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
There are different ways to solve that, depending of the situation or what we want to achieve. Solution A : (Static class) Solution B : (dynamic class) If you want to add a dynamic class to your host element, you may combine your HostBinding with a getter as Example: HTML: app.component.html TYPESCRIPT: app.component.ts STYLESHEET: app.component.css Solution C […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,83],"tags":[331,330,333,334,332],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1195"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1195"}],"version-history":[{"count":4,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1195\/revisions"}],"predecessor-version":[{"id":1968,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1195\/revisions\/1968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}