Skip to content

Easily use lorem-ipsum dummy texts in your angular app as directive, component or by using a service

License

Notifications You must be signed in to change notification settings

d-koppenhagen/ngx-lipsum

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngx-lipsum

Buy Me A Coffee

npm npm PRs Welcome Open Source Love

npm npm npm npm

Easily use lorem-ipsum dummy texts in your angular app as directive, component or by using a service.

ngx-lipsum Logo

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' } */);
  }
}

About

Easily use lorem-ipsum dummy texts in your angular app as directive, component or by using a service

Resources

License

Stars

Watchers

Forks

Packages

No packages published