Angular - Add dynamic class at existing classes on host component

Question

I have this component and I need to add dynamic class at host component dynamically

@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}` : '';
  }

}

this works but if I try to add one class on my component this is override by the classes added during control.

Example, if I wtite:

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

class "custom-class-i-added" disappear...i want to create a system that add dynamic classes at the existing ones....Is there a way?

code-gorilla · Accepted Answer · 2020-10-07 16:24:11Z

2

This should do exactly what you want:

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

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

answered Oct 7, 2020 at 16:24

code-gorilla

2,4581 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chellappan வ · Accepted Answer · 2020-10-07 16:22:50Z

0

As a workaround You can use @Attribute decorator to get component class attribute and then concate with componentClass something like this:

component.ts

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

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

Working Example

answered Oct 7, 2020 at 16:22

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Collectives™ on Stack Overflow

Angular - Add dynamic class at existing classes on host component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related