ng-let

KO | EN

gitlite — search

#python #hacktoberfest #rust #deep-learning #linux #nodejs #windows #awesome #kubernetes #vue #awesome-list #ios #openai #open-source

(★ 47)

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

ng-let Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# NgLet [![Build Status](https://github.com/nigrosimone/ng-let/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/nigrosimone/ng-let/actions/workflows/node.js.yml) [![NPM version](https://img.shields.io/npm/v/ng-let.svg)](https://www.npmjs.com/package/ng-let)

Angular 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 context of variable that can be used into html template.

See the [stackblitz demo](https://stackblitz.com/github/nigrosimone/ng-let/tree/main/examples/stackblitz), or its [sources](examples/stackblitz).

## Features

✅ Observable support<br>
✅ Async pipe support<br>
✅ NgModel support<br>
✅ Type casting<br>
✅ Renders falsy values<br>

Unlike `*ngIf`, `*ngLet` never hides its content: `0`, `''`, `false`, `null`, `undefined` and `NaN`
are all bound and rendered, so a template guarded by `*ngLet` shows up exactly once whatever the
expression evaluates to.

Because of that, `*ngLet` does not narrow the type of what you bind to it, and a nullable
expression stays nullable inside the template:

```html

<ng-container *ngLet="timer$ | async as time">{{ time?.toFixed(2) }}</ng-container>

<ng-container *ngLet="(timer$ | async) ?? 0 as time">{{ time.toFixed(2) }}</ng-container>
```

## Get Started

Install `ng-let`

```bash
npm i ng-let
```

Usage, eg.:

```ts
import { Component } from '@angular/core';
import { NgLetDirective } from 'ng-let';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="(num1 + num2) as total"> 
    <div>
      1: {{ total }} 
    </div>
    <div>
      2: {{ total }} 
    </div>
  </ng-container> 
  `,
  imports: [NgLetDirective]
})
export class AppComponent {
  num1: number = 1;
  num2: number = 2;
}
```

or with the implicit syntax:

```ts
import { Component } from '@angular/core';
import { NgLetDirective } from 'ng-let';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="(num1 + num2); let total"> 
    <div>
      1: {{ total }} 
    </div>
    <div>
      2: {{ total }} 
    </div>
  </ng-container> 
  `,
  imports: [NgLetDirective]
})
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.:

```ts
import { Component } from '@angular/core';
import { defer, Observable, timer } from 'rxjs';
import { NgLetDirective } from 'ng-let';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="timer$ | async as time"> 
    <div>
      1: {{ time }}
    </div>
    <div>
      2: {{ time }}
    </div>
  </ng-container>
  `,
  imports: [NgLetDirective]
})
export class AppComponent {
  timer$: Observable<number> = defer(() => timer(3000, 1000));
}
```

or with the implicit syntax:

```ts
import { Component } from '@angular/core';
import { defer, Observable, timer } from 'rxjs';
import { NgLetDirective } from 'ng-let';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="timer$ | async; let time"> 
    <div>
      1: {{ time }}
    </div>
    <div>
      2: {{ time }}
    </div>
  </ng-container>
  `,
  imports: [NgLetDirective]
})
export class AppComponent {
  timer$: Observable<number> = defer(() => timer(3000, 1000));
}
```

### Example: signal

Example of use with signal, eg.:

```ts
import { Component, signal } from '@angular/core';
import { NgLetDirective } from 'ng-let';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="mySignal() as time"> 
    <div>
      1: {{ time }}
    </div>
    <div>
      2: {{ time }}
    </div>
  </ng-container>
  `,
  imports: [NgLetDirective]
})
export class AppComponent {
  mySignal = signal(1);

constructor() {
    setInterval(() => this.mySignal.update(value => value + 1), 1000)
  }
}
```

or with the implicit syntax:

```ts
import { Component, signal } from '@angular/core';
import { NgLetDirective } from 'ng-let';

@Component({
  selector: 'app-root',
  template: `
  <ng-container *ngLet="mySignal(); let time"> 
    <div>
      1: {{ time }}
    </div>
    <div>
      2: {{ time }}
    </div>
  </ng-container>
  `,
  imports: [NgLetDirective]
})
export class AppComponent {
  mySignal = signal(1);

constructor() {
    setInterval(() => this.mySignal.update(value => value + 1), 1000)
  }
}
```

## Support

This is an open-source project. Star this [repository](https://github.com/nigrosimone/ng-let), if you like it, or even [donate](https://www.paypal.com/paypalme/snwp). Thank you so much!

## My other libraries

I have published some other Angular libraries, take a look:

- [NgSimpleState: Simple state management in Angular with only Services and RxJS or Signal](https://www.npmjs.com/package/ng-simple-state)
 - [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)
 - [NgGenericPipe: Generic pipe for Angular application for use a component method into component template.](https://www.npmjs.com/package/ng-generic-pipe)
 - [NgForTrackByProperty: Angular global trackBy property directive with strict type checking](https://www.npmjs.com/package/ng-for-track-by-property)

ng-let

ng-let Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ng-let

ng-let Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README