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

How can I silence the warnings about "defaultProps will be removed"?

What's the simplest method for updating a single value within a nested JSON object using TypeScript?

Implementing the handling of multiple button events in a ListView through onclick function

When utilizing a custom hook that incorporates useContext, the updater function may fail to update as

Angular 2 has upgraded its Controller functionality by replacing it with Component

Encountering issues with Angular2 App when attempting to load simulated data using a Promise causes malfunction

Hiding the keypad on an Android device in an Ionic app when user input is detected

Utilize a single function across multiple React components to interact with the Redux store, promoting code reusability and

Leverage the power of npm to utilize various javascript libraries for

Creating dynamic captions in an Angular grid is an essential feature for enhancing the

Automatically fill in 'Edit' within an open Dialog using Angular Material

What is the best way to show mat-select choices above a dialog box?

Struggling with the Transition from Google Sign-In

Experimenting with Nuxtjs application using AVA and TypeScript

Initiating the node js service locally

Error: Loki cannot be used as a constructor

What is the process for setting up a resthook trigger in Zapier?

Updating an element within a for loop using Angular TypeScript

Tips for incorporating flow and TypeScript typings into an NPM module

Incorporating a JavaScript file into Angular