Welcome to ngx-strings

String / Email operations.

String operations for angular projects

Import

Import the module on your app.module.ts file as follow.

import { NgxStringsModule } from "ngx-strings";

Then import the module as follow on imports array

NgxStringsModule

Using

After importing this library with npm install ngx-strings, go to the component which is declared under app.module.ts and integrate as below. use it on any component or else declare it on app.component.ts for enabling it global to application.

Integrations module

Email slicer

| Directive | Usage | | -------------- | --------------------------------------------------------------------------- | | ngxEmailSlicer | Slicing / protecting the email string to user view. (Validation included) | | Attributes | invalid as string for custom error message |

<span ngxEmailSlicer>
  manoj10101996gmail.com
</span> <br>
<span ngxEmailSlicer>
  [email protected]
</span> <br>
<span ngxEmailSlicer>
  [email protected]
</span> <br>
<span invalid="Error occured" ngxEmailSlicer>
  staikosoptonline.net
</span>
<br>
<span invalid="Error occured" ngxEmailSlicer>
  staik@osoptonlinenet
</span>

String lines limitation for all browsers - Responsive

| Directive | Usage | | ------------ | --------------------------------------------------------- | | ngxLineLimit | Limiting the lines for user view. (ellipsis) Responsive | | Attributes | lines as number |

<span lines="1" ngxLineLimit>
  lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>

String / Character replacer

| Directive | Usage | | ----------------- | -------------------------------------------------------------------- | | ngxStringReplacer | Replacing the existing words with new words. (ellipsis) Responsive | | Attributes | from as string to as string |

<span from="quis" to="HELLO" ngxStringReplacer>
  lorem quis dolor sit amet, consectetur quis elit, sed do quis tempor incididunt ut quis et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea quis consequat.
  Duis aute quis dolor in reprehenderit in voluptate velit quis cillum dolore eu fugiat nulla pariatur. Excepteur
  sint occaecat quis quis proident, quis in culpa qui quis deserunt mollit anim id est laborum.
</span>

String slicer - limiting the charaters

| Directive | Usage | | --------------- | -------------------------------------------------------------------------------- | | ngxStringSlicer | Slicing / Limiting the string using character count. (ellipsis) Non-Responsive | | Attributes | start as number end as number overflow as boolean (ellipsis) ... |

<span [start]="0" [end]="10" [overflow]="true" ngxStringSlicer>
  lorem ipsum dolor sit amet, consectetur adipiscing el
</span>

String case - Changing the case

| Directive | Usage | | -------------- | --------------------------------------------------------------- | | ngxInitialCase | Default string / paragraph. | | ngxTitleCase | Change the first character to uppercase on string / paragraph | | ngxUpperCase | Changing the entire string / paragraph to uppercase | | ngxLowerCase | Changing the entire string / paragraph to lowercase |

<span ngxInitialCase>
  lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</span>
<h3>Titlecase</h3>
<span ngxTitleCase>
  lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</span>
<h3>Uppercase</h3>
<span ngxUpperCase>
  lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</span>
<h3>Lowercase</h3>
<span ngxLowerCase>
  lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
</span>