No Partying Mariachis

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.9 • Public • Published


    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.

    Get started: Import the module

    Before you can use ngx-lipsum, you have to import the NgxLipsumModule in your app:

    /* ... */
    import { NgxLipsumModule } from 'ngx-lipsum';
      declarations: [AppComponent],
      imports: [BrowserModule, NgxLipsumModule],
      providers: [],
      bootstrap: [AppComponent],
    export class AppModule {}

    Now you can use either the LipsumService, ngx-lipsum-Component or lipsum-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 -->
    <!-- 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';
      selector: 'my-component',
      template: '<span>{{ lipsumText }}</span>',
    export class MyComponent {
      public lipsumText: string;
      constructor(lipsum: LipsumService) {
        this.lipsumText = lipsum.get(/* { count: 3, unit: 'sentences' } */);


    npm i ngx-lipsum

    DownloadsWeekly Downloads






    Unpacked Size

    67.6 kB

    Total Files


    Last publish


    • d-koppenhagen