# @ibyar/directives

> Ibyar directives had the built-in directives for aurora project

Latest version **4.0.0** (published 2025-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ibyar/directives
pnpm add @ibyar/directives
yarn add @ibyar/directives
bun add @ibyar/directives
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2025-08-10 |
| First published | 2021-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 80 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | The Ibyar Authors |
| Maintainers | salem.ebo |
| Keywords | aurora, ibyar, directives, typescript, front-end |

## Links

- npm: https://www.npmjs.com/package/@ibyar/directives
- Repository: https://github.com/ibyar/aurora
- Homepage: https://github.com/ibyar/aurora/tree/dev/packages/directives
- Issues: https://github.com/ibyar/aurora/issues
- npm.io page: https://npm.io/package/@ibyar/directives

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1
- [@ibyar/core](https://npm.io/package/@ibyar/core.md) ^4.0.0
- [@ibyar/elements](https://npm.io/package/@ibyar/elements.md) ^4.0.0
- [@ibyar/platform](https://npm.io/package/@ibyar/platform.md) ^4.0.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2025-08-10
- 3.1.1 — 2025-01-23
- 3.0.0 — 2025-01-11
- 2.5.0 — 2024-11-02
- 2.4.0 — 2024-09-29
- 2.3.0 — 2024-08-02
- 2.2.1 — 2024-07-26
- 2.2.0 — 2024-07-25
- 2.1.2 — 2024-07-20
- 2.1.1 — 2024-07-20
- 2.1.0 — 2024-07-20
- 2.0.2 — 2024-07-14
- 2.0.1 — 2024-07-13
- 2.0.0 — 2024-07-11
- 1.2.2 — 2024-01-15
- … 26 more at https://npm.io/package/@ibyar/directives/versions

## README

# Ibyar Directives

[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![LICENSE][license-img]][license-url]
[![lerna][lerna-img]][lerna-url]
![GitHub contributors][contributors]

[npm-image]: https://img.shields.io/npm/v/@ibyar/directives.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url]: https://npmjs.org/package/@ibyar/directives
[downloads-image]: https://img.shields.io/npm/dt/@ibyar/directives
[downloads-url]: https://npmjs.org/package/@ibyar/directives
[license-img]: https://img.shields.io/github/license/ibyar/aurora
[license-url]: https://github.com/ibyar/aurora/blob/master/LICENSE
[lerna-img]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
[lerna-url]: https://lerna.js.org/
[contributors]: https://img.shields.io/github/contributors/ibyar/aurora

Ibyar directive had the built-in directives for aurora project.

## `Install`

``` bash
npm i --save @ibyar/directives
```

``` bash
yarn add @ibyar/directives
```


## Supported Directive

#### Structure Directives
- [x] *if
- [x] *for is same as ( *forOf )
- [x] *forIn
- [x] *forAwait		
- [x] *switch and (*case, *default)


#### Attributes Directives
- [x] *class
- [x] *style


## How to use Structure Directives:


### Control Flow Syntax

```html
@if(x > 50) {
	x: is {{x}}
} else {
	x: is less than 50
}

@if(x > 50) {
	x: is {{x}}
} else if( x > 30 ){
	x: is more than 30
}

@for(let item of [1,2,3,4,5,6,7,8]) {
	<div>item is: {{item}}</div>
}

@for(let item of []) {
	<div>item is: {{item}}</div>
} @empty {
	array is empty
}

```

```html
<div *if="x > 50"> x: is {{x}} </div>

<div *if="x > 50; else otherTemplate"> x: is {{x}} </div>
<template #otherTemplate> X is more than 50</template>

<div *if="x > 50; then thenTemplate; else elseTemplate"> will be ignored </div>
<template #thenTemplate> x: is {{x}}</template>
<template #elseTemplate> X is less than 50</template>


<div class="col-3" *forOf="let user of people">
	<p>Name: <span>{{user.name}}</span></p>
	<p>Age: <span>{{user.age}}</span></p>
</div>
<div class="col-3" *for="let user of people">
	<p>Name: <span>{{user.name}}</span></p>
	<p>Age: <span>{{user.age}}</span></p>
</div>

<div class="col-3" *forOf let-user  [of]="people">
	<p>Name: <span>{{user.name}}</span></p>
	<p>Age: <span>{{user.age}}</span></p>
</div>

<div class="col-3" *forIn="let key in person1">
	<p>Key: <span>{{key}}</span></p>
	<p>Value: <span>{{person1[key]}}</span></p>
</div>

<div class="col-3" *forIn let-key [in]="person1">
	<p>Key: <span>{{key}}</span></p>
	<p>Value: <span>{{person1[key]}}</span></p>
</div>

<div class="col-3" *forAwait="let num of asyncIterable">
	<p>num = <span>{{num}}</span></p>
</div>

<div class="col-3" *forAwait let-num [of]="asyncIterable">
	<p>num = <span>{{num}}</span></p>
</div>

<div class="col-3" *switch="1">
	<div *case="1">One</div>
	<div *case="2">Two</div>
	<div *case="3">Three</div>
	<div *default>default: Zero</div>
</div>

```

## How to use Attributes Directives:

```html
<div class="row">
	<div [class]="$propertyFromModel"></div>
	<div class="col-{{width}}"></div>
	<div [class]="'col-6'"></div>
	<div [class]="['col-4', $textColor_fromModel, 'text-center']"></div>
</div>
...
<tr [class]="{'table-info': isEven, 'table-danger': isOdd}">
	...
</tr>


<div [style]="'color: var(' + currentColor + ');'">...</div>
<div [style]="`color: var(${currentColor});`">...</div>
<div [style]="{color: 'var(' + currentColor + ')'}">...</div>
<div [style.color]="'var(' + currentColor + ')'"><div>

```


 -- `Directives now support input binding (one way/two way/ output=event)`


## Structural directive syntax reference

When you write your own structural directives, use the following syntax:

```
*:prefix="( :let | :expression ) (';' | ',')? ( :let | :as | :keyExp )*"
```

The following tables describe each portion of the structural directive grammar:

<table>

  <tr>
    <td><code>prefix</code></td>
    <td>HTML attribute key</td>
  </tr>
  <tr>
    <td><code>key</code></td>
    <td>HTML attribute key</td>
  </tr>
  <tr>
    <td><code>local</code></td>
    <td>local variable name used in the template</td>
  </tr>
  <tr>
    <td><code>export</code></td>
    <td>value exported by the directive under a given name</td>
  </tr>
  <tr>
    <td><code>expression</code></td>
    <td>standard Aurora expression</td>
  </tr>
</table>

<table>
  <tr>
    <th></th>
  </tr>
  <tr>
    <td colspan="3"><code>keyExp = :key ":"? :expression ("as" :local)? ";"? </code></td>
  </tr>
  <tr>
    <td colspan="3"><code>let = "let" | "const" | "var" :local "=" :export ";"?</code></td>
  </tr>
  <tr>
    <td colspan="3"><code>as = :export "as" :local ";"?</code></td>
  </tr>
</table>

### How Aurora translates shorthand

Lke Angular translates structural directive shorthand into the normal binding syntax as follows:

<table>
  <tr>
    <th>Shorthand</th>
    <th>Translation</th>
  </tr>
  <tr>
    <td><code>key</code> and naked <code>expression</code></td>
    <td><code>[key]="expression"</code>
    <br />
    Notice that the <code>prefix</code>
    is <code>not</code> added to the <code>key</code>
    </td>
  </tr>
  <tr>
    <td><code>let</code></td>
    <td><code>[export]="local"</code></td>
  </tr>
</table>

### Shorthand examples

The following table provides shorthand examples:

<table>
  <tr>
    <th>Shorthand</th>
    <th>How Aurora interprets the syntax</th>
  </tr>
  <tr>
    <td><code>*for="let item of [1,2,3]"</code></td>
    <td><code>&lt;template *for [item]="$implicit [of]="[1,2,3]"&gt;</code></td>
  </tr>
  <tr>
    <td><code>*forOf="let item of [1,2,3] as items; trackBy: myTrack; index as i"</code></td>
    <td><code>&lt;template *forOf [item]="$implicit" [of]="[1,2,3]" [items]="of" [trackBy]="myTrack" [i]="index"&gt;</code>
    </td>
  </tr>
  <tr>
    <td><code>*if="exp"</code></td>
    <td><code>&lt;template [if]="exp"&gt;</code></td>
  </tr>
  <tr>
    <td><code>*if="exp as value"</code></td>
    <td><code>&lt;template [if]="exp" [value]="if"&gt;</code></td>
  </tr>
</table>

<hr>

---
_Source: https://npm.io/package/@ibyar/directives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._