Skip to content
A set of directives to simplify your workflow with BEM-markup in Angular applications.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist add ng-packagr Jul 6, 2018
.editorconfig initial commit for v2 Jan 2, 2017
.gitignore update gitignore & package.json Jan 3, 2017
LICENSE initial commit for v2 Jan 2, 2017 update readme Jul 3, 2018
package-lock.json add ng-packagr Jul 6, 2018
package.json add ng-packagr Jul 6, 2018
tsconfig.json upgrade to angular 6 & refactoring * 2 Jul 3, 2018


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-bem


Import this module to your app:

import { BemModule } from 'angular-bem';

  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 block="my-block" [mod]="{ modName: true }">
  <div elem="my-element" [mod]="{ modName: true, secondModName: true }"></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>

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';

  separators: ['__', '--', '-'], // el / mod / val separators
  modCase: 'kebab', // case of modifiers names
  ignoreValues: false // cast mod values to booleans
}); // method returns BemModule

It is recommended to set ignoreValues to true but it is set to false by default to support traditional bem-syntax.

Need to know

  • 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.


MIT © Andrey Yamanov

You can’t perform that action at this time.