Skip to content

chore: remove standalone: true property across all components, dire… #667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
eneajaho wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore: remove standalone: true property across all components, dire… #667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions apps/test-app/src/app/control-value-accessor/control-value-accessor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ import {
/>
</label>
`,
standalone: true,
})
export class CustomInput {
protected cva = inject<NgxControlValueAccessor<string>>(
Expand Down Expand Up @@ -89,7 +88,7 @@ interface User {
/>
</label>
`,
standalone: true,

providers: [provideCvaCompareToByProp<User>('id')],
})
export class UserSelect {
Expand Down
1 change: 0 additions & 1 deletion apps/test-app/src/app/document-visibility-state/document-visibility-state.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { injectDocumentVisibility } from 'ngxtension/inject-document-visibility'
template: `
{{ visibilityState() }}
`,
standalone: true,
})
export default class DocumentVisibilityStateComponent {
visibilityState = injectDocumentVisibility();
Expand Down
2 changes: 0 additions & 2 deletions apps/test-app/src/app/drag/drag.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const dragHandler = (from: WritableSignal<Vector2>) => {

@Component({
selector: 'app-box-with-host',
standalone: true,
template: `
<span style="position: absolute; top: -1rem; ">host directive</span>
`,
Expand All @@ -53,7 +52,6 @@ export class BoxWithHost {

@Component({
selector: 'app-box',
standalone: true,
template: `
<span style="position: absolute; top: -1rem; ">
{{ from() }}
Expand Down
3 changes: 0 additions & 3 deletions apps/test-app/src/app/svg-sprite/svg-sprite.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { NgxSvgSpriteFragment } from 'ngxtension/svg-sprite';

@Directive({
selector: 'svg[faRegular]',
standalone: true,
hostDirectives: [
{
directive: NgxSvgSpriteFragment,
Expand All @@ -20,7 +19,6 @@ export class FaRegularDirective {

@Directive({
selector: 'svg[faSolid]',
standalone: true,
hostDirectives: [
{ directive: NgxSvgSpriteFragment, inputs: ['fragment:faSolid'] },
],
Expand All @@ -33,7 +31,6 @@ export class FaSolidDirective {

@Directive({
selector: 'svg[faBrand]',
standalone: true,
hostDirectives: [
{ directive: NgxSvgSpriteFragment, inputs: ['fragment:faBrand'] },
],
Expand Down
1 change: 0 additions & 1 deletion apps/test-app/src/app/text-selection/text-selection.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ import { injectTextSelection } from 'ngxtension/inject-text-selection';
}
`,
],
standalone: true,
})
export default class TextSelectionComponent {
// Use the injectTextSelection hook to track selection state.
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/es/utilities/Assets/svg-sprites.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ En este ejemplo, se crea un sprite svg de las _marcas de fontawesome_.
```ts
@Directive({
selector: 'svg[faBrand]',
standalone: true,

hostDirectives: [
{ directive: NgxSvgSpriteFragment, inputs: ['fragment:faBrand'] },
],
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/es/utilities/Directives/click-outside.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ Agrega la directiva `clickOutside` al elemento Angular.

```ts
@Component({
standalone: true,
template: `
<div (clickOutside)="close()"></div>
`,
Expand Down
3 changes: 1 addition & 2 deletions docs/src/content/docs/es/utilities/Forms/control-value-accessor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ En este ejemplo, `NgxControlValueAccessor` se utiliza para crear un componente `
/>
</label>
`,
standalone: true,
})
export class CustomInput {
protected cva = inject<NgxControlValueAccessor<string>>(
Expand Down Expand Up @@ -96,7 +95,7 @@ Ejemplo completo:
```ts
@Component({
selector: 'selector-usuario',
standalone: true,

hostDirectives: [NgxControlValueAccessor],
providers: [provideCvaCompareToByProp<Usuario>('id')],
template: `
Expand Down
4 changes: 2 additions & 2 deletions docs/src/content/docs/es/utilities/Gesture/gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ También podemos usar `NgxDrag` en un elemento Host aprovechando `hostDirectives
```ts
@Component({
selector: 'app-draggable-box',
standalone: true,

hostDirectives: [{ directive: NgxDrag, outputs: ['ngxDrag'] }],
template: ``,
})
Expand All @@ -75,7 +75,7 @@ Otra forma de habilitar Drag Gesture es usar el CIF `injectDrag`.
```ts
@Component({
selector: 'app-draggable-box',
standalone: true,

template: ``,
})
export class DraggableBox {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/es/utilities/Injectors/active-element.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { Component } from '@angular/core';
import { injectActiveElement } from 'ngxtension/active-element';

@Component({
standalone: true,
selector: 'app-example',
template: `
<button>btn1</button>
Expand Down
2 changes: 0 additions & 2 deletions docs/src/content/docs/es/utilities/Injectors/inject-lazy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const DataServiceImport = () =>
import('./data-service').then((m) => m.MyService);

@Component({
standalone: true,
imports: [AsyncPipe],
template: '<div>{{data$ | async}}</div>',
})
Expand All @@ -63,7 +62,6 @@ También podemos usar `injectLazy` fuera de un contexto de inyección, pasándol
const DataServiceImport = () => import('./data-service');

@Component({
standalone: true,
template: '<div>{{data}}</div>',
})
class TestComponent implements OnInit {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/es/utilities/Injectors/inject-params.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { injectParams } from 'ngxtension/inject-params';

```ts
@Component({
standalone: true,
template: '<div>{{params() | json}}</div>',
})
class TestComponent {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/es/utilities/Injectors/inject-query-params.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { injectQueryParams } from 'ngxtension/inject-query-params';

```ts
@Component({
standalone: true,
template: '<div>{{queryParams() | json}}</div>',
})
class TestComponent {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/es/utilities/Injectors/inject-route-data.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { injectRouteData } from 'ngxtension/inject-route-data';

```ts
@Component({
standalone: true,
template: '<div>{{routeData() | json}}</div>',
})
class TestComponent {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/es/utilities/Injectors/navigation-end.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { injectNavigationEnd } from 'ngxtension/navigation-end';
import { NavigationEnd } from '@angular/router';

@Component({
standalone: true,
selector: 'app-example',
template: '<p>Componente Ejemplo</p>',
})
Expand Down
3 changes: 0 additions & 3 deletions docs/src/content/docs/es/utilities/Operators/rx-effect.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ Con la función `next`

```ts
@Component({
standalone: true,
imports: [ReactiveFormsModule],
selector: 'app-root',
template: `
Expand Down Expand Up @@ -60,7 +59,6 @@ Con `TapObserver`

```ts
@Component({
standalone: true,
imports: [ReactiveFormsModule],
selector: 'app-root',
template: `
Expand Down Expand Up @@ -92,7 +90,6 @@ Con el effect gestionado directamente en el origen

```ts
@Component({
standalone: true,
imports: [ReactiveFormsModule],
selector: 'app-root',
template: `
Expand Down
2 changes: 1 addition & 1 deletion docs/src/content/docs/utilities/Assets/svg-sprites.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ In this example a _fontawesome brands_ svg sprite is created.
```ts
@Directive({
selector: 'svg[faBrand]',
standalone: true,

hostDirectives: [
{ directive: NgxSvgSpriteFragment, inputs: ['fragment:faBrand'] },
],
Expand Down
3 changes: 0 additions & 3 deletions docs/src/content/docs/utilities/Components/host-binding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ With `@HostBinding` you can bind a color from a class property:

```ts
@Component({
standalone: true,
selector: 'my-component',
template: '...',
})
Expand All @@ -35,7 +34,6 @@ With `hostBinding` you can now bind anything like `@HostBinding` on writable or

```ts
@Component({
standalone: true,
selector: 'my-component',
template: '...',
})
Expand All @@ -52,7 +50,6 @@ With `hostBinding` you can update and remove attributes, like `@HostBinding`.

```ts
@Component({
standalone: true,
selector: 'my-component',
template: '...',
})
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/utilities/Directives/click-outside.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ Add `clickOutside` directive directly to the Angular element.

```ts
@Component({
Copy link

@gemini-code-assist gemini-code-assist bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Removing standalone: true from this documentation example makes the component non-standalone. However, the example still uses the imports property (on line 26), which is only valid for standalone components. This makes the code example incorrect and misleading for users. The example should be updated to show how to use this directive with a non-standalone component, likely by declaring it in an NgModule.

standalone: true,
template: `
<div (clickOutside)="close()"></div>
`,
Expand Down
3 changes: 1 addition & 2 deletions docs/src/content/docs/utilities/Forms/control-value-accessor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ In this example `NgxControlValueAccessor` is used to create a `CustomInput` comp
/>
</label>
`,
standalone: true,
})
export class CustomInput {
protected cva = inject<NgxControlValueAccessor<string>>(
Expand Down Expand Up @@ -96,7 +95,7 @@ Full example:
```ts
@Component({
selector: 'user-select',
standalone: true,

hostDirectives: [NgxControlValueAccessor],
providers: [provideCvaCompareToByProp<User>('id')],
template: `
Expand Down
6 changes: 3 additions & 3 deletions docs/src/content/docs/utilities/Forms/form-events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { allEventsSignal } from 'ngxtension/form-events';

@Component({
selector: 'my-app',
standalone: true,

imports: [ReactiveFormsModule],
template: `
<input [formControl]="nameControl" />
Expand Down Expand Up @@ -50,7 +50,7 @@ import { Subscription } from 'rxjs';

@Component({
selector: 'my-app',
standalone: true,

imports: [ReactiveFormsModule],
template: `
<form [formGroup]="form">
Expand Down Expand Up @@ -93,7 +93,7 @@ import { allEventsSignal } from 'ngxtension/form-events';

@Component({
selector: 'my-app',
standalone: true,

imports: [ReactiveFormsModule],
template: `
<input [formControl]="usernameControl" />
Expand Down
4 changes: 2 additions & 2 deletions docs/src/content/docs/utilities/Gesture/gesture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ We can also use `NgxDrag` on a Host element by leveraging `hostDirectives`
```ts
@Component({
selector: 'app-draggable-box',
standalone: true,

hostDirectives: [{ directive: NgxDrag, outputs: ['ngxDrag'] }],
template: ``,
})
Expand All @@ -81,7 +81,7 @@ Another way of enabling Drag Gesture is to use the CIF `injectDrag`.
```ts
@Component({
selector: 'app-draggable-box',
standalone: true,

template: ``,
})
export class DraggableBox {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/utilities/Injectors/active-element.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import { Component } from '@angular/core';
import { injectActiveElement } from 'ngxtension/active-element';

@Component({
standalone: true,
selector: 'app-example',
template: `
<button>btn1</button>
Expand Down
3 changes: 0 additions & 3 deletions docs/src/content/docs/utilities/Injectors/inject-attribute.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { injectAttribute } from 'ngxtension/inject-attribute';
```ts
@Component({
selector: 'app-divider',
standalone: true,
})
class Divider {
size = injectAttribute('size', 'sm');
Expand All @@ -40,7 +39,6 @@ Use `injectAttribute.required()` when an attribute must be provided:
```ts
@Component({
selector: 'app-card',
standalone: true,
})
class Card {
variation = injectAttribute.required<string>('variation');
Expand All @@ -63,7 +61,6 @@ const booleanAttribute = (value: string) => value !== null;

@Component({
selector: 'app-paginator',
standalone: true,
})
class Paginator {
// Convert string to number
Expand Down
2 changes: 0 additions & 2 deletions docs/src/content/docs/utilities/Injectors/inject-lazy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const DataServiceImport = () =>
import('./data-service').then((m) => m.MyService);

@Component({
standalone: true,
imports: [AsyncPipe],
template: '<div>{{data$ | async}}</div>',
})
Expand All @@ -63,7 +62,6 @@ We can also use `injectLazy` not in an injection context, by passing an injector
const DataServiceImport = () => import('./data-service');

@Component({
standalone: true,
template: '<div>{{data}}</div>',
})
class TestComponent implements OnInit {
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/utilities/Injectors/inject-leaf-activated-route.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { injectLeafActivatedRoute } from 'ngxtension/inject-leaf-activated-route

```ts
@Component({
standalone: true,
template: `
<div>Current route: {{ leafRoute().snapshot.url }}</div>
<div>Route params: {{ leafRoute().snapshot.params | json }}</div>
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/utilities/Injectors/inject-params.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import { injectParams } from 'ngxtension/inject-params';

```ts
@Component({
standalone: true,
template: '<div>{{params() | json}}</div>',
})
class TestComponent {
Expand Down
2 changes: 0 additions & 2 deletions docs/src/content/docs/utilities/Injectors/inject-route-data.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { injectRouteData } from 'ngxtension/inject-route-data';

```ts
@Component({
standalone: true,
template: '<div>{{routeData() | json}}</div>',
})
class TestComponent {
Expand Down Expand Up @@ -146,7 +145,6 @@ A common use case is a layout component that needs to access metadata from any c

```ts
@Component({
standalone: true,
template: `
<header>
<h1>{{ pageTitle() }}</h1>
Expand Down
1 change: 0 additions & 1 deletion docs/src/content/docs/utilities/Injectors/navigation-end.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ import { injectNavigationEnd } from 'ngxtension/navigation-end';
import { NavigationEnd } from '@angular/router';

@Component({
standalone: true,
selector: 'app-example',
template: '<p>Example Component</p>',
})
Expand Down
Loading