{"id":16225406,"url":"https://github.com/dimaslz/ng-v-class","last_synced_at":"2025-03-19T12:30:56.650Z","repository":{"id":37640072,"uuid":"405241139","full_name":"dimaslz/ng-v-class","owner":"dimaslz","description":"Directive to work with classes as in Vue, in Angular applications","archived":false,"fork":false,"pushed_at":"2023-03-06T10:31:21.000Z","size":1897,"stargazers_count":3,"open_issues_count":19,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T18:42:57.051Z","etag":null,"topics":["angular","directive"],"latest_commit_sha":null,"homepage":"https://ng-v-class.dimaslz.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimaslz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-09-11T00:01:21.000Z","updated_at":"2021-12-21T21:13:22.000Z","dependencies_parsed_at":"2024-10-27T20:33:28.216Z","dependency_job_id":"e813b4c1-d75c-4add-9b0d-5594440cf956","html_url":"https://github.com/dimaslz/ng-v-class","commit_stats":{"total_commits":49,"total_committers":2,"mean_commits":24.5,"dds":"0.30612244897959184","last_synced_commit":"8a428693b556fdca036fdd44c9c67926b22f0174"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-v-class","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-v-class/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-v-class/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fng-v-class/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimaslz","download_url":"https://codeload.github.com/dimaslz/ng-v-class/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243989576,"owners_count":20379648,"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","directive"],"created_at":"2024-10-10T12:44:57.166Z","updated_at":"2025-03-19T12:30:56.115Z","avatar_url":"https://github.com/dimaslz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @dimaslz/ng-v-class\n\nAngular directive to have a flexible \"ngClass\" as Vue style but in Angular.\n\n* This project was generated with [Angular CLI](https://github.com/angular/angular-cli).\n\n## Installation\n\nnpm: `npm install @dimaslz/ng-v-class`\n\nyarn: `yarn add @dimaslz/ng-v-class`\n\n### In your module where you want to use this directive\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgVClassModule } from '@dimaslz/ng-v-class';\n// or: import NgVClassModule from '@dimaslz/ng-v-class';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    NgVClassModule,\n    ...\n  ],\n  ...\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n### In your template\n```html\n\u003csome-element [ngVClass]=\"expression\"\u003e...\u003c/some-element\u003e\n```\n\n## Why?\n\nUnder my experience, as I have worked with Vue with dynamic classes has a better flexibility to work with directly in the template.\n\nFor example, in Angular, you can use Object, String or Array but just easy way...\n\n```html\n\u003c!-- example of ngClass in Angular --\u003e\n\u003csome-element [ngClass]=\"'first second'\"\u003e...\u003c/some-element\u003e\n\n\u003csome-element [ngClass]=\"['first', 'second']\"\u003e...\u003c/some-element\u003e\n\n\u003csome-element\n  [ngClass]=\"{'first': true, 'second': true, 'third': false}\"\n\u003e...\u003c/some-element\u003e\n\n\u003csome-element [ngClass]=\"stringExp|arrayExp|objExp\"\u003e...\u003c/some-element\u003e\n\n\u003csome-element [ngClass]=\"{'class1 class2 class3' : true}\"\u003e...\u003c/some-element\u003e\n```\n\n... for example, you can not combine different types in one expression\n\n```html\n\u003csome-element\n  [ngClass]=\"[activeClass ? 'class1' : 'class2', {'class5': true}]\"\n\u003e...\u003c/some-element\u003e\n\n\u003c!-- ERROR Error: NgClass can only toggle CSS classes expressed as strings, got [object Object] --\u003e\n```\n\n...however in vue, you can do the same and also, combine both...\n\n```html\n\u003c!-- example of :class in Vue --\u003e\n\u003csome-element\n  :class=\"[\n    'first second',\n    {'first': true, 'second': false},\n    ['class1', 'class2', 'class3'],\n    someValue ? 'classA' : 'classB',\n    [\n      someValue ? 'classA' : 'classB', 'class2', 'class3', ['other']\n    ],\n  ]\"\n\u003e...\u003c/some-element\u003e\n```\n\n... so, infinit combinations that sometimes could help us.\n\nThen, with this package you can use the same syntax as in Vue with `:class`, now in Angular with `[ngVClass]`.\n\n```html\n\u003c!-- example of ngVClass (this package) in Angular --\u003e\n\u003csome-element\n  [ngVClass]=\"[\n    'first second',\n    {'first': true, 'second': false},\n    ['class1', 'class2', 'class3'],\n    someValue ? 'classA' : 'classB',\n    [\n      someValue ? 'classA' : 'classB', 'class2', 'class3', ['other']\n    ],\n  ]\"\n\u003e...\u003c/some-element\u003e\n```\n\n## Feedback\n\nPlease, feel free to give feedback or just ping me (by twitter or linkedin) if you think if also it is a good idea and helpful for you. Stars this repo also helps to get motivation :).\n\n## Author\n\n```js\n{\n\tname: \"Dimas López\",\n\trole: \"FullStack Software development\",\n\talias: \"dimaslz\",\n\ttwitter: \"https://twitter.com/dimaslz\",\n\tsite: \"https://dimaslz.dev\",\n\tlinkedin: \"https://www.linkedin.com/in/dimaslopezzurita\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Fng-v-class","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimaslz%2Fng-v-class","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Fng-v-class/lists"}