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: 3 months 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 (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-03T08:13:53.000Z (3 months ago)
- Last Synced: 2024-08-03T09:28:56.225Z (3 months ago)
- Topics: angular, angular2
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-let
- Size: 1.6 MB
- Stars: 48
- 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
*Step 1*: install `ng-let`
```bash
npm i ng-let
```
*Step 2*: Import `NgLetModule` into your app module or imports of standalone component, eg.:
```ts
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.:
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
1: {{ total }}
2: {{ total }}
`,
})
export class AppComponent {
num1: number = 1;
num2: number = 2;
}
```
or with the implicit syntax:
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
1: {{ total }}
2: {{ total }}
`,
})
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';
@Component({
selector: 'app-root',
template: `
1: {{ time }}
2: {{ time }}
`,
})
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';
@Component({
selector: 'app-root',
template: `
1: {{ time }}
2: {{ time }}
`,
})
export class AppComponent {
timer$: Observable = defer(() => timer(3000, 1000));
}
```
### Example: signal
Example of use with signal, eg.:
```ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
1: {{ time }}
2: {{ time }}
`,
})
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';
@Component({
selector: 'app-root',
template: `
1: {{ time }}
2: {{ time }}
`,
})
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)