1.2.2 • Published 4 months ago
@ibyar/directives v1.2.2
Ibyar Directives
Ibyar directive had the built-in directives for aurora project.
Install
npm i --save @ibyar/directives
yarn add @ibyar/directives
Supported Directive
Structure Directives
- *if
- for is same as ( forOf )
- *forIn
- *forAwait
- switch and (case, *default)
Attributes Directives
- *class
- *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:
How Aurora translates shorthand
Lke Angular translates structural directive shorthand into the normal binding syntax as follows:
Shorthand examples
The following table provides shorthand examples:
1.2.0
4 months ago
1.2.2
4 months ago
1.2.1
4 months ago
1.1.0
8 months ago
1.0.0
1 year ago
0.8.6
1 year ago
0.8.5
1 year ago
0.8.4
1 year ago
0.8.3
1 year ago
0.8.2-dev.20221008
2 years ago
0.5.62
2 years ago
0.5.6
2 years ago
0.6.1
2 years ago
0.6.0
2 years ago
0.5.4
2 years ago
0.5.2
2 years ago
0.5.1
2 years ago
0.5.0
2 years ago
0.4.1
3 years ago
0.4.0
3 years ago
0.4.2
2 years ago
0.3.8
3 years ago
0.3.6
3 years ago
0.3.3
3 years ago
0.3.2
3 years ago
0.3.0
3 years ago
0.2.0
3 years ago