Angular components library. By Jorge Chaparro

Tags and classes for typography:

This is how tag H1 or class .h1 look like

This is how tag H2 or class .h2 look like

This is how tag H3 or class .h3 look like

This is how tag H4 or class .h4 look like

This is how tag H5 or class .h5 look like
This is how tag H6 or class .h6 look like

This is how class .text looks like

This is how class .small-text looks like

Components and widgets:

Buttons:

Characteristics:
  • Inputs: They expect 'buttonLabel' (for its label) and 'buttonClass' (to apply bootstrap styling such as colors)
  • Outputs: They have 'onClicked' output, which will emit when button is clicked.
  • They will be its container width

Input:

Characteristics:
  • Inputs: They expect 'placeholder' (for its placeholder)
  • Outputs: They have 'onValueChange' output, which will emit the current input value everytime it changes.
  • To get the input value, it is also possible using NgModel and reactive forms.
  • They will be its container width

Value input using its emitter:

Value input using ngModel:

Value input using reactive forms:

Dropdown:

Characteristics:
  • Inputs: They expect 'id' (should be unique in the application), 'placeholder' which will be shown if no option is being selected, 'options' (array of available options defined by DropdownOption interface)
  • Outputs: They have 'onOptionSelected' output, which will emit the selection defined by DropdownOption interface everytime it changes.
  • To get the dropdown value, it is also possible using NgModel and reactive forms. To show the label, it is necessary that variable attached to ngModel or controlForm has to be null.
  • No option will be selected by default. But it is possible to set it using ngModel or reactive forms.
  • They will be its container width

Dropdown value using its emitter:

Dropdown value using ngModel:

initialize option with ngModel: car4

Value input using reactive forms:

initialize option with reactive forms: car3

Paginator:

  • Inputs: Use 'currentPage' if you need to initialize your paginator in a specific number of page. 'enableNextPage' will allow paginator to click next page (it is true by default). 'position' will locate the paginator on the left, center, or right (allows values 'start', 'center', 'end')
  • Outputs: 'onPagination' will emit the current page everytime a pagination event is executed.
1
11
6

Loader:

Characteristics:
  • Inputs: Loader has 'showLoading' (boolean that indicates when to show or hide the loader), 'loaderMessage' (optional, if not defined, message will not be shown) and 'customImageUrl' (optional, if not defined, a default gif will be shown) inputs.
  • There is also a service that you can use to manipulate the loader visibility and message, in case that you are using the loader for an entire app and not just one component.

Alerts:

Characteristics:
  • Inputs: To use alert component, it is require to use 'id' input (it has to be unique in the application). Also there is 'sizeInCols' input, which will allow you to define alert width base on bootstrap classes
  • To show and hide the alert, use the AlertService's methods 'open' and 'close' (both of them expect ID as parameter)
×

This is alert-example-1

This is an example of how the alert will look like when sizeInCols is not defined

×

This is alert-example-2

This is the way to customize the alert width

×

This is alert-example-3

You can also use alertService.close(id) to close your modal by external components, such as buttons:

Jorge Chaparro CV:

Characteristics:
  • It is just author's CV.