@taldor-ltd/tld-angular-fnd NPM

Taldor Angular Fnd

Shared Angular functionality to all Taldor developers.

Install

npm install @taldor-ltd/tld-angular-fnd

Extensions

Usage

Add TldExtensionsModule to your module's 'imports'

Array extension

method	parameters	return value	description
containsElements()	-	boolean	Check if there are elements in the array
any	predicate	bollean	Check if there are elements in the array according to predicate conditions
firstOrDefault	predicate	object or null	Returns the first array's element according to predicate conditions. Returns `null` if none found
first	predicate	object	Returns the first array's element according to predicate conditions. Throws `error` if none found
sum	predicate	number	Returns the sum of the property selected in the predicate
where	predicate	object[]	Rturns all the elements according to predicate conditions
min	predicate	number	Returns the minimum value of the property selected in the predicate
max	predicate	number	Returns the maximum value of the property selected in the predicate
orderBy	predicate	object[]	Returns array order ascending by the property selected in the predicate
orderByDesc	predicate	object[]	Returns array order descending by the property selected in the predicate
average	predicate	number	Returns the average value of the property selected in the predicate
select	predicate	object[]	Returns array of all elements property selected in the predicate
groupBy	predicate	object[]	Returns array of [key, values[]] according to the property selected in the predicate
count	predicate	number	Returns the number of elements according to predicate conditions
take	number	object[]	Returns the top X elements of the array
split	predicate	[object[], object[]]	Returns array of elements according to predicate conditions and elements NOT according to predicate conditions

Function extension

method	parameters	description
applyDelayed	(this, args[])	Invokes the function with `0` timeout delay
applyDelayedTimeout	(this,timeOutInMilliseconds args[])	Invokes the function with `timeOutInMilliseconds` timeout delay

Directives

Usage

Add TldNgFormsModule to your module's imports

This module includes:

Israeli Id Validator

Forms Validator for checking input of TZ

Usage

Add tldIsraeliId attribute to your <input> - Check always

	```` html
	<input tldIsraeliId>
	````
	- Conditional check
	```` html
	<input [tldIsraeliId]="someCondition === true">
	````

Check errors of input's ngModel object for israeliId error

<input placeholder="מספר זהות" name="tz" #tz="ngModel" [(ngModel)]="myTz" tldIsraeliId>
<span *ngIf="(tz.errors && tz.errors.israeliId) && (tz.dirty || tz.touched)">ת.ז. לא תקינה</span>

Email address Validator

Forms Validator for checking input of Email address

Usage

Add tldEmail attribute to your <input>
```
	```` html
	<input tldEmail>
	````
```
Check errors of input's ngModel object for email error

<input placeholder="Email Address" name="email" #email="ngModel" [(ngModel)]="myEmail" tldEmail>
<span *ngIf="(email.errors && email.errors.email) && (email.dirty || email.touched)">Invalid Email address</span>

CSS class snippets:

Usage

Configure at the styles section, as follow.

"styles": [
  //...
  "node_modules/@taldor-ltd/tld-angular-fnd/src/resources/tld-snippets.css",
  //...
],

Here are some examples for what each css snippet file contains. For almost each example there are many more options with the same naming conventions.

align

ar (text-align: right !important;)
va-middle (vertical-align: middle !important;)
va-middle-children (vertical-align: middle !important;)
j-c-c (justify-content: center !important;)

border

bl-1 border-left: 1px solid black !important;
b (order-black border: 1px solid black !important;)
n (o-border-t border-top: unset !important;)

display

dn (display: none !important;)
db (display: block !important;)
dif (display: inline-flex !important;)
v-h (visibility: hidden;)

flex system (can replace bootstrap grid-system, might need some work)

flex-container (same as bootstrap row)
flex-X (X = the size in percent of the column)

fonts & text

italic (font-style: italic !important;)
font-X (X = font size in pixels (limited to: 30, 36, 48) + lg (size = large))
truncate-text ({ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; })
text-decoration-none (text-decoration: none !important;)