profile-lib-components
Installation
To install this library, run:
$ npm install @profiless/profile-lib-components --save
Consuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
$ npm install @profiless/profile-lib-components
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the whole library or just the module component you want to use.
import { ProfileLibComponentsModule } from '@profiless/profile-lib-components';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify the library as an import
ProfileLibComponentsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once your library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use your library component in app.component.html -->
<h1>
{{title}}
</h1>
<pr-fa-input id="email-field" icon="envelope">
<input type="email" name="email" placeholder="Email" autocomplete="off" class="test-class">
</pr-fa-input>
Components, directives and pipes
See the examples in the playground.
PrInput
Click here to see a usage example.
Add icons to your inputs in order to help the user experience. You can use FontAwesome icons or Material Design Icons. Remember to import to your index.html the styles for the icons:
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
string
icon: Provide the name of the Font Awesome icon or the Material Design icon.
PrTabPanel
Click here to see a usage example.
Tab Panel component which with Content Projection you prject the content with the PrTab. You can use the default tabs indicating in each tab (PrTab) the title or use your custom tabs via input with a Template Reference.
TemplateRef<any> (optional)
headerTemplate: Provide your custom tabs with a Template Reference.
PrTab
string (optional)
title: Provide the title of the tab.
boolean (optional)
selected: Inicate which tab is selected.
PrModal
Click here to see a usage example.
Modal which you can use with Content Projection or passing via input a Template Reference.
TemplateRef<any> (optional)
body: Provide a Template Reference of the body of the modal.
any (optional)
context: Provide params for the modal.
boolean (optional)
hideOnEsc: Enable hide modal when Esc key is pressed.
boolean (optional)
hideOnClickOutside: Enable hide modal when the user clicks outside the modal's content.
PrModalOpenOnClick
Structural directive.
ElementRef | Array<ElementRef>
prModalOpenOnClick: Adds a click event to the element references that are passed.
PrMask
Click here to see a usage example.
Directive in order to mask an input for example for a telefone number.
PrSortBy
Click here to see a usage example.
Sort and array by a key.
Array<object>
array: Provide the array to sort.
string
value: Provide the key of the array which you want to be sorted.
boolean (optional)
descending: Switch order of the array.
PrFilter
Click here to see a usage example.
Filters an array.
Array<object>
array: Provide the array to filter.
string
input: Provide the stream to filter.
string | Array<string> (optional)
searchableList: Provide a key or an array of keys to filter.
string | Array<string> (optional)
avoidKeys: Provide a key or an array of keys to avoid filter for that key. The searchableList must be null.
PrTable
Click here to see a usage example.
Creates a table.
Array<object>
data: The data of the table.
boolean (optional)
showSelect: The default value is true. Shows a select input for each item of the table.
Array<Button> (optional)
footerButtons: Provide buttons with the interface of an id
and text
.
string (optional)
title: Title of the table.
number (optional, dynamic)
itemsPerPage: Sets the table to be a paginable table. It's set dynamically.
string (optional)
footerPageText: The default value is page
.
string | Array<string> (optional)
avoidKeyFilter: Key or keys to avoid filtering.
string (optional)
search: Filters by the string passed.
string
noResultsText: The default value is No results
EventEmitter<any> (optional)
linkClicked: Emits the clicked item.
EventEmitter<any> (optional)
btnClicked: Emits an object with the id of the button clicked and an array of the selected items.
PrCol
Columns of the table component.
string
id: The id must be the name of the key of the items which belongs to this column.
string (optional)
header: The header text of the column.
boolean (optional)
isLink: Sets a link which fires the linkClicked EventEmitter.
boolean
sorteable: Sets the column to be sorteable.
boolean
showHeaders: The default value is true.
boolean
allRows: Set all checkboxes.
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
To see in action the components run the playground:
$ npm run playground
License
MIT © Alex Carrasco Salvador