@ibyar/directives
v2.5.0
Published
Ibyar directives had the built-in directives for aurora project
Downloads
112
Maintainers
Readme
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
- [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
@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
}
<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: