NgTextflow
A small angular component to dynamically create a set of fixed size text nodes based on the input content text.
Installation
$ npm install --save ng-textflow
Then we import the module.
import { NgTextflowModule } from 'ng-textflow';
and we can use NodeComponent and CreateFlowService in our code.
import { NodeComponent, CreateFlowService } from 'ng-textflow';
Usage
The component requires a styles object which should define a fixed size container. This style is applied to all of the dynamically create nodes. When the content text will not fit in the defined container, NgTextflow will dynamically create new nodes and continue to fill them with text until all the content is displayed.
The image below shows an example of the generated nodes. The nodes on the left have simple inline styling with fixed width and height. The nodes on the right have the same content, but are overlay on top of each other using the [isOverlaid]
input. This can be useful for page-flip applications.
The style object can be passed in, as below, to achieve the appearance of the nodes on the left. The style object must have the three elements, contentStyle
, headingStyle
, and numberStyle
.
private nodeStyles = {
contentStyle: {
'height': '9em',
'width': '200px',
'fontFamily': '"Vollkorn", "serif"',
'fontSize': '11px',
'wordSpacing': '2px',
'textAlign': 'justify',
'color': '#444',
'lineHeight': '1.1em',
'leftAlignLast': 'justified'
},
headingStyle: {
'fontFamily': '"Vollkorn", "serif"',
'padding-bottom': '2px',
'font-size': '14px',
'height': '25px'
},
numberStyle: {
'font-size': '10px',
'fontFamily': '"Vollkorn", "serif"',
}
};
The following example shows the use of the component where style object and text content is passed in.
<ng-textflow
[nodeStyles]="nodeStyles"
[content]="content"
[firstOnTop]="true"
[showPageNumbers]="true"
[isOverlaid]="true">
</ng-textflow>
Component Inputs
input | required | type | note |
---|---|---|---|
nodeStyles | required | any | See example nodeStyles above. |
content | required | string | content: string = "Lot's of text here.." |
firstOnTop | optional | boolean | Defines order of nodes by changing z-index of each node as they are generated. |
showPageNumbers | optional | boolean | Displays the page number below or above the content area. NodeComponent.pageNumberAtTop is exposed to change the positioning of the number. |
isOverlaid | optional | boolean | Changes the css positioning of the nodes so that they overlap over each other. |
NodeComponent members
These members are for each generated node. An array of these can be retrieved from the CreateFlowService.nodes: Observable<NodeComponent[]>
.
methods
applyStyle(style: any)
Used in CreateFlowService to update the styles when generating a new node.
properties
heading: string
The actual text of the heading for a specific node. When the headings for all nodes are empty, then the heading is hidden to preserve formating.
index
The unique identifier for each node, also serves as the z-index value for when nodes are overlaid.
isOverlaid
If true then all the nodes are overlaid on top of each other.
isVisible
Hides or shows the particular node.
overflow: Observable<string>
The overflow text is streamed here when there is too much text for the last node, here is where the next node generation is initiated.
pageNumber: number
The value of the page number displayed below or above the node.
pageNumberAtTop: boolean
Defines where the page number is displayed in the node.
showHeading: boolean
Defines the visibility of the heading of a particular node.
showPageNumber: boolean
Defines the visibility of the page numbers for a particular node.
text: string
The actual text content of the node.
width: number
The width of the masking element of the node. When this width is changed then the node content, headings, and numbers, are obscured from the left to the right.
How it works
A service is used to create the nodes. The service puts the text into a dummy node. The actual height of the dummy node in the DOM is compared with the height of the node. The node component estimates the amount to trim off, then fine tunes the number of words until the dummy node size matches the node size. An overflow Observable is pushed prompting the service to create the next node. The following animation is a slowed down debug version to show the process steps.