{"id":13808380,"url":"https://github.com/nigrosimone/ng-let","last_synced_at":"2025-04-05T15:04:50.091Z","repository":{"id":58114135,"uuid":"352079986","full_name":"nigrosimone/ng-let","owner":"nigrosimone","description":"Angular structural directive for sharing data as local variable into html component template.","archived":false,"fork":false,"pushed_at":"2024-12-01T14:29:21.000Z","size":2766,"stargazers_count":51,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T14:06:32.307Z","etag":null,"topics":["angular","angular2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-let","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nigrosimone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"simone-nigro"}},"created_at":"2021-03-27T13:29:39.000Z","updated_at":"2024-12-17T00:17:11.000Z","dependencies_parsed_at":"2024-02-11T10:27:27.944Z","dependency_job_id":"05dec859-a36f-44aa-b322-fc5f81cd61f4","html_url":"https://github.com/nigrosimone/ng-let","commit_stats":{"total_commits":70,"total_committers":1,"mean_commits":70.0,"dds":0.0,"last_synced_commit":"3d6697a5ee087999c8b773f004c3ae352b29b3e1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-let","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-let/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-let/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-let/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nigrosimone","download_url":"https://codeload.github.com/nigrosimone/ng-let/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247353729,"owners_count":20925329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2"],"created_at":"2024-08-04T01:01:41.477Z","updated_at":"2025-04-05T15:04:50.073Z","avatar_url":"https://github.com/nigrosimone.png","language":"TypeScript","funding_links":["https://opencollective.com/simone-nigro","https://www.paypal.com/paypalme/snwp"],"categories":["Third Party Components"],"sub_categories":["Directives"],"readme":"# NgLet [![Build Status](https://app.travis-ci.com/nigrosimone/ng-let.svg?branch=main)](https://app.travis-ci.com/nigrosimone/ng-let) [![Coverage Status](https://coveralls.io/repos/github/nigrosimone/ng-let/badge.svg?branch=main)](https://coveralls.io/github/nigrosimone/ng-let?branch=main) [![NPM version](https://img.shields.io/npm/v/ng-let.svg)](https://www.npmjs.com/package/ng-let) [![Maintainability](https://api.codeclimate.com/v1/badges/de3eb5e33fa6f4359721/maintainability)](https://codeclimate.com/github/nigrosimone/ng-let/maintainability)\n\nAngular structural directive for sharing data as local variable into html component template.\n\n## Description\n\nSometime there is a need to share data into component template as local variable. \nThis structural directive create local context of variable that can be used into html template.\n\nSee the [stackblitz demo](https://stackblitz.com/edit/demo-ng-let?file=src%2Fapp%2Fapp.component.ts).\n\n## Features\n\n✅ Observable support\u003cbr\u003e\n✅ Async pipe support\u003cbr\u003e\n✅ NgModel support\u003cbr\u003e\n✅ Type casting\u003cbr\u003e\n\n## Get Started\n\nInstall `ng-let`\n\n```bash\nnpm i ng-let\n```\n\nUsage, eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgLetDirective } from 'ng-let';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-container *ngLet=\"(num1 + num2) as total\"\u003e \u003c!-- single computation --\u003e\n    \u003cdiv\u003e\n      1: {{ total }} \u003c!-- 3 --\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      2: {{ total }} \u003c!-- 3 --\u003e\n    \u003c/div\u003e\n  \u003c/ng-container\u003e \n  `,\n  imports: [NgLetDirective]\n})\nexport class AppComponent {\n  num1: number = 1;\n  num2: number = 2;\n}\n```\n\nor with the implicit syntax:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgLetDirective } from 'ng-let';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-container *ngLet=\"(num1 + num2); let total\"\u003e \u003c!-- single computation --\u003e\n    \u003cdiv\u003e\n      1: {{ total }} \u003c!-- 3 --\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      2: {{ total }} \u003c!-- 3 --\u003e\n    \u003c/div\u003e\n  \u003c/ng-container\u003e \n  `,\n  imports: [NgLetDirective]\n})\nexport class AppComponent {\n  num1: number = 1;\n  num2: number = 2;\n}\n```\n\n## Examples\n\nBelow there are some examples of use case.\n\n### Example: observable\n\nExample of use with observable, eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { defer, Observable, timer } from 'rxjs';\nimport { NgLetDirective } from 'ng-let';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-container *ngLet=\"timer$ | async as time\"\u003e \u003c!-- single subscription --\u003e\n    \u003cdiv\u003e\n      1: {{ time }}\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      2: {{ time }}\n    \u003c/div\u003e\n  \u003c/ng-container\u003e\n  `,\n  imports: [NgLetDirective]\n})\nexport class AppComponent {\n  timer$: Observable\u003cnumber\u003e = defer(() =\u003e timer(3000, 1000));\n}\n```\n\nor with the implicit syntax:\n\n```ts\nimport { Component } from '@angular/core';\nimport { defer, Observable, timer } from 'rxjs';\nimport { NgLetDirective } from 'ng-let';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-container *ngLet=\"timer$ | async; let time\"\u003e \u003c!-- single subscription --\u003e\n    \u003cdiv\u003e\n      1: {{ time }}\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      2: {{ time }}\n    \u003c/div\u003e\n  \u003c/ng-container\u003e\n  `,\n  imports: [NgLetDirective]\n})\nexport class AppComponent {\n  timer$: Observable\u003cnumber\u003e = defer(() =\u003e timer(3000, 1000));\n}\n```\n\n### Example: signal\n\nExample of use with signal, eg.:\n\n```ts\nimport { Component, signal } from '@angular/core';\nimport { NgLetDirective } from 'ng-let';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-container *ngLet=\"mySignal() as time\"\u003e \u003c!-- single computation --\u003e\n    \u003cdiv\u003e\n      1: {{ time }}\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      2: {{ time }}\n    \u003c/div\u003e\n  \u003c/ng-container\u003e\n  `,\n  imports: [NgLetDirective]\n})\nexport class AppComponent {\n  mySignal = signal(1);\n\n  constructor() {\n    setInterval(() =\u003e this.mySignal.update(value =\u003e value + 1), 1000)\n  }\n}\n```\n\nor with the implicit syntax:\n\n```ts\nimport { Component, signal } from '@angular/core';\nimport { NgLetDirective } from 'ng-let';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-container *ngLet=\"mySignal(); let time\"\u003e \u003c!-- single computation --\u003e\n    \u003cdiv\u003e\n      1: {{ time }}\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      2: {{ time }}\n    \u003c/div\u003e\n  \u003c/ng-container\u003e\n  `,\n  imports: [NgLetDirective]\n})\nexport class AppComponent {\n  mySignal = signal(1);\n\n  constructor() {\n    setInterval(() =\u003e this.mySignal.update(value =\u003e value + 1), 1000)\n  }\n}\n```\n\n## Support\n\nThis 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! \n\n## My other libraries\n\nI have published some other Angular libraries, take a look:\n\n - [NgSimpleState: Simple state management in Angular with only Services and RxJS](https://www.npmjs.com/package/ng-simple-state)\n - [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)\n - [NgGenericPipe: Generic pipe for Angular application for use a component method into component template.](https://www.npmjs.com/package/ng-generic-pipe)\n - [NgForTrackByProperty: Angular global trackBy property directive with strict type checking](https://www.npmjs.com/package/ng-for-track-by-property)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-let","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnigrosimone%2Fng-let","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-let/lists"}