docs(www): add install instructions component (#5114)

timdeschryver · web-flow · commit 92d6cdde08d4 · 2026-03-18T09:58:37.000-05:00
diff --git a/projects/www/src/app/app.component.ts b/projects/www/src/app/app.component.ts
@@ -14,6 +14,7 @@ import { AlertComponent } from './components/docs/alert.component';
 import { CodeExampleComponent } from './components/docs/code-example.component';
 import { CodeTabsComponent } from './components/docs/code-tabs.component';
 import { StackblitzComponent } from './components/docs/stackblitz.component';
+import { InstallInstructionsComponent } from './components/docs/install-instructions.component';
 import { FooterComponent } from './components/footer.component';
 import {
   TOP_BANNER_DISMISSED_STORAGE_KEY,
@@ -30,6 +31,7 @@ import {
     AlertComponent,
     CodeExampleComponent,
     StackblitzComponent,
+    InstallInstructionsComponent,
     FooterComponent,
   ],
   template: `
@@ -132,5 +134,11 @@ export class AppComponent {
       injector: this.#injector,
     });
     customElements.define('ngrx-docs-stackblitz', stackblitzElement);
+
+    const installInstructionsElement = createCustomElement(
+      InstallInstructionsComponent,
+      { injector: this.#injector }
+    );
+    customElements.define('ngrx-docs-install', installInstructionsElement);
   }
 }
diff --git a/projects/www/src/app/components/docs/code-example.component.ts b/projects/www/src/app/components/docs/code-example.component.ts
@@ -40,8 +40,8 @@ import { ExamplesService } from '@ngrx-io/app/examples/examples.service';
         }
       </button>
       <div #codeBody>
-        @if (path) {
-          <div [innerHTML]="codeContent() | ngrxCodeHighlight"></div>
+        @if (snippet || path) {
+          <div [innerHTML]="codeContent() | ngrxCodeHighlight: language"></div>
         } @else {
           <ng-content />
         }
@@ -138,6 +138,7 @@ export class CodeExampleComponent implements AfterViewInit {
   @Input() path = '';
   @Input() region = '';
   @Input() language = 'typescript';
+  @Input() snippet = '';
 
   codeBody = viewChild.required<ElementRef>('codeBody');
   copied = signal(false);
@@ -160,6 +161,11 @@ export class CodeExampleComponent implements AfterViewInit {
 
   async ngAfterViewInit() {
     if (isPlatformServer(this.platformId)) return;
+    if (this.snippet) {
+      this.codeContent.set(this.snippet);
+      return;
+    }
+
     if (!this.path) return;
 
     const content = await this.exampleService.extractSnippet(
diff --git a/projects/www/src/app/components/docs/code-highlight.pipe.ts b/projects/www/src/app/components/docs/code-highlight.pipe.ts
@@ -10,7 +10,7 @@ import {
 
 let highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
 getHighlighter({
-  langs: ['typescript'],
+  langs: ['typescript', 'sh', 'html'],
   themes: [ngrxTheme],
 }).then((h) => (highlighter = h));
 
@@ -22,9 +22,9 @@ getHighlighter({
 export class CodeHighlightPipe implements PipeTransform {
   private sanitizer = inject(DomSanitizer);
 
-  transform(code: string): SafeHtml {
+  transform(code: string, language = 'typescript'): SafeHtml {
     const html = highlighter?.codeToHtml(code, {
-      lang: 'typescript',
+      lang: language,
       theme: 'ngrx-theme',
     });
 
diff --git a/projects/www/src/app/components/docs/install-instructions.component.ts b/projects/www/src/app/components/docs/install-instructions.component.ts
@@ -0,0 +1,68 @@
+import { Component, computed, input } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { CodeExampleComponent } from './code-example.component';
+
+@Component({
+  selector: 'ngrx-install-instructions',
+  standalone: true,
+  imports: [MatTabsModule, CodeExampleComponent],
+  template: `
+    <mat-tab-group [preserveContent]="true">
+      <mat-tab label="npm">
+        <p>
+          For more information on using <code>npm</code> check out the docs
+          <a
+            href="https://docs.npmjs.com/cli/install"
+            target="_blank"
+            rel="noopener noreferrer"
+            >here</a
+          >.
+        </p>
+        <ngrx-code-example [snippet]="npmCommand()" language="sh" />
+      </mat-tab>
+      <mat-tab label="pnpm">
+        <p>
+          For more information on using <code>pnpm</code> check out the docs
+          <a
+            href="https://pnpm.io/cli/add"
+            target="_blank"
+            rel="noopener noreferrer"
+            >here</a
+          >.
+        </p>
+        <ngrx-code-example [snippet]="pnpmCommand()" language="sh" />
+      </mat-tab>
+      <mat-tab label="yarn">
+        <p>
+          For more information on using <code>yarn</code> check out the docs
+          <a
+            href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies"
+            target="_blank"
+            rel="noopener noreferrer"
+            >here</a
+          >.
+        </p>
+        <ngrx-code-example [snippet]="yarnCommand()" language="sh" />
+      </mat-tab>
+    </mat-tab-group>
+  `,
+})
+export class InstallInstructionsComponent {
+  packageName = input('');
+  devDependency = input(false);
+
+  npmCommand = computed(
+    () =>
+      `npm install ${this.packageName()}${this.devDependency() ? ' --save-dev' : ''}`
+  );
+
+  pnpmCommand = computed(
+    () =>
+      `pnpm add ${this.packageName()}${this.devDependency() ? ' --save-dev' : ''}`
+  );
+
+  yarnCommand = computed(
+    () =>
+      `yarn add ${this.packageName()}${this.devDependency() ? ' --dev' : ''}`
+  );
+}
diff --git a/projects/www/src/app/pages/guide/component-store/install.md b/projects/www/src/app/pages/guide/component-store/install.md
@@ -22,18 +22,8 @@ This command will automate the following steps:
 1. Update `package.json` > `dependencies` with `@ngrx/component-store`.
 2. Run the package manager to install the added dependency.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/component-store` manually using one of the following commands:
 
-```sh
-npm install @ngrx/component-store --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/component-store
-```
+<ngrx-docs-install package-name="@ngrx/component-store"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/component/install.md b/projects/www/src/app/pages/guide/component/install.md
@@ -20,18 +20,8 @@ This command will automate the following steps:
 1. Update `package.json` > `dependencies` with `@ngrx/component`.
 2. Run the package manager to install the added dependency.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/component` manually using one of the following commands:
 
-```sh
-npm install @ngrx/component --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/component
-```
+<ngrx-docs-install package-name="@ngrx/component"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/data/install.md b/projects/www/src/app/pages/guide/data/install.md
@@ -36,18 +36,8 @@ With the `migrateNgRxData` flag the following will also take place:
 1. Remove `ngrx-data` from `package.json` > `dependencies`.
 2. Rename `ngrx-data` types to the matching `@ngrx/data` types.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/data` manually using one of the following commands:
 
-```sh
-npm install @ngrx/data --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/data
-```
+<ngrx-docs-install package-name="@ngrx/data"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/effects/install.md b/projects/www/src/app/pages/guide/effects/install.md
@@ -27,18 +27,8 @@ This command will automate the following steps:
 3. Update your `src/app/app.module.ts` > `imports` array with `EffectsModule.forRoot([AppEffects])`. If you provided flags then the command will attempt to locate and update module found by the flags.
 4. If the project is using a `standalone bootstrap`, it adds `provideEffects()` into the application config.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/effects` manually using one of the following commands:
 
-```sh
-npm install @ngrx/effects --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/effects
-```
+<ngrx-docs-install package-name="@ngrx/effects"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/entity/install.md b/projects/www/src/app/pages/guide/entity/install.md
@@ -13,18 +13,8 @@ This command will automate the following steps:
 1. Update `package.json` > `dependencies` with `@ngrx/entity`.
 2. Run `npm install` to install those dependencies.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/entity` manually using one of the following commands:
 
-```sh
-npm install @ngrx/entity --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/entity
-```
+<ngrx-docs-install package-name="@ngrx/entity"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/eslint-plugin/install.md b/projects/www/src/app/pages/guide/eslint-plugin/install.md
@@ -10,18 +10,8 @@ ng add @ngrx/eslint-plugin
 
 The command will prompt you to select which config you would like to have preconfigured; you can read the detailed list of available configs [here](guide/eslint-plugin/#configurations).
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/eslint-plugin` manually using one of the following commands:
 
-```sh
-npm install @ngrx/eslint-plugin --save-dev
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/eslint-plugin -D
-```
+<ngrx-docs-install package-name="@ngrx/eslint-plugin" npm-flags="--save-dev" yarn-flags="-D"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/operators/install.md b/projects/www/src/app/pages/guide/operators/install.md
@@ -13,18 +13,8 @@ This command will automate the following steps:
 1. Update `package.json` > `dependencies` with `@ngrx/operators`.
 2. Run the package manager to install the added dependency.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/operators` manually using one of the following commands:
 
-```sh
-npm install @ngrx/operators --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/operators
-```
+<ngrx-docs-install package-name="@ngrx/operators"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/router-store/install.md b/projects/www/src/app/pages/guide/router-store/install.md
@@ -22,18 +22,8 @@ This command will automate the following steps:
 2. Run `npm install` to install those dependencies.
 3. By default it adds `provideRouterStore()` to the `ApplicationConfig` in the `app.config.ts` file. If you provided flags then the command will attempt to locate and update the corresponding config found by the flags.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/router-store` manually using one of the following commands:
 
-```sh
-npm install @ngrx/router-store --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/router-store
-```
+<ngrx-docs-install package-name="@ngrx/router-store"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/schematics/install.md b/projects/www/src/app/pages/guide/schematics/install.md
@@ -12,18 +12,8 @@ This command will automate the following steps:
 
 1. Add `@ngrx/schematics` to `angular.json` > `cli > schematicCollections`. If `schematicCollections` does not exist, it will be created.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/schematics` manually using one of the following commands:
 
-```sh
-npm install @ngrx/schematics --save-dev
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/schematics --dev
-```
+<ngrx-docs-install package-name="@ngrx/schematics" npm-flags="--save-dev" yarn-flags="--dev"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/signals/install.md b/projects/www/src/app/pages/guide/signals/install.md
@@ -13,18 +13,8 @@ This command will automate the following steps:
 1. Update `package.json` > `dependencies` with `@ngrx/signals`.
 2. Run the package manager to install the added dependency.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/signals` manually using one of the following commands:
 
-```sh
-npm install @ngrx/signals --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/signals
-```
+<ngrx-docs-install package-name="@ngrx/signals"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/store-devtools/install.md b/projects/www/src/app/pages/guide/store-devtools/install.md
@@ -23,18 +23,8 @@ This command will automate the following steps:
 2. Run `npm install` to install those dependencies.
 3. Add the devtools to the application config provider's using `provideStoreDevtools({ maxAge: 25, logOnly: !isDevMode() })`. The `maxAge` property will be set to the flag `maxAge` if provided.
 
-## Installing with `npm`
+## Manual Installation
 
-For more information on using `npm` check out the docs <a href="https://docs.npmjs.com/cli/install" target="_blank">here</a>.
+You can also install `@ngrx/store-devtools` manually using one of the following commands:
 
-```sh
-npm install @ngrx/store-devtools --save
-```
-
-## Installing with `yarn`
-
-For more information on using `yarn` check out the docs <a href="https://yarnpkg.com/getting-started/usage#installing-all-the-dependencies" target="_blank">here</a>.
-
-```sh
-yarn add @ngrx/store-devtools
-```
+<ngrx-docs-install package-name="@ngrx/store-devtools"></ngrx-docs-install>
diff --git a/projects/www/src/app/pages/guide/store/install.md b/projects/www/src/app/pages/guide/store/install.md
