NgLet    

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.

Features

✅ Observable support

✅ Async pipe support

✅ NgModel support

✅ Type casting

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:

1: {{ total }}

2: {{ total }}

,
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:

1: {{ total }}

2: {{ total }}

,
imports: [NgLetDirective]
})
export class AppComponent {
num1: number = 1;
num2: number = 2;
}
`

Examples

Below there are some examples of use case.

$3

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:

1: {{ time }}

2: {{ time }}

,
imports: [NgLetDirective]
})
export class AppComponent {
timer$: Observable = 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:

1: {{ time }}

2: {{ time }}

,
imports: [NgLetDirective]
})
export class AppComponent {
timer$: Observable = defer(() => timer(3000, 1000));
}
`

$3

Example of use with signal, eg.:

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

@Component({
selector: 'app-root',
template:

1: {{ time }}

2: {{ time }}

,
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:

1: {{ time }}

2: {{ time }}

,
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, if you like it, or even donate. 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
- NgHttpCaching: Cache for HTTP requests in Angular application
- NgGenericPipe: Generic pipe for Angular application for use a component method into component template.
- NgForTrackByProperty: Angular global trackBy property directive with strict type checking