https://github.com/dimaslz/ng-v-class

Directive to work with classes as in Vue, in Angular applications
https://github.com/dimaslz/ng-v-class

angular directive

Last synced: about 2 months ago
JSON representation

Directive to work with classes as in Vue, in Angular applications

• Host: GitHub
• URL: https://github.com/dimaslz/ng-v-class
• Owner: dimaslz
• Created: 2021-09-11T00:01:21.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T10:31:21.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T12:44:47.402Z (3 months ago)
• Topics: angular, directive
• Language: TypeScript
• Homepage: https://ng-v-class.dimaslz.dev
• Size: 1.81 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# @dimaslz/ng-v-class

Angular directive to have a flexible "ngClass" as Vue style but in Angular.

* This project was generated with [Angular CLI](https://github.com/angular/angular-cli).

## Installation

npm: `npm install @dimaslz/ng-v-class`

yarn: `yarn add @dimaslz/ng-v-class`

### In your module where you want to use this directive

```typescript

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { NgVClassModule } from '@dimaslz/ng-v-class';

// or: import NgVClassModule from '@dimaslz/ng-v-class';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgVClassModule,

    ...

  ],

  ...

  bootstrap: [AppComponent]

})

export class AppModule { }

```

### In your template

```html

...

```

## Why?

Under my experience, as I have worked with Vue with dynamic classes has a better flexibility to work with directly in the template.

For example, in Angular, you can use Object, String or Array but just easy way...

```html

...

...

...

...

...

```

... for example, you can not combine different types in one expression

```html

...

```

...however in vue, you can do the same and also, combine both...

```html

...

```

... so, infinit combinations that sometimes could help us.

Then, with this package you can use the same syntax as in Vue with `:class`, now in Angular with `[ngVClass]`.

```html

...

```

## Feedback

Please, 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 :).

## Author

```js

{

	name: "Dimas López",

	role: "FullStack Software development",

	alias: "dimaslz",

	twitter: "https://twitter.com/dimaslz",

	site: "https://dimaslz.dev",

	linkedin: "https://www.linkedin.com/in/dimaslopezzurita"

}

```