Angular 17.1+ support (#206)

* Angular >v17.1 support

* angular example rewrite

* Angular docs change

* Update package.json

* angular pnpm-lock & usage import fix

* ' -> " typo fix

---------

Co-authored-by: Gergely Dremak <[email protected]>
Co-authored-by: Justin Schroeder <[email protected]>

Author: 3 people

docs/src/examples/angular/index.ts

@@ -1,44 +1,35 @@
 const angularDirectiveMain = {
-  angular: {
-    ext: "angular",
-    language: "jsx",
-    example: `import { NgModule } from '@angular/core';
-import { AutoAnimateModule } from '@formkit/auto-animate/angular'
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, AutoAnimateModule],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-`,
-  },
-}
-
-const angularDirectiveApp = {
   angular: {
     ext: "angular",
     language: "jsx",
     example: `import { Component } from '@angular/core';
+import { AutoAnimateDirective } from '@formkit/auto-animate/angular';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [AutoAnimateDirective],
   template: \`
-    <div *ngFor="let story of stories">
-      <div class="story-card" auto-animate>
-        <h2>{{ story.title }}</h2>
-        <div *ngIf="story.showStory">{{ story.story }}</div>
-        <button (click)="story.showStory = !story.showStory">Toggle story</button>
+    @for (story of stories; track story.title) {
+      <div>
+        <div class="story-card" auto-animate>
+          <h2>{{ story.title }}</h2>
+          @if (story.showStory) {
+            <div>{{ story.story }}</div>
+          }
+          <button (click)="story.showStory = !story.showStory">Toggle story</button>
+        </div>
       </div>
-    </div>
-  \`
+    }
+  \`,
 })
 export class AppComponent {
-  stories = [
+  readonly stories = [
     {title: 'The Ant and The Grasshopper', showStory: false, story: "The ant and the grasshopper were good friends..."},
     {title: 'The Boy Who Cried Wolf', showStory: false, story: "There was once a shepherd boy who liked to play tricks..."},
   ];
-}`,
+}
+`,
   },
 }
-export { angularDirectiveMain, angularDirectiveApp }
+export { angularDirectiveMain }

docs/src/sections/SectionUsage.vue

@@ -8,7 +8,7 @@ import {
   vueDirectiveApp,
   vueComposable,
 } from "../examples/vue"
-import { angularDirectiveMain, angularDirectiveApp } from "../examples/angular"
+import { angularDirectiveMain } from "../examples/angular"
 import { solidPrimitive, solidDirective } from "../examples/solid"
 import reactHook from "../examples/react"
 import preactHook from "../examples/preact"
@@ -160,14 +160,16 @@ import IconQwik from "../components/IconQwik.vue"
     <h2 id="usage-vue">Vue directive</h2>
     <p>
       Vue users can globally register the
-      <code>v-auto-animate</code> directive or install the Nuxt module. This makes adding transitions and
-      animations as easy as applying an attribute. Import the Vue plugin from
-      <code>@formkit/auto-animate/vue</code> and register it with your Vue app:
+      <code>v-auto-animate</code> directive or install the Nuxt module. This
+      makes adding transitions and animations as easy as applying an attribute.
+      Import the Vue plugin from <code>@formkit/auto-animate/vue</code> and
+      register it with your Vue app:
     </p>
     <CodeExample :examples="vueDirectiveMain" title="main" />
     <AsideTip>
       If you prefer to not register the Vue directive globally, you can import
-      it directly into the component where you want to use it <code>import { vAutoAnimate } from '@formkit/auto-animate'</code>.
+      it directly into the component where you want to use it
+      <code>import { vAutoAnimate } from '@formkit/auto-animate'</code>.
     </AsideTip>
     <p>
       Once you’ve registered the plugin, it can be applied anywhere in your
@@ -194,8 +196,8 @@ import IconQwik from "../components/IconQwik.vue"
     </p>
     <p>
       Import the composable from <code>@formkit/auto-animate/vue</code> (the
-      Nuxt module will automatically import <code>useAutoAnimate</code> for you), and
-      call it in <code>script setup</code> to create a
+      Nuxt module will automatically import <code>useAutoAnimate</code> for
+      you), and call it in <code>script setup</code> to create a
       <a
         href="https://vuejs.org/guide/essentials/template-refs.html#template-refs"
         target="_blank"
@@ -256,24 +258,24 @@ import IconQwik from "../components/IconQwik.vue"
 
     <h2 id="usage-angular">Angular directive</h2>
     <p>
-      Angular users can globally register the
-      <code>auto-animate</code> directive. This makes adding transitions and
-      animations as easy as applying an attribute. Import the AutoAnimateModule
-      from <code>@formkit/auto-animate/angular</code> and register it with your
-      Angular app:
+      Import <code>AutoAnimateDirective</code> from
+      <code>@formkit/auto-animate/angular</code> into a module or a standalone
+      component to easily add transitions and animations by applying the
+      <code>auto-animate</code> attribute to the parent element in your
+      template:
     </p>
     <CodeExample :examples="angularDirectiveMain" title="App" />
-    <p>
-      Once you’ve registered the plugin, it can be applied anywhere in your
-      application by adding the <code>auto-animate</code> directive to the
-      parent element:
-    </p>
-    <CodeExample :examples="angularDirectiveApp" title="App" />
     <ActualAngularApp />
     <AsideTip>
       Angular users can pass options by directly setting the options input
       <code>&lt;ul auto-animate [options]="{ duration: 100 }"&gt;</code>
     </AsideTip>
+    <AsideTip>
+      In Angular versions &lt;16 you can only import
+      <code>AutoAnimateModule</code> in <code>NgModule</code>s. And you have to
+      use auto-animate v0.8.2 or earlier. Angular v16 isn't directly supported,
+      but you can easily write a wrapper.
+    </AsideTip>
 
     <!-- <h2 id="usage-qwik">Qwik hook</h2>
     <p>

package.json

@@ -72,7 +72,7 @@
     }
   },
   "devDependencies": {
-    "@angular/core": "^13.4.0",
+    "@angular/core": "^17.1.0",
     "@formkit/vue": "^1.6.5",
     "@nuxt/kit": "^3.12.4",
     "@nuxt/module-builder": "^0.8.3",