Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nigrosimone/ng-let
Angular structural directive for sharing data as local variable into html component template.
https://github.com/nigrosimone/ng-let
angular angular2
Last synced: 4 days ago
JSON representation
Angular structural directive for sharing data as local variable into html component template.
- Host: GitHub
- URL: https://github.com/nigrosimone/ng-let
- Owner: nigrosimone
- License: mit
- Created: 2021-03-27T13:29:39.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-12-01T14:29:21.000Z (3 months ago)
- Last Synced: 2025-02-03T12:56:15.985Z (11 days ago)
- Topics: angular, angular2
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-let
- Size: 2.64 MB
- Stars: 51
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-let - Structural directive for sharing data as local variable into html component template. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-let - Structural directive for sharing data as local variable into html component template. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-let - Structural directive for sharing data as local variable into html component template. (Table of contents / Third Party Components)
README
# NgLet [](https://app.travis-ci.com/nigrosimone/ng-let) [](https://coveralls.io/github/nigrosimone/ng-let?branch=main) [](https://www.npmjs.com/package/ng-let) [](https://codeclimate.com/github/nigrosimone/ng-let/maintainability)
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/edit/demo-ng-let?file=src%2Fapp%2Fapp.component.ts).
## 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.
### 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: `
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));
}
```
### 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: `
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](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](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)