2.5.0 • Published 8 months ago

@ibyar/directives v2.5.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

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

  • *if
  • for is same as ( forOf )
  • *forIn
  • *forAwait
  • switch and (case, *default)

Attributes Directives

  • *class
  • *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:

2.5.0

8 months ago

2.4.0

9 months ago

2.3.0

11 months ago

2.2.1

12 months ago

2.1.2

12 months ago

2.2.0

12 months ago

2.1.1

12 months ago

2.0.2

12 months ago

2.1.0

12 months ago

2.0.1

12 months ago

2.0.0

12 months ago

1.2.0

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.1.0

2 years ago

1.0.0

2 years ago

0.8.6

2 years ago

0.8.5

3 years ago

0.8.4

3 years ago

0.8.3

3 years ago

0.5.62

3 years ago

0.5.6

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.4

3 years ago

0.5.2

3 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.4.2

4 years ago

0.3.8

4 years ago

0.3.6

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago