Merge pull request #23 from damingerdai/standalone-directive

feat: add standalone directive support

.github/workflows/main.yml

@@ -36,9 +36,12 @@ jobs:
         # that will run `ngcc` compiler accordingly.
         if: steps.npm-cache.outputs.cache-hit != 'true'
         run: npm ci
-        
+
       - name: Test library
         run: npm run test:ngx-loading-buttons
 
       - name: Build library
         run: npm run build:ngx-loading-buttons
+
+      - name: Build playground
+        run: npm run build

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build ngx-loading-buttons-playground",
     "build:ngx-loading-buttons": "ng-packagr -p projects/ngx-loading-buttons/ng-package.json && cd projects/ngx-loading-buttons && npm run build",
     "test:ngx-loading-buttons": "ng test ngx-loading-buttons",
     "watch": "ng build --watch --configuration development"
@@ -41,4 +41,4 @@
     "ng-packagr": "^17.0.0",
     "typescript": "~5.2.2"
   }
-}
+}

projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.spec.ts

@@ -8,7 +8,10 @@ describe('MatBasicSpinnerDirective', () => {
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [AppComponent, MatBasicSpinnerDirective]
+      imports: [
+        MatBasicSpinnerDirective
+      ],
+      declarations: [AppComponent]
     })
     .createComponent(AppComponent);
 

projects/ngx-loading-buttons/src/lib/mat-basic-spinner.directive.ts

@@ -1,7 +1,8 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  selector: '[mtBasicSpinner]'
+  selector: '[mtBasicSpinner]',
+  standalone: true,
 })
 export class MatBasicSpinnerDirective {
   @Input() hideText = false

projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.spec.ts

@@ -3,12 +3,15 @@ import { AppComponent } from 'projects/ngx-loading-buttons-playground/src/app/ap
 import { MatGlowDirective } from './mat-glow.directive';
 
 describe('MatGlowDirective', () => {
-  
+
   let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(() => {
     fixture = TestBed.configureTestingModule({
-      declarations: [AppComponent, MatGlowDirective]
+      imports: [
+        MatGlowDirective
+      ],
+      declarations: [AppComponent]
     })
     .createComponent(AppComponent);
 

projects/ngx-loading-buttons/src/lib/mat-glow/mat-glow.directive.ts

@@ -1,15 +1,16 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  selector: '[mtGlow]'
+  selector: '[mtGlow]',
+  standalone: true,
 })
 export class MatGlowDirective {
 
   @Input() glowColor: string = "blue";
   @Input() mtGlow = false;
   @Input() hideText = false;
 
-  @Input("class")  
+  @Input("class")
   @HostBinding('class')
   get elementClass(): string {
     document.documentElement.style.setProperty('--glow-color', this.glowColor);

projects/ngx-loading-buttons/src/lib/ngx-loading-buttons.module.ts

@@ -3,9 +3,9 @@ import { MatBasicSpinnerDirective } from './mat-basic-spinner.directive';
 import { MatGlowDirective } from './mat-glow/mat-glow.directive';
 
 @NgModule({
-  declarations: [
-    MatBasicSpinnerDirective,
-    MatGlowDirective
+  imports: [
+    MatGlowDirective,
+    MatBasicSpinnerDirective
   ],
   exports: [
     MatBasicSpinnerDirective,