Determining Action on a Specific Selector Angular Directives - css

Question

Im trying to create a directive with two selectors in Angular 8. The logic is common between the two types of selectors except for one of the selectors should add an additional css class.
Heres what I'm attempting to do. To Call
<my-label type='error'>foo</my-label>
<my-label-circle type='error'>bar</my-label-circle>
I would like to reuse the my-label directive since the circle is just another css styling on it. Though i would not like to add it to my types input.
#Directive({
selector: '[my-label], [my-label-circle]'
});
class MyLabel {
#Input() type: LabelType = Default;
}
The HostBinding function on class will then just use the input to construct the element. How would I extend that functionality to also use the selector that was given. So for example on the HostBinding function would look like
if(selector == 'my-label-circle')
return 'label label-circle ${type}';
else
return 'label ${type}';
How do I get access to the selector used. Or is there a better way to look at it.

Answer 1

You can add one more optional Input parameter Shape and with the help of Renderer2 Service can add any css.
import { Directive, Renderer, ElementRef } from '#angular/core';
#Directive({
selector: '[my-label]'
})
export class ExploreRendererDirective {
private nativeElement : Node;
#Input() shape: 'default'| 'circle' = 'default';
#Input() type: LabelType = Default;
constructor( private renderer : Renderer2, private element : ElementRef )
{
this.nativeElement = element.nativeElement;
if (this.shape === 'circle') {
// Add css classes for circle.
this.renderer.setAttribute(nativeElement, 'class', 'your-class-here');
}
}
}
// for default
<label my-label type='error'>foo</label>
// for circle
<label my-label type='error' [shape]="'circle'">foo</label>
Or the second solution is two create two directives .
import { Directive, Renderer, ElementRef } from '#angular/core';
#Directive({
selector: '[my-label]'
})
export class ExploreRendererDirective {
private nativeElement : Node;
#Input() type: LabelType = Default;
constructor( private renderer : Renderer2, private element : ElementRef
)
{
this.nativeElement = element.nativeElement;
}
}
import { Directive, Renderer, ElementRef } from '#angular/core';
#Directive({
selector: '[label-circle]'
})
export class ExploreRendererDirective {
private nativeElement : Node;
#Input() type: LabelType = Default;
constructor( private renderer : Renderer2, private element : ElementRef
)
{
this.nativeElement = element.nativeElement;
// Add css classes for circle.
this.renderer.setAttribute(nativeElement, 'class', 'your-class-here');
}
}
// for default
<label my-label type='error' label-circle>foo</label>
Also you can use inheritance to enhance the solution.
Hope It will help you !!