@finlexlabs/directives v0.0.2

FinlexDirectives (@finlexlabs/directives)

Library Name: finlex-directives

Package Name: @finlexlabs/directives

Repo Name: fx-ng-components

Steps to Build & Publish Library

Package Renaming

Go to ./src/finlex-directives/package.json Rename package name from finlex-directives to @finlexlabs/directives

Build

npm run build:directives

It will build finlex-directives using ng-packagr. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with npm run build:directives, go to the dist folder cd dist/finlex-directives and run npm publish.

FinlexTruncateWithLabelDirective

Background knowledge:

1. Read here an intro to Angular Directive

2. Read here an intro to Angular attribute directives

(TL;DR) Simple example to use FinlexTruncateWithLabelDirective:

module.ts

import { FinlexDirectivesModule } from '@finlexlabs/directives';

@NgModule({
	imports: [
		FinlexDirectivesModule
	]
)

export class ProductsModule { }

view.ts

<h1 truncateWithLabel="10">This is product title<h1>

FinlexTruncateWithLabelDirective class

1. This class is inheriting MatTooltip to show tooltip on hover.

2. Explanation of each type property value and other properties of FinlexTruncateWithLabelDirective will follow below.

<h1 truncateWithLabel="10">This is product title<h1>

FinlexTruncateWithLabelDirective properties:

Properties

• truncateWithLabel (type: number) -> The will be set when using this directive on any element.

• innerText (type: string) (scope: private) -> this will store the original text of the element. This property will be set on ngAfterViewInit lifecycle hook.

NOTE: all properties of MatTooltip Directive are also available and can be set on element. See example below.

<h1 truncateWithLabel="10" matTooltipClass="example-tooltip">This is product title<h1>

The FinlexTruncateWithLabelDirective constructor object takes properties as required by MatTooltip.

Functions

• truncate: (params: none) -> used to replace original text with truncated text and also set message property of MatTooltip.

FinlexPerfectScrollbarDirective