@ibyar/directives
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Ibyar Directives

NPM Version NPM Downloads LICENSE lerna GitHub contributors

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

Install

npm i --save @ibyar/directives
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:

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

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

prefix HTML attribute key
key HTML attribute key
local local variable name used in the template
export value exported by the directive under a given name
expression standard Aurora expression
keyExp = :key ":"? :expression ("as" :local)? ";"?
let = "let" | "const" | "var" :local "=" :export ";"?
as = :export "as" :local ";"?

How Aurora translates shorthand

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

Shorthand Translation
key and naked expression [key]="expression"
Notice that the prefix is not added to the key
let [export]="local"

Shorthand examples

The following table provides shorthand examples:

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

Package Sidebar

Install

npm i @ibyar/directives

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

80.6 kB

Total Files

27

Last publish

Collaborators

  • salem.ebo