pascaliske / html-helpers

Collection of helper functions for Angular templates.

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