{"id":21418357,"url":"https://github.com/nigrosimone/ng-as","last_synced_at":"2025-07-14T05:30:56.338Z","repository":{"id":57153406,"uuid":"438353563","full_name":"nigrosimone/ng-as","owner":"nigrosimone","description":"Angular pipe and directive for type casting template variables.","archived":false,"fork":false,"pushed_at":"2024-09-22T12:58:07.000Z","size":4981,"stargazers_count":9,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-18T05:18:32.128Z","etag":null,"topics":["angular","angular2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-as","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-12-14T18:08:57.000Z","updated_at":"2024-09-22T12:58:10.000Z","dependencies_parsed_at":"2024-01-02T10:45:13.558Z","dependency_job_id":"dc572bab-70b1-4184-a701-53fa42c6070d","html_url":"https://github.com/nigrosimone/ng-as","commit_stats":{"total_commits":39,"total_committers":1,"mean_commits":39.0,"dds":0.0,"last_synced_commit":"99823ab063eb2f0c43e4420c8c12a85e142373e4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-as","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-as/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-as/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-as/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nigrosimone","download_url":"https://codeload.github.com/nigrosimone/ng-as/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225951729,"owners_count":17550424,"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-11-22T19:20:23.672Z","updated_at":"2024-11-22T19:20:24.093Z","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":["Mixed Utilities"],"readme":"# NgAs [![Build Status](https://app.travis-ci.com/nigrosimone/ng-as.svg?branch=main)](https://app.travis-ci.com/nigrosimone/ng-as) [![Coverage Status](https://coveralls.io/repos/github/nigrosimone/ng-as/badge.svg?branch=main)](https://coveralls.io/github/nigrosimone/ng-as?branch=main) [![NPM version](https://img.shields.io/npm/v/ng-as.svg)](https://www.npmjs.com/package/ng-as)\n\nAngular pipe and directive for type casting template variables.\n\n## Description\n\nSometime there is a need to cast variable into component template as some type. \nThis library has pipe and directive for type casting template variables and improve IDE suggestion and refactoring.\n\nSee the [stackblitz demo](https://stackblitz.com/edit/demo-ng-as?file=src%2Fapp%2Fapp.component.ts).\n\n\n## Get Started\n\n*Step 1*: install `ng-as`\n\n```bash\nnpm i ng-as\n```\n\n*Step 2*: usage\n\ntype casting template variables with directive eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgAsDirective } from 'ng-as';\n\n// your interface, but also work with any typescript type (class, type, etc.)\ninterface Person {\n  name: string;\n}\n\n@Component({\n  selector: 'app-root',\n  imports: [NgAsDirective],\n  template: `\n  \u003cng-container *ngTemplateOutlet=\"personTemplate; context: {$implicit: person}\"\u003e\u003c/ng-container\u003e\n\n  \u003cng-template #personTemplate [ngAs]=\"Person\" let-person\u003e\n    \u003cspan\u003eHello {{ person.name }}!\u003c/span\u003e\n  \u003c/ng-template\u003e\n  `,\n})\nexport class AppComponent {\n  // NOTE: If you have \"strictPropertyInitialization\" enabled, \n  // you will need to add a non-null assertion (!)\n  public Person!: Person; // publish your interface into html template\n  person: Person = { name: 'Simone' }; // the data\n}\n```\n\ntype casting template variables with pipe eg.:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgAsPipe } from 'ng-as';\n\n// your interface, but also work with any typescript type (class, type, etc.)\ninterface Person {\n  name: string;\n}\n\n@Component({\n  selector: 'app-root',\n  imports: [NgAsPipe],\n  template: `\n  \u003cng-container *ngTemplateOutlet=\"personTemplate; context: {$implicit: person}\"\u003e\u003c/ng-container\u003e\n\n  \u003cng-template #personTemplate let-person\u003e\n    \u003cspan\u003eHello {{ (person | as: Person).name }}!\u003c/span\u003e\n  \u003c/ng-template\u003e\n  `,\n})\nexport class AppComponent {\n  // NOTE: If you have \"strictPropertyInitialization\" enabled, \n  // you will need to add a non-null assertion (!)\n  public Person!: Person; // publish your interface into html template\n  person: Person = { name: 'Simone' }; // the data\n}\n```\n\n### That's all!\n\n![alt text](https://github.com/nigrosimone/ng-as/blob/main/help.gif?raw=true)\n\n## Example: MatTable\n\n`matCellDef` cannot infer the type of its parent's input. But with `ng-as` you can strong-type its template variable.\n\n```ts\nimport { Component } from '@angular/core';\nimport {MatTableModule} from '@angular/material/table';\nimport { NgAsPipe } from 'ng-as';\n\nexport interface PeriodicElement {\n  name: string;\n  position: number;\n  weight: number;\n  symbol: string;\n}\n\nconst ELEMENT_DATA: PeriodicElement[] = [\n  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},\n  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},\n  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},\n  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},\n  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},\n  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},\n  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},\n  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},\n  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},\n  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},\n];\n\n@Component({\n  selector: 'table-basic-example',\n  imports: [NgAsPipe, MatTableModule],\n  template: `\n  \u003ctable mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8\"\u003e\n\n    \u003cng-container matColumnDef=\"position\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef\u003e No. \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let element\"\u003e {{(element | as: PeriodicElement).position}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003cng-container matColumnDef=\"name\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef\u003e Name \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let element\"\u003e {{(element | as: PeriodicElement).name}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003cng-container matColumnDef=\"weight\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef\u003e Weight \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let element\"\u003e {{(element | as: PeriodicElement).weight}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003cng-container matColumnDef=\"symbol\"\u003e\n      \u003cth mat-header-cell *matHeaderCellDef\u003e Symbol \u003c/th\u003e\n      \u003ctd mat-cell *matCellDef=\"let element\"\u003e {{(element | as: PeriodicElement).symbol}} \u003c/td\u003e\n    \u003c/ng-container\u003e\n\n    \u003ctr mat-header-row *matHeaderRowDef=\"displayedColumns\"\u003e\u003c/tr\u003e\n    \u003ctr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\u003e\u003c/tr\u003e\n  \u003c/table\u003e\n  `,\n})\nexport class TableBasicExample {\n  PeriodicElement!: PeriodicElement;\n  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];\n  dataSource = ELEMENT_DATA;\n}\n```\n\n## Support\n\nThis is an open-source project. Star this [repository](https://github.com/nigrosimone/ng-as), 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 - [NgLet: Structural directive for sharing data as local variable into html component template](https://www.npmjs.com/package/ng-let)\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-as","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnigrosimone%2Fng-as","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-as/lists"}