ngx-lipsum
v2.2.0
Published
Easily use lorem-ipsum dummy texts in your angular app as directive, component or by using a service.
Downloads
188
Maintainers
Readme
ngx-lipsum
Easily use lorem-ipsum dummy texts in your angular app as directive, component or by using a service.
Usage & Defaults
All generated texts are based on the lorem-ipsum
NPM package and it's configuration defined by the ILoremIpsumParams
interface.
In most cases this package uses the defaults by passing no further option / an empty object.
Service and Standalone Component / Directive
This package provides:
- the
LipsumService
- the
ngx-lipsum
-Component that can be used as a standalone Component - the
lipsum
-Directive which is also exported as standalone Directive
Directive Usage
Using the lipsum
-Directive allows you to fill most HTML Elements with lorem ipsum content (some won't make sense like video
, audio
, iframe
, etc.).
By default the generated text will simply be inserted.
The defaults here depending on the target HTML-Element. You can find them at the top of the implementation
<!-- input elements (text is bound to `value`) -->
<textarea [lipsum]></textarea>
<input [lipsum]="{ count: 10, unit: 'words' }" />
<!-- with custom config -->
<!-- list elements (`li`-child will automatically be created for each paragraph) -->
<ul [lipsum]></ul>
<ol [lipsum]="{ count: 20, unit: 'paragraphs' }"></ol>
<!-- with custom config -->
<!-- common elements (text is bound to `innerText`) -->
<li [lipsum]></li>
<p [lipsum]="{ count: 40, unit: 'sentences' }"></p>
<!-- with custom config -->
<a [lipsum]></a>
Component Usage
You can use the ngx-lipsum
-Component in your template and pass through an optional configuration object as config
input property binding.
<!-- using defaults -->
<ngx-lipsum></ngx-lipsum>
<!-- using custom config -->
<ngx-lipsum [config]="{ count: 5, unit: 'paragraphs' }"></ngx-lipsum>
Service usage
When you want to use the service to generate a lorem ipsum text in your classes, you need to inject the service and call the get
-method to retrieve the text.
You can pass through any config from the lorem-ipsum
NPM package.
import { Component } from '@angular/core';
import { LipsumService } from 'ngx-lipsum';
@Component({
selector: 'my-component',
template: '<span>{{ lipsumText }}</span>',
})
export class MyComponent {
public lipsumText: string;
constructor(lipsum: LipsumService) {
this.lipsumText = lipsum.get(/* { count: 3, unit: 'sentences' } */);
}
}