Nerdiest Political Manifesto
    Wondering what’s next for npm?Check out our public roadmap! »

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

    1.0.7 • Public • Published

    NgLet Build Status Coverage Status NPM version

    Structural directive for sharing data as local variable into html component template.

    Description

    Sometime there is a need to share data into component template as local variable. This structural directive create local contex of variable that can be used into html template.

    See the stackblitz demo.

    Features

    Observable support
    Async pipe support
    NgModel support

    Get Started

    Step 1: install ng-let

    npm i ng-let

    Step 2: Import NgLetModule into your app module, eg.:

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { NgLetModule } from 'ng-let';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
        BrowserModule,
        NgLetModule,
      ],
      providers: [],
      bootstrap: [AppComponent],
      ],
    })
    export class AppModule { }

    Step 3: usage, eg.:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      template: `
      <ng-container *ngLet="(num1 + num2) as data">
        <div>
          1: {{data}} <!-- 3 -->
        </div>
        <div>
          2: {{data}} <!-- 3 -->
        </div>
      </ng-container> 
      `,
    })
    export class AppComponent {
      num1: number = 1;
      num2: number = 2;
    }

    Examples

    Below there are some examples of use case.

    Example: observable

    Example of use with observable, eg.:

    import { Component } from '@angular/core';
    import { defer, Observable, timer } from 'rxjs';
    
    @Component({
      selector: 'app-root',
      template: `
      <ng-container *ngLet="obs$ | async as data">
        <div>
          1: {{data}}
        </div>
        <div>
          2: {{data}}
        </div>
      </ng-container>
      `,
    })
    export class AppComponent {
      obs$: Observable<number> = defer(() => timer(3000, 1000));
    }

    Support

    This is an open-source project. Star this repository, if you like it, or even donate. Thank you so much!

    Keywords

    Install

    npm i ng-let

    DownloadsWeekly Downloads

    23

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar