src/app/core/common-components/border-highlight/border-highlight.directive.ts
A directive that applies a colored border to the left side of an element. The color can either be supplied directly via the primary input, i.e.
Example :<div appBorderHighlight="red">Highlight me!</div>or via a class with a name:
Example :<div appBorderHighlight borderClass="some-class">Highlight me!</div>
| Selector | [appBorderHighlight] |
| Standalone | true |
No results matching.
Properties |
|
Inputs |
HostBindings |
Accessors |
| appBorderHighlight | |
Type : string | undefined
|
|
| borderClass | |
Type : string | undefined
|
|
| class |
Type : string
|
Default value : this.CLASS_NAME
|
| style.border-color |
Type : string | boolean
|
Default value : "transparent"
|
| borderColor |
Type : string | boolean
|
Default value : "transparent"
|
Decorators :
@HostBinding('style.border-color')
|
| Readonly CLASS_NAME |
Type : string
|
Default value : "border-left-highlight"
|
| elementClass |
Type : unknown
|
Default value : this.CLASS_NAME
|
Decorators :
@HostBinding('class')
|
| color | ||||||
setcolor(value: string | undefined)
|
||||||
|
Parameters :
Returns :
void
|
| borderClass | ||||||
setborderClass(value: string | undefined)
|
||||||
|
Parameters :
Returns :
void
|
import { Directive, HostBinding, Input } from "@angular/core";
/**
* A directive that applies a colored border to the left side of an element.
* The color can either be supplied directly via the primary input, i.e.
* ```html
* <div appBorderHighlight="red">Highlight me!</div>
* ```
* or via a class with a name:
* ```html
* <div appBorderHighlight borderClass="some-class">Highlight me!</div>
* ```
*/
@Directive({
selector: "[appBorderHighlight]",
standalone: true,
})
export class BorderHighlightDirective {
readonly CLASS_NAME = "border-left-highlight";
@HostBinding("class")
elementClass = this.CLASS_NAME;
@HostBinding("style.border-color")
borderColor: string | boolean = "transparent";
@Input("appBorderHighlight") set color(value: string | undefined) {
if (value) {
this.borderColor = value;
this.elementClass = this.CLASS_NAME;
}
}
@Input() set borderClass(value: string | undefined) {
if (value) {
this.elementClass = this.CLASS_NAME + " " + value;
this.borderColor = false;
}
}
}