Angular HTML Helpers
Installation
To install the module use the following commands:
$ yarn add @pascaliske/html-helpers
Usage
CSS modifier classes with namespace
In your TS
code:
import { modifiers } from '@pascaliske/html-helpers'
@Component({
selector: 'cmp-section',
templateUrl: './section.component.html',
styleUrls: ['./section.component.scss'],
})
export class SectionComponent implements OnInit {
public classes(namespace: string): string {
return modifiers(namespace, {
foo: true,
bar: false,
baz: true,
})
}
}
In your HTML
code:
<!-- className: "cmp-section cmp-section--foo cmp-section--baz" -->
<div [className]="classes('cmp-section')"></div>
CSS modifier classes without namespace
In your TS
code:
import { modifiers } from '@pascaliske/html-helpers'
@Component({
selector: 'cmp-section',
templateUrl: './section.component.html',
styleUrls: ['./section.component.scss'],
})
export class SectionComponent implements OnInit {
public get classes(): string {
return modifiers({
foo: true,
bar: false,
baz: true,
})
}
}
In your HTML
code:
<!-- className: foo baz -->
<div [className]="classes"></div>
License
MIT © Pascal Iske