A set of directives to simplify your workflow with BEM-markup in Angular (v2+) applications.
- Support for Angular v6+
- Refactoring
- Initial release for Angular v2+
$ npm install angular-bemImport this module to your app:
import { BemModule } from 'angular-bem';
@NgModule({
imports: [ BemModule ]
})
export class AppModule {}Now anywhere in your app you can use following syntax:
<div block="my-block" mod="modName">
<div elem="my-element" mod="modName secondModName"></div>
</div>or
<div block="my-block" [mod]="{ modName: true }">
<div elem="my-element" [mod]="{ modName: true, secondModName: true }"></div>
</div>Instead of true you can use any property from the component. Value true will add mod to the block (or elem) and false will remove it.
As a result of module's work the following markup may be produced:
<div class="my-block my-block--mod-name">
<div class="my-block__my-element my-block__my-element--mod-name my-block__my-element--second-mod-name"></div>
</div>If you use string or number as a value then this value will be used as addition for the mod class like my-block__my-element--mod-name-value.
You can change module behaviour with BemConfig:
import { BemModule } from 'angular-bem';
BemModule.config({
separators: ['__', '--', '-'], // el / mod / val separators
modCase: 'kebab', // case of modifiers names
ignoreValues: false // cast mod values to booleans
}); // method returns BemModuleIt is recommended to set ignoreValues to true but it is set to false by default to support traditional bem-syntax.
- These directives don't affect scope or other directives. So you can use them at ease wherever you want.
- You can only specify one element or block on single node. This limitation greatly simplify code of module and your app.
- There is no way to create an element of parent block inside nested block. It's not a component-way. So please avoid it.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent