docs(signals): apply new naming convention from Angular styleguide #4790

markostanimirovic · 2025-05-21T19:30:03Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngrx/platform/blob/main/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes / features)
Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[x] Documentation content changes
[ ] Other... Please describe:

Does this PR introduce a breaking change?

[ ] Yes
[x] No

netlify · 2025-05-21T19:30:07Z

✅ Deploy Preview for ngrx-io ready!

Name	Link
🔨 Latest commit	`a1b6a1c`
🔍 Latest deploy log	https://app.netlify.com/projects/ngrx-io/deploys/6836c6887e7ec700088b47d5
😎 Deploy Preview	https://deploy-preview-4790--ngrx-io.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-05-21T19:32:20Z

✅ Deploy Preview for ngrx-site-v19 ready!

Name	Link
🔨 Latest commit	`a1b6a1c`
🔍 Latest deploy log	https://app.netlify.com/projects/ngrx-site-v19/deploys/6836c688cc5915000850d32d
😎 Deploy Preview	https://deploy-preview-4790--ngrx-site-v19.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

timdeschryver · 2025-05-22T11:26:43Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

@@ -147,7 +147,7 @@ export class BooksComponent implements OnInit {
    )
  );

-  ngOnInit(): void {
+  constructor() {


Just a question for my understanding of the new guide.
When is the constructor preferred over the lifecycle hook?
(because I noticed other samples that make use of the OnInit hook)

I haven’t found anything in the documentation that explicitly recommends preferring the constructor over lifecycle hooks. The closest reference is this guideline about keeping lifecycle methods short: https://next.angular.dev/style-guide#keep-lifecycle-methods-simple

There are also some hooks which will get deprecated for Signal Components, but OnInit is not among them: angular/angular#49682

That said, I personally default to using the constructor—unless I need to implicitly access an InputSignal. The main reason is that the constructor allows for early field initialization and any setup that needs to happen as soon as possible. It also runs within the injection context, which can be important for certain use cases.

Summary: I'm fine for moving to constructor, even if it is not listed in the new style guide.

When is the constructor preferred over the lifecycle hook?

@timdeschryver

When a reactive method is called with a signal or observable, it should be called within the injection context (constructor). Otherwise, the warning will be displayed in development mode.

At the time when I wrote this guide, we didn't have this warning. The guide is now in accordance with the latest changes.

Got it, thanks for both answers 👍

rainerhahnekamp

I would rename Numbers to NumbersDoubler. Todos and Counter are good names and should stay, but Numbers is too generic imho.

rainerhahnekamp · 2025-05-26T17:28:11Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

@@ -15,7 +15,7 @@ import { map, pipe, tap } from 'rxjs';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';

 @Component({ /* ... */ })
-export class NumbersComponent {
+export class Numbers {


According to this comment from Matthieu, maybe a more specific name?

https://x.com/Jean__Meche/status/1925866491506831784

Suggested change

export class Numbers {

export class NumbersDoubler {

There is no recommendation in the official docs that components with a single word or generic name should be avoided.

https://next.angular.dev/style-guide#naming

This component is created just to show how rxMethod should be used. It does not have a template that visualizes a specific use case, and because of that, I haven't named it NumberList, NumbersCard, NumberDetails, or similar. In real-world scenarios, we would not create a component for logging double numbers anyway.

rainerhahnekamp · 2025-05-26T17:28:32Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

 import { map, pipe, tap } from 'rxjs';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';

 @Component({ /* ... */ })
-export class NumbersComponent implements OnInit {
+export class Numbers {


Suggested change

export class Numbers {

export class NumbersDoubler {

rainerhahnekamp · 2025-05-26T17:28:56Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

 import { map, pipe, tap } from 'rxjs';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';

 @Component({ /* ... */ })
-export class NumbersComponent implements OnInit {
+export class Numbers {


Suggested change

export class Numbers {

export class NumbersDoubler {

rainerhahnekamp · 2025-05-26T17:29:16Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

 import { interval, map, of, pipe, tap } from 'rxjs';
 import { rxMethod } from '@ngrx/signals/rxjs-interop';

 @Component({ /* ... */ })
-export class NumbersComponent implements OnInit {
+export class Numbers {


Suggested change

export class Numbers {

export class NumbersDoubler {

rainerhahnekamp · 2025-05-26T17:29:40Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

@@ -221,7 +221,7 @@ export class NumbersService {
 }

 @Component({ /* ... */ })
-export class NumbersComponent implements OnInit {
+export class Numbers implements OnInit {


Suggested change

export class Numbers implements OnInit {

export class NumbersDoubler implements OnInit {

rainerhahnekamp · 2025-05-26T17:35:46Z

projects/ngrx.io/content/guide/signals/signal-method.md

@@ -103,13 +103,13 @@ When a `signalMethod` is created in an ancestor injection context, it's necessar

 ```ts
 @Component({ /* ... */ })
-export class NumbersComponent implements OnInit {
+export class Numbers implements OnInit {


Suggested change

export class Numbers implements OnInit {

export class NumbersDoubler implements OnInit {

rainerhahnekamp · 2025-05-26T17:35:57Z

projects/ngrx.io/content/guide/signals/signal-method.md

  readonly numbersService = inject(NumbersService);
  readonly injector = inject(Injector);

  ngOnInit(): void {
    const value = signal(1);
-    // 👇 Providing the `NumbersComponent` injector
+    // 👇 Providing the `Numbers` component injector


Suggested change

// 👇 Providing the `Numbers` component injector

// 👇 Providing the `NumbersDoubler` component injector

rainerhahnekamp · 2025-05-26T17:37:14Z

projects/ngrx.io/content/guide/signals/signal-method.md

@@ -127,10 +127,10 @@ The `signalMethod` must be initialized within an injection context. To initializ

 ```ts
 @Component({ /* ... */ })
-export class NumbersComponent implements OnInit {
+export class Numbers implements OnInit {


Suggested change

export class Numbers implements OnInit {

export class NumbersDoubler implements OnInit {

rainerhahnekamp · 2025-05-26T17:37:26Z

projects/ngrx.io/content/guide/signals/signal-method.md

@@ -145,7 +145,7 @@ At first sight, `signalMethod`, might be the same as `effect`:

 ```ts
 @Component({ /* ... */ })
-export class NumbersComponent {
+export class Numbers {


Suggested change

export class Numbers {

export class NumbersDoubler {

rainerhahnekamp · 2025-05-26T17:46:53Z

projects/ngrx.io/content/guide/signals/rxjs-integration.md

@@ -147,7 +147,7 @@ export class BooksComponent implements OnInit {
    )
  );

-  ngOnInit(): void {
+  constructor() {


I haven’t found anything in the documentation that explicitly recommends preferring the constructor over lifecycle hooks. The closest reference is this guideline about keeping lifecycle methods short: https://next.angular.dev/style-guide#keep-lifecycle-methods-simple

There are also some hooks which will get deprecated for Signal Components, but OnInit is not among them: angular/angular#49682

That said, I personally default to using the constructor—unless I need to implicitly access an InputSignal. The main reason is that the constructor allows for early field initialization and any setup that needs to happen as soon as possible. It also runs within the injection context, which can be important for certain use cases.

Summary: I'm fine for moving to constructor, even if it is not listed in the new style guide.

…grx#4790)

docs(signals): apply new naming convention from Angular styleguide

96bb6ce

timdeschryver approved these changes May 22, 2025

View reviewed changes

timdeschryver mentioned this pull request May 23, 2025

Update Signals Docs #4793

Open

rainerhahnekamp requested changes May 26, 2025

View reviewed changes

markostanimirovic requested a review from rainerhahnekamp May 28, 2025 00:07

rainerhahnekamp approved these changes May 28, 2025

View reviewed changes

Merge branch 'main' into docs/signals/naming-convention

a1b6a1c

markostanimirovic merged commit 2af5f10 into main May 28, 2025
14 checks passed

markostanimirovic deleted the docs/signals/naming-convention branch May 28, 2025 08:24

rainerhahnekamp pushed a commit to rainerhahnekamp/ngrx that referenced this pull request Jun 1, 2025

docs(signals): apply new naming convention from Angular styleguide (n…

3a1ba0a

…grx#4790)

	export class Numbers implements OnInit {
	export class NumbersDoubler implements OnInit {

	// 👇 Providing the `Numbers` component injector
	// 👇 Providing the `NumbersDoubler` component injector

Uh oh!

docs(signals): apply new naming convention from Angular styleguide #4790

docs(signals): apply new naming convention from Angular styleguide #4790

Uh oh!

Conversation

markostanimirovic commented May 21, 2025

PR Checklist

PR Type

Does this PR introduce a breaking change?

Uh oh!

netlify bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ngrx-io ready!

Uh oh!

netlify bot commented May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ngrx-site-v19 ready!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rainerhahnekamp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

netlify bot commented May 21, 2025 •

edited

Loading

netlify bot commented May 21, 2025 •

edited

Loading