diff --git a/src/lib/layers/layers.component.spec.ts b/src/lib/layers/layers.component.spec.ts
index f83bfd6..2904767 100644
--- a/src/lib/layers/layers.component.spec.ts
+++ b/src/lib/layers/layers.component.spec.ts
@@ -82,7 +82,6 @@ describe('FaLayersCompoennt', () => {
expect(queryByCss(fixture, '.fa-fw')).toBeTruthy();
});
-
it('should not include fixed width', () => {
@Component({
selector: 'fa-host',
@@ -101,5 +100,34 @@ describe('FaLayersCompoennt', () => {
fixture.detectChanges();
expect(queryByCss(fixture, '.fa-fw')).toBeFalsy();
});
+
+ it('should allow setting custom class on the host element', () => {
+ @Component({
+ selector: 'fa-host',
+ template: `
+
+
+
+
+
+
+ `
+ })
+ class HostComponent {
+ fixedWidth = true;
+ size = '4x';
+ }
+
+ const fixture = initTest(HostComponent);
+
+ fixture.detectChanges();
+ const elements = fixture.debugElement.queryAll(By.css('fa-layers'));
+ for (const element of elements) {
+ expect(element.nativeElement.className).toContain('custom-class');
+ expect(element.nativeElement.className).toContain('fa-layers');
+ expect(element.nativeElement.className).toContain('fa-fw');
+ expect(element.nativeElement.className).toContain('fa-4x');
+ }
+ });
});
diff --git a/src/lib/layers/layers.component.ts b/src/lib/layers/layers.component.ts
index aff10c0..58682b4 100644
--- a/src/lib/layers/layers.component.ts
+++ b/src/lib/layers/layers.component.ts
@@ -1,7 +1,5 @@
-import { Component, Input, SimpleChanges, OnChanges, OnInit, HostBinding } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
-import { faLayerClassList } from '../shared/utils/classlist.util';
-import { FaProps } from '../shared/models/props.model';
/**
* Fontawesome layers.
@@ -12,27 +10,29 @@ import { FaProps } from '../shared/models/props.model';
})
export class FaLayersComponent implements OnInit, OnChanges {
@Input() size?: SizeProp;
- @Input() fixedWidth?: boolean;
- @HostBinding('class')
- hostClass = 'fa-layers';
+ @Input()
+ @HostBinding('class.fa-fw')
+ fixedWidth?: boolean;
+
+ constructor(
+ private renderer: Renderer2,
+ private elementRef: ElementRef,
+ ) {
+ }
ngOnInit() {
- this.updateClasses();
+ this.renderer.addClass(this.elementRef.nativeElement, 'fa-layers');
}
ngOnChanges(changes: SimpleChanges) {
- if (changes) {
- this.updateClasses();
+ if ('size' in changes) {
+ if (changes.size.currentValue != null) {
+ this.renderer.addClass(this.elementRef.nativeElement, `fa-${changes.size.currentValue}`);
+ }
+ if (changes.size.previousValue != null) {
+ this.renderer.removeClass(this.elementRef.nativeElement, `fa-${changes.size.previousValue}`);
+ }
}
}
-
- updateClasses() {
- const classOpts: FaProps = {
- size: this.size || null,
- fixedWidth: this.fixedWidth,
- };
- this.hostClass = `fa-layers ${faLayerClassList(classOpts).join(' ')}`;
- }
-
}
diff --git a/src/lib/shared/utils/classlist.util.ts b/src/lib/shared/utils/classlist.util.ts
index bcc6e51..f3bfd9e 100644
--- a/src/lib/shared/utils/classlist.util.ts
+++ b/src/lib/shared/utils/classlist.util.ts
@@ -24,14 +24,3 @@ export const faClassList = (props: FaProps): string[] => {
.map(key => (classes[key] ? key : null))
.filter(key => key);
};
-
-export const faLayerClassList = (props: FaProps): string[] => {
- const classes = {
- 'fa-fw': props.fixedWidth,
- [`fa-${props.size}`]: props.size !== null,
- };
-
- return Object.keys(classes)
- .map(key => (classes[key] ? key : null))
- .filter(key => key);
-};