Enhance your Angular app by dynamically adding classes to existing classes on a host component

Question

Enhance your Angular app by dynamically adding classes to existing classes on a host component

How can I dynamically add a class to the host component of this angular component?

@Component({
 selector: 'test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss'],
 encapsulation: ViewEncapsulation.None
})

export class TestComponent implements OnInit {

  @HostBinding('className') componentClass: string;

  @Input() name: string;

  constructor() {}

  ngOnInit(): void {
   this.componentClass = this.name ? `test-icons test-icons-${this.name}` : '';
  }

}

The current setup overrides any additional classes I try to add. For example, if I include:

 <test-component class="custom-class-i-added" [name]="'icon']></test-component>

The "custom-class-i-added" disappears. Is there a way to dynamically add classes without overriding the existing ones?

angular typescript

Answer 1

Answer №1

Here's the solution you've been looking for:

export class HelloComponent implements OnInit  {
  @Input() name: string;
  
  // Utilizing input to merge the class passed from parent with classes defined in component.
  @HostBinding('class') @Input('class') classList: string = '';

  ngOnInit() {
    this.classList = `${this.classList} test-icons test-icons-${this.name}`;
  }
}

Answer 2

Here's the solution you've been looking for:

export class HelloComponent implements OnInit  {
  @Input() name: string;
  
  // Utilizing input to merge the class passed from parent with classes defined in component.
  @HostBinding('class') @Input('class') classList: string = '';

  ngOnInit() {
    this.classList = `${this.classList} test-icons test-icons-${this.name}`;
  }
}

Answer 3

Answer №2

One method to address this issue is by utilizing the @Attribute decorator in order to access the component's class attribute and then concatenate it with componentClass as shown below:

component.ts

constructor(@Attribute('class') private hostClass: string){}

  ngOnInit(): void {
   this.componentClass = this.name ? `${this.hostClass} test-icons test-icons-${this.name}` : this.hostClass;
  }

See a Demo Here

Answer 4

One method to address this issue is by utilizing the @Attribute decorator in order to access the component's class attribute and then concatenate it with componentClass as shown below:

component.ts

constructor(@Attribute('class') private hostClass: string){}

  ngOnInit(): void {
   this.componentClass = this.name ? `${this.hostClass} test-icons test-icons-${this.name}` : this.hostClass;
  }

See a Demo Here

Enhance your Angular app by dynamically adding classes to existing classes on a host component

Answer №1

Answer №2

Similar questions

Issue with file uploading in Angular 9 as the uploaded file is not being added to the

When uploading from Angular 2, PHP fails to populate the $_POST and $_FILES variables

Angular Image Cropping: A How-To Guide

The latest version of Angular, Angular 16, brings along its own set of challenges

Experiencing an array of issues while attempting to convert my HTTP request into an

Develop a versatile factory using Typescript

Here is a guide on sorting through data within an array of objects using React.js and Typescript

An error with code -4058 is preventing the installation of npm packages when running the 'npm install' command after using 'ng new'

Using Handlebars.js with Angular CLI versions 6 and above: A Step-by-Step Guide

When performing an arithmetic operation, the right operand must be a data type of 'any', 'number', 'bigint', or an enumeration type

Angular application triggering multiple subscribe method calls upon a link click event

When executing prisma generate, an error of TypeError is thrown stating that the collection is

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

Angular 6 triggers NavigationCancel event when encountering valid guards

How can I configure Angular to redirect to an error page whenever an error is encountered in an HTTP API request?

Running Angular/Rxjs store (ngrx) calls synchronously

Having difficulty passing a function as a parameter from a NextJS component

How can you merge arrays in Angular based on their unique names?

Tips for Fixing Error: "We received a visitor for node type TSSatisfiesExpression that is not recognized as a valid type."

I am looking to customize the mask input in my angular 7 application so that it allows either a "-" or a digit as the first character, with all subsequent characters being digits. How can I make this modification?