Angular v18

https://v18.angular.dev/
Admin
Angular is a platform and framework for building scalable single-page client applications using HTML...
Tokens:853,618
Snippets:7,564
Trust Score:9.9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Automated setup prompt and output

Source: https://v18.angular.dev/cli/completion

Example of the CLI prompting to enable autocompletion and the resulting output, including the appended line and instructions to restart or source the script.

```bash
$ ng serve? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) YesAppended `source <(ng completion script)` to `/home/my-username/.bashrc`. Restart your terminal or run:source <(ng completion script)to autocomplete `ng` commands.# Serve output...
```

--------------------------------

### Create a new Angular project with ng new

Source: https://v18.angular.dev/installation

Creates a new Angular project with the specified name. You will be presented with configuration options; use arrow and enter keys to navigate and select. Pressing enter accepts defaults. After setup, you should see '✔ Packages installed successfully. Successfully initialized git.'

```bash
ng new <project-name>
```

--------------------------------

### UpgradeAdapter example: hybrid AngularJS/Angular app

Source: https://v18.angular.dev/api/upgrade/UpgradeAdapter

Shows a complete hybrid AngularJS/Angular setup using UpgradeAdapter. It defines an AngularJS directive 'greet', downgrades an Angular component, upgrades the AngularJS directive, and bootstraps the hybrid app, verifying the rendered text.

```typescript
const adapter = new UpgradeAdapter(forwardRef(() => MyNg2Module));const module = angular.module('myExample', []);module.directive('greet', function() {  return {    scope: {salutation: '=', name: '=' },    template: '{{salutation}} {{name}}! - <span ng-transclude></span>'  };});module.directive('ng2', adapter.downgradeNg2Component(Ng2Component));@Component({  selector: 'ng2',  template: 'ng2 template: <greet salutation="Hello" [name]="world">text</greet>'})class Ng2Component {}@NgModule({  declarations: [Ng2Component, adapter.upgradeNg1Component('greet')],  imports: [BrowserModule]})class MyNg2Module {}document.body.innerHTML = '<ng2></ng2>';adapter.bootstrap(document.body, ['myExample']).ready(function() {  expect(document.body.textContent).toEqual("ng2 template: Hello world! - text");});
```

--------------------------------

### Test setup for BannerComponent with external files

Source: https://v18.angular.dev/guide/testing/components-scenarios

Test setup for BannerComponent with external files. Shows a failing setup missing compileComponents(), and two correct setups using compileComponents() in async beforeEach.

```typescript
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {BannerComponent} from './banner-external.component';
describe('BannerComponent (external files)', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;
  let h1: HTMLElement;
  describe('setup that may fail', () => {
    beforeEach(async () => {
      await TestBed.configureTestingModule({
        imports: [BannerComponent],
      }); // missing call to compileComponents()
      fixture = TestBed.createComponent(BannerComponent);
    });
    it('should create', () => {
      expect(fixture.componentInstance).toBeDefined();
    });
  });
  describe('Two beforeEach', () => {
    beforeEach(async () => {
      await TestBed.configureTestingModule({
        imports: [BannerComponent],
      }).compileComponents(); // compile template and css
    });
    // synchronous beforeEach
    beforeEach(() => {
      fixture = TestBed.createComponent(BannerComponent);
      component = fixture.componentInstance; // BannerComponent test instance
      h1 = fixture.nativeElement.querySelector('h1');
    });
    tests();
  });
  describe('One beforeEach', () => {
    beforeEach(async () => {
      await TestBed.configureTestingModule({
        imports: [BannerComponent],
      }).compileComponents();
      fixture = TestBed.createComponent(BannerComponent);
      component = fixture.componentInstance;
      h1 = fixture.nativeElement.querySelector('h1');
    });
    tests();
  });
  function tests() {
    it('no title in the DOM until manually call `detectChanges`', () => {
      expect(h1.textContent).toEqual('');
    });
    it('should display original title', () => {
      fixture.detectChanges();
      expect(h1.textContent).toContain(component.title);
    });
    it('should display a different test title', () => {
      component.title = 'Test Title';
      fixture.detectChanges();
      expect(h1.textContent).toContain('Test Title');
    });
  }
});
```

--------------------------------

### Simple bootstrapModule example

Source: https://v18.angular.dev/api/core/PlatformRef

Simple example of bootstrapping a module using the platformBrowser() function and the bootstrapModule method. The module imports BrowserModule and is passed to bootstrapModule.

```typescript
@NgModule({
  imports: [BrowserModule]
})
class MyModule {}
let moduleRef = platformBrowser().bootstrapModule(MyModule);
```

--------------------------------

### Run i18n commands for French build (ng serve/build with --configuration=fr)

Source: https://v18.angular.dev/guide/i18n/merge

Shows the sequence of CLI commands to add localization support Agriculture? Actually it shows the commands from ng add @angular/localize to ng build --configuration=production,fr. Use these commands to install, extract, and build the French locale. The example is presented as a single block in the source and is the same for all commands.sh file references. Note the commands include all extraction options and the final production build with configuration composition.

```shell
ng add @angular/localize
ng extract-i18n
ng extract-i18n --output-path src/locale
ng extract-i18n --format=xlf
ng extract-i18n --format=xlf2
ng extract-i18n --format=xmb
ng extract-i18n --format=json
ng extract-i18n --format=arb
ng extract-i18n --out-file source.xlf
ng build --localize
ng serve --configuration=fr
ng build --configuration=production,fr

```

--------------------------------

### Angular TestBed setup for HeroDetailComponent tests

Source: https://v18.angular.dev/guide/testing/components-scenarios

Angular TestBed setup for HeroDetailComponent tests, including a spy service override and a standard module setup with HttpClient testing. The overrideSetup function uses a HeroDetailServiceSpy to control getHero and saveHero, while heroModuleSetup uses provideHttpClientTesting to mock HTTP requests. Tests cover navigation, saving, and title case conversion.

```typescript
import {sharedImports} from '../shared/shared';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroDetailService} from './hero-detail.service';
import {HeroListComponent} from './hero-list.component';

////// Testing Vars //////
let component: HeroDetailComponent;
let harness: RouterTestingHarness;
let page: Page;

////// Tests //////
describe('HeroDetailComponent', () => {
  describe('with HeroModule setup', heroModuleSetup);
  describe('when override its provided HeroDetailService', overrideSetup);
  describe('with FormsModule setup', formsModuleSetup);
  describe('with SharedModule setup', sharedModuleSetup);
});

///////////////////
const testHero = getTestHeroes()[0];

function overrideSetup() {
  class HeroDetailServiceSpy {
    testHero: Hero = {...testHero};

    /* emit cloned test hero */
    getHero = jasmine
      .createSpy('getHero')
      .and.callFake(() => asyncData(Object.assign({}, this.testHero)));

    /* emit clone of test hero, with changes merged in */
    saveHero = jasmine
      .createSpy('saveHero')
      .and.callFake((hero: Hero) => asyncData(Object.assign(this.testHero, hero)));
  }

  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
          provideRouter([
            {path: 'heroes', component: HeroListComponent},
            {path: 'heroes/:id', component: HeroDetailComponent},
          ]),
          HttpClient,
          HttpHandler,
          // HeroDetailService at this level is IRRELEVANT!
          {provide: HeroDetailService, useValue: {}},
        ],
      }),
    )
      .overrideComponent(HeroDetailComponent, {
        set: {providers: [{provide: HeroDetailService, useClass: HeroDetailServiceSpy}]},
      })
      .compileComponents();
  });

  let hdsSpy: HeroDetailServiceSpy;

  beforeEach(async () => {
    harness = await RouterTestingHarness.create();
    component = await harness.navigateByUrl(`/heroes/${testHero.id}`, HeroDetailComponent);
    page = new Page();
    // get the component's injected HeroDetailServiceSpy
    hdsSpy = harness.routeDebugElement!.injector.get(HeroDetailService) as any;
    harness.detectChanges();
  });

  it('should have called `getHero`', () => {
    expect(hdsSpy.getHero.calls.count())
      .withContext('getHero called once')
      .toBe(1, 'getHero called once');
  });

  it("should display stub hero's name", () => {
    expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name);
  });

  it('should save stub hero change', fakeAsync(() => {
    const origName = hdsSpy.testHero.name;
    const newName = 'New Name';
    page.nameInput.value = newName;
    page.nameInput.dispatchEvent(new Event('input')); // tell Angular
    expect(component.hero.name).withContext('component hero has new name').toBe(newName);
    expect(hdsSpy.testHero.name).withContext('service hero unchanged before save').toBe(origName);
    click(page.saveBtn);
    expect(hdsSpy.saveHero.calls.count()).withContext('saveHero called once').toBe(1);
    tick(); // wait for async save to complete
    expect(hdsSpy.testHero.name).withContext('service hero has new name after save').toBe(newName);
    expect(TestBed.inject(Router).url).toEqual('/heroes');
  }));
}

////////////////////
import {getTestHeroes} from '../model/testing/test-hero.service';
const firstHero = getTestHeroes()[0];

function heroModuleSetup() {
  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
          provideRouter([
            {path: 'heroes/:id', component: HeroDetailComponent},
            {path: 'heroes', component: HeroListComponent},
          ]),
          provideHttpClient(),
          provideHttpClientTesting(),
        ],
      }),
    ).compileComponents();
  });

  describe('when navigate to existing hero', () => {
    let expectedHero: Hero;
    beforeEach(async () => {
      expectedHero = firstHero;
      await createComponent(expectedHero.id);
    });

    it("should display that hero's name", () => {
      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
    });

    it('should navigate when click cancel', () => {
      click(page.cancelBtn);
      expect(TestBed.inject(Router).url).toEqual(`/heroes/${expectedHero.id}`);
    });

    it('should save when click save but not navigate immediately', () => {
      click(page.saveBtn);
      expect(TestBed.inject(HttpTestingController).expectOne({method: 'PUT', url: 'api/heroes'}));
      expect(TestBed.inject(Router).url).toEqual('/heroes/41');
    });

    it('should navigate when click save and save resolves', fakeAsync(() => {
      click(page.saveBtn);
      tick(); // wait for async save to complete
      expect(TestBed.inject(Router).url).toEqual('/heroes/41');
    }));

    it('should convert hero name to Title Case', async () => {
      harness.fixture.autoDetectChanges();
      // get the name's input and display elements from the
    });
  });
}
```

--------------------------------

### Angular TestBed component overrides

Source: https://v18.angular.dev/guide/testing/services

Starts a describe block for testing component overrides, but the example is incomplete in the source.

```TypeScript
describe('TestBed component overrides:', () => {
    it("should override ChildComp's 
```

--------------------------------

### Set up and open a new schematics collection

Source: https://v18.angular.dev/tools/cli/schematics-authoring

Navigates to the collection folder, installs npm dependencies, builds the project, and opens the collection in VS Code.

```bash
cd hello-world
npm install
npm run build
code .
```

--------------------------------

### Using a jQuery plugin

Source: https://v18.angular.dev/tools/libraries/using-libraries

Example of using a jQuery plugin. The installed @types/jquery does not include the plugin, so you need to add an interface in src/typings.d.ts.

```typescript
$('.test').myPlugin();
```

--------------------------------

### HeroDetailComponent testing setup with spy service

Source: https://v18.angular.dev/guide/testing/components-scenarios

This is a partial code block from the Angular testing guide for the HeroDetailComponent. It shows the setup for testing with a spy service and includes imports, test scaffolding, and the beginning of the heroModuleSetup function. The code is incomplete as displayed in the source.

```typescript
import {HttpClient, HttpHandler, provideHttpClient} from '@angular/common/http';
import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
import {fakeAsync, TestBed, tick} from '@angular/core/testing';
import {provideRouter, Router} from '@angular/router';
import {RouterTestingHarness} from '@angular/router/testing';
import {asyncData, click} from '../../testing';
import {Hero} from '../model/hero';
import {sharedImports} from '../shared/shared';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroDetailService} from './hero-detail.service';
import {HeroListComponent} from './hero-list.component';

////// Testing Vars //////
let component: HeroDetailComponent;
let harness: RouterTestingHarness;
let page: Page;

////// Tests //////
describe('HeroDetailComponent', () => {
  describe('with HeroModule setup', heroModuleSetup);
  describe('when override its provided HeroDetailService', overrideSetup);
  describe('with FormsModule setup', formsModuleSetup);
  describe('with SharedModule setup', sharedModuleSetup);
});

///////////////////
const testHero = getTestHeroes()[0];

function overrideSetup() {
  class HeroDetailServiceSpy {
    testHero: Hero = {...testHero};
    /* emit cloned test hero */
    getHero = jasmine
      .createSpy('getHero')
      .and.callFake(() => asyncData(Object.assign({}, this.testHero)));
    /* emit clone of test hero, with changes merged in */
    saveHero = jasmine
      .createSpy('saveHero')
      .and.callFake((hero: Hero) => asyncData(Object.assign(this.testHero, hero)));
  }

  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
          provideRouter([
            {path: 'heroes', component: HeroListComponent},
            {path: 'heroes/:id', component: HeroDetailComponent},
          ]),
          HttpClient,
          HttpHandler,
          // HeroDetailService at this level is IRRELEVANT!
          {provide: HeroDetailService, useValue: {}},
        ],
      }),
    )
      .overrideComponent(HeroDetailComponent, {
        set: {providers: [{provide: HeroDetailService, useClass: HeroDetailServiceSpy}]},
      })
      .compileComponents();
  });

  let hdsSpy: HeroDetailServiceSpy;

  beforeEach(async () => {
    harness = await RouterTestingHarness.create();
    component = await harness.navigateByUrl(`/heroes/${testHero.id}`, HeroDetailComponent);
    page = new Page();
    // get the component's injected HeroDetailServiceSpy
    hdsSpy = harness.routeDebugElement!.injector.get(HeroDetailService) as any;
    harness.detectChanges();
  });

  it('should have called `getHero`', () => {
    expect(hdsSpy.getHero.calls.count())
      .withContext('getHero called once')
      .toBe(1, 'getHero called once');
  });

  it("should display stub hero's name", () => {
    expect(page.nameDisplay.textContent).toBe(hdsSpy.testHero.name);
  });

  it('should save stub hero change', fakeAsync(() => {
    const origName = hdsSpy.testHero.name;
    const newName = 'New Name';
    page.nameInput.value = newName;
    page.nameInput.dispatchEvent(new Event('input')); // tell Angular
    expect(component.hero.name).withContext('component hero has new name').toBe(newName);
    expect(hdsSpy.testHero.name).withContext('service hero unchanged before save').toBe(origName);
    click(page.saveBtn);
    expect(hdsSpy.saveHero.calls.count()).withContext('saveHero called once').toBe(1);
    tick(); // wait for async save to complete
    expect(hdsSpy.testHero.name).withContext('service hero has new name after save').toBe(newName);
    expect(TestBed.inject(Router).url).toEqual('/heroes');
  }));
}

////////////////////
import {getTestHeroes} from '../model/testing/test-hero.service';
const firstHero = getTestHeroes()[0];

function heroModuleSetup() {
  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
```

--------------------------------

### routes.txt with parameterized routes

Source: https://v18.angular.dev/guide/prerendering

Example `routes.txt` file listing parameterized routes to prerender, one per line. Used with the `routesFile` option to prerender routes like `product/:id`.

```text
/products/1
/products/555
```

--------------------------------

### TestBed setup and ValueService tests

Source: https://v18.angular.dev/guide/testing/services

Imports and setup for TestBed-based tests, including a custom NotProvided service and a describe block for ValueService. It demonstrates how to configure the testing module, inject services, and use waitForAsync, fakeAsync, and done callbacks for asynchronous operations.

```typescript
import {Component, DebugElement, Injectable} from '@angular/core';
import {
  ComponentFixture,
  fakeAsync,
  inject,
  TestBed,
  tick,
  waitForAsync,
} from '@angular/core/testing';
import {FormsModule, NgControl, NgModel} from '@angular/forms';
import {By} from '@angular/platform-browser';
import {addMatchers, click} from '../../testing';
import {
  BankAccountComponent,
  BankAccountParentComponent,
  Child1Component,
  Child2Component,
  Child3Component,
  ExternalTemplateComponent,
  InputComponent,
  IoComponent,
  IoParentComponent,
  LightswitchComponent,
  MasterService,
  MyIfChildComponent,
  MyIfComponent,
  MyIfParentComponent,
  NeedsContentComponent,
  ParentComponent,
  ReversePipeComponent,
  ShellComponent,
  TestProvidersComponent,
  TestViewProvidersComponent,
  ValueService,
} from './demo';
export class NotProvided extends ValueService {
  /* example below */
}
beforeEach(addMatchers);
describe('demo (with TestBed):', () => {
  ////////  Service Tests  /////////////
  describe('ValueService', () => {
    let service: ValueService;
    beforeEach(() => {
      TestBed.configureTestingModule({providers: [ValueService]});
      service = TestBed.inject(ValueService);
    });
    it('should use ValueService', () => {
      service = TestBed.inject(ValueService);
      expect(service.getValue()).toBe('real value');
    });
    it('can inject a default value when service is not provided', () => {
      expect(TestBed.inject(NotProvided, null)).toBeNull();
    });
    it('test should wait for ValueService.getPromiseValue', waitForAsync(() => {
      service.getPromiseValue().then((value) => expect(value).toBe('promise value'));
    }));
    it('test should wait for ValueService.getObservableValue', waitForAsync(() => {
      service.getObservableValue().subscribe((value) => expect(value).toBe('observable value'));
    }));
    // Must use done. See https://github.com/angular/angular/issues/10127
    it('test should wait for ValueService.getObservableDelayValue', (done: DoneFn) => {
      service.getObservableDelayValue().subscribe((value) => {
        expect(value).toBe('observable delay value');
        done();
      });
    });
    it('should allow the use of fakeAsync', fakeAsync(() => {
      let value: any;
      service.getPromiseValue().then((val: any) => (value = val));
      tick(); // Trigger JS engine cycle until all promises resolve.
    }));
```

--------------------------------

### Install Angular CLI with sudo on Unix

Source: https://v18.angular.dev/tools/cli/setup-local

On some Unix-like setups, global npm scripts may be owned by the root user, so the install command may fail with a permission error. Run with sudo to execute the command as the root user and enter your password when prompted.

```bash
sudo npm install -g @angular/cli
```

--------------------------------

### Router.initialNavigation

Source: https://v18.angular.dev/api/router/Router

Sets up the location change listener and performs the initial navigation.

```APIDOC
## initialNavigation(): void

### Description
Sets up the location change listener and performs the initial navigation.

### Method
initialNavigation

### Parameters
None

### Returns
void
```

--------------------------------

### Avoid @Inject() parameter decorator for dependencies

Source: https://v18.angular.dev/style-guide

Avoid using @Inject() parameter decorator for each dependency. This example shows the verbose approach that the style guide discourages.

```typescript
import {Inject} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {HeroService} from './hero.service';
/* avoid */
export class HeroArena {
  constructor(
    @Inject(HeroService) private heroService: HeroService,
    @Inject(HttpClient) private http: HttpClient,
  ) {}
}
```

--------------------------------

### Test setup with beforeEach and DOM queries

Source: https://v18.angular.dev/guide/testing/components-basics

A more comprehensive test setup using beforeEach to configure TestBed and create the component. It includes multiple tests to verify the component renders 'banner works!' and demonstrates different ways to query the DOM using nativeElement and DebugElement.

```typescript
describe('BannerComponent (with beforeEach)', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({imports: [BannerComponent]});
    fixture = TestBed.createComponent(BannerComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeDefined();
  });

  it('should contain "banner works!"', () => {
    const bannerElement: HTMLElement = fixture.nativeElement;
    expect(bannerElement.textContent).toContain('banner works!');
  });

  it('should have <p> with "banner works!"', () => {
    const bannerElement: HTMLElement = fixture.nativeElement;
    const p = bannerElement.querySelector('p')!;
    expect(p.textContent).toEqual('banner works!');
  });

  it('should find the <p> with fixture.debugElement.nativeElement)', () => {
    const bannerDe: DebugElement = fixture.debugElement;
    const bannerEl: HTMLElement = bannerDe.nativeElement;
    const p = bannerEl.querySelector('p')!;
    expect(p.textContent).toEqual('banner works!');
  });

  it('should find the <p> with fixture.debugElement.query(By.css)', () => {
    const bannerDe: DebugElement = fixture.debugElement;
    const paragraphDe = bannerDe.query(By.css('p'));
    const p: HTMLElement = paragraphDe.nativeElement;
    expect(p.textContent).toEqual('banner works!');
  });
});
```

--------------------------------

### Manual setup: source script

Source: https://v18.angular.dev/cli/completion

Command to manually enable autocompletion by sourcing the completion script in your shell startup.

```bash
source <(ng completion script)
```

--------------------------------

### Using renderApplication with bootstrapApplication

Source: https://v18.angular.dev/api/platform-server/renderApplication

Example usage of renderApplication. It defines a bootstrap function that calls bootstrapApplication with RootComponent and appConfig, then awaits renderApplication to get the rendered string output.

```typescript
const bootstrap = () => bootstrapApplication(RootComponent, appConfig);
const output: string = await renderApplication(bootstrap);
```

--------------------------------

### $location.hash() - get the current hash fragment

Source: https://v18.angular.dev/api/common/upgrade/%24locationShim

Retrieves the current hash fragment from the URL. The example uses a URL with a hash value and shows that $location.hash() returns the string after the '#'.

```javascript
// given URL http://example.com/#/some/path?foo=bar&baz=xoxo#hashValue
let hash = $location.hash();
// => "hashValue"
```

--------------------------------

### setUpLocationSync

Source: https://v18.angular.dev/api/router/upgrade/setUpLocationSync

Function signature and parameter documentation for setUpLocationSync.

```APIDOC
## setUpLocationSync

### Description
Sets up a location change listener to trigger `history.pushState`. Works around the problem that `onPopState` does not trigger `history.pushState`. Must be called _after_ calling `UpgradeModule.bootstrap`.

### Function Signature
```typescript
function setUpLocationSync(ngUpgrade: UpgradeModule, urlType?: "path" | "hash"): void;
```

### Parameters
- **ngUpgrade** (`UpgradeModule`) - Required - The upgrade NgModule.
- **urlType** (`"path" | "hash"`) - Optional - The location strategy.

### Returns
`void`
```

--------------------------------

### Complete example: app/user.component.ts

Source: https://v18.angular.dev/tutorials/learn-angular/16-form-control-values

Full component file showing the complete setup with `FormsModule`, two-way binding, and a button to show the framework value. The `showFramework()` method is empty in this version.

```typescript
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
  

@Component({
selector: 'app-user',
template: `
<p>Username: {{ username }}</p>
<p>Framework:</p>
<label for="framework">
Favorite Framework:
<input id="framework" type="text" [(ngModel)]="favoriteFramework" />
</label>
<button (click)="showFramework()">Show Framework</button>
`,
standalone: true,
imports: [FormsModule],
})
export class UserComponent {
favoriteFramework = '';
username = 'youngTech';
  

showFramework() {}
}
```

--------------------------------

### HeroButtonComponent with templateUrl and styleUrls

Source: https://v18.angular.dev/style-guide

Example of a standalone Angular component that uses templateUrl and styleUrls to reference separate HTML and CSS files. This follows the style guide recommendation to extract templates and styles into separate files.

```TypeScript
import {Component} from '@angular/core';
@Component({
  standalone: true,
  selector: 'toh-hero-button',
  templateUrl: './hero-button.component.html',
})
export class HeroButtonComponent {}

```

--------------------------------

### Run the development server

Source: https://v18.angular.dev/guide/routing/routing-with-urlmatcher

Use the Angular CLI to serve the application for testing.

```bash
ng serve

```

--------------------------------

### Recommended HeroesComponent with separate template and style files

Source: https://v18.angular.dev/style-guide

This example shows the recommended approach for the HeroesComponent, using templateUrl and styleUrls to reference separate HTML and CSS files. It follows the style guide rule 05-04 and improves readability and maintainability.

```TypeScript
import {Component} from '@angular/core';
import {Observable} from 'rxjs';
import {Hero, HeroService} from './shared';
import {AsyncPipe, NgFor, NgIf, UpperCasePipe} from '@angular/common';
@Component({
  standalone: true,
  selector: 'toh-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css'],
  imports: [NgFor, NgIf, AsyncPipe, UpperCasePipe],
})
export class HeroesComponent {
  heroes: Observable<Hero[]>;
  selectedHero!: Hero;
  constructor(private heroService: HeroService) {
    this.heroes = this.heroService.getHeroes();
  }
}

```

--------------------------------

### Build the app shell (production)

Source: https://v18.angular.dev/ecosystem/service-workers/app-shell

Build the application with the production configuration to verify the app shell is rendered.

```bash
ng build
```

--------------------------------

### Build, test, and lint a library

Source: https://v18.angular.dev/tools/libraries/creating-libraries

Build, test, and lint the library project with CLI commands. The build command uses the development configuration.

```bash
ng build my-lib --configuration development
ng test my-lib
ng lint my-lib
```

--------------------------------

### Build the app shell (development)

Source: https://v18.angular.dev/ecosystem/service-workers/app-shell

Build the application with the development configuration to verify the app shell is rendered.

```bash
ng build --configuration=development
```

--------------------------------

### Build and serve localized app

Source: https://v18.angular.dev/guide/i18n/add-package

Commands to build and serve localized versions of the app. Use --localize to build for all locales, --configuration to specify a locale configuration, and combine configurations for production builds.

```bash
ng build --localize
```

```bash
ng serve --configuration=fr
```

```bash
ng build --configuration=production,fr
```

--------------------------------

### Simulating user input with dispatchEvent in HeroDetailComponent test

Source: https://v18.angular.dev/guide/testing/components-scenarios

This test setup for HeroDetailComponent includes a spy for HeroDetailService and uses RouterTestingHarness. It demonstrates how to set up the component with a router and provide HTTP testing utilities. The example shows the proper sequence for simulating user input by setting an input element's value and calling dispatchEvent().

```TypeScript
import {HttpClient, HttpHandler, provideHttpClient} from '@angular/common/http';
import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
import {fakeAsync, TestBed, tick} from '@angular/core/testing';
import {provideRouter, Router} from '@angular/router';
import {RouterTestingHarness} from '@angular/router/testing';
import {asyncData, click} from '../../testing';
import {Hero} from '../model/hero';
import {sharedImports} from '../shared/shared';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroDetailService} from './hero-detail.service';
import {HeroListComponent} from './hero-list.component';

////// Testing Vars //////
let component: HeroDetailComponent;
let harness: RouterTestingHarness;
let page: Page;

////// Tests //////
describe('HeroDetailComponent', () => {
  describe('with HeroModule setup', heroModuleSetup);
  describe('when override its provided HeroDetailService', overrideSetup);
  describe('with FormsModule setup', formsModuleSetup);
  describe('with SharedModule setup', sharedModuleSetup);
});

///////////////////
const testHero = getTestHeroes()[0];

function overrideSetup() {
  class HeroDetailServiceSpy {
    testHero: Hero = {...testHero};

    /* emit cloned test hero */
    getHero = jasmine
      .createSpy('getHero')
      .and.callFake(() => asyncData(Object.assign({}, this.testHero)));

    /* emit clone of test hero, with changes merged in */
    saveHero = jasmine
      .createSpy('saveHero')
      .and.callFake((hero: Hero) => asyncData(Object.assign(this.testHero, hero)));
  }

  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
          provideRouter([
            {path: 'heroes', component: HeroListComponent},
            {path: 'heroes/:id', component: HeroDetailComponent},
          ]),
          HttpClient,
          HttpHandler,
          // HeroDetailService at this level is IRRELEVANT! 
```

--------------------------------

### Run the hello-world schematic

Source: https://v18.angular.dev/tools/cli/schematics-authoring

Runs the hello-world schematic from the current directory. This schematic has no required options.

```bash
schematics .:hello-world
```

--------------------------------

### Create a new schematic with schematics blank

Source: https://v18.angular.dev/tools/cli/schematics-authoring

Creates a new schematic named hello-world in a new project folder of the same name. The blank schematic is provided by the Schematics CLI.

```bash
schematics blank --name=hello-world
```

--------------------------------

### Angular async helper test suite

Source: https://v18.angular.dev/guide/testing/components-scenarios

Example test suite from the Angular testing guide demonstrating various async testing patterns: normal tests, async tests with done callback, waitForAsync with setTimeout and setInterval, and promise-based tests. The afterEach hook asserts that the async operations completed. The comment at the end indicates that done, async, or fakeAsync can be used.

```typescript
import {fakeAsync, tick, waitForAsync} from '@angular/core/testing';
import {interval, of} from 'rxjs';
import {delay, take} from 'rxjs/operators';

describe('Angular async helper', () => {
  describe('async', () => {
    let actuallyDone = false;

    beforeEach(() => {
      actuallyDone = false;
    });

    afterEach(() => {
      expect(actuallyDone).withContext('actuallyDone should be true').toBe(true);
    });

    it('should run normal test', () => {
      actuallyDone = true;
    });

    it('should run normal async test', (done: DoneFn) => {
      setTimeout(() => {
        actuallyDone = true;
        done();
      }, 0);
    });

    it('should run async test with task', waitForAsync(() => {
      setTimeout(() => {
        actuallyDone = true;
      }, 0);
    }));

    it('should run async test with task', waitForAsync(() => {
      const id = setInterval(() => {
        actuallyDone = true;
        clearInterval(id);
      }, 100);
    }));

    it('should run async test with successful promise', waitForAsync(() => {
      const p = new Promise((resolve) => {
        setTimeout(resolve, 10);
      });
      p.then(() => {
        actuallyDone = true;
      });
    }));

    it('should run async test with failed promise', waitForAsync(() => {
      const p = new Promise((resolve, reject) => {
        setTimeout(reject, 10);
      });
      p.catch(() => {
        actuallyDone = true;
      });
    }));

    // Use done. Can also use async or fakeAsync.
```

--------------------------------

### index.html polyfill scripts for non-CLI users

Source: https://v18.angular.dev/reference/versions

For non-CLI projects, add polyfill scripts directly to the host web page. The example shows pre-zone polyfills, zone.js, and a placeholder for application polyfills. Zone flags are commented out and can be enabled to improve startup performance, but may cause hard-to-trace bugs.

```html
<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script>
  /**
   * you can configure some zone flags which can disable zone interception for some
   * asynchronous activities to improve startup performance - use these options only
   * if you know what you are doing as it could result in hard to trace down bugs.
   */
  // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
  // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  /*
   * in Edge developer tools, the addEventListener will also be wrapped by zone.js
   * with the following flag, it will bypass `zone.js` patch for Edge.
   */
  // __Zone_enable_cross_context_check = true;
</script>
<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<!-- application polyfills -->
```

--------------------------------

### HeroDetailComponent test imports and setup

Source: https://v18.angular.dev/guide/testing/components-scenarios

Imports and test setup for HeroDetailComponent tests, including HTTP testing, router testing, and the test suites for different module setups.

```typescript
import {HttpClient, HttpHandler, provideHttpClient} from '@angular/common/http';import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';import {fakeAsync, TestBed, tick} from '@angular/core/testing';import {provideRouter, Router} from '@angular/router';import {RouterTestingHarness} from '@angular/router/testing';import {asyncData, click} from '../../testing';import {Hero} from '../model/hero';import {sharedImports} from '../shared/shared';import {HeroDetailComponent} from './hero-detail.component';import {HeroDetailService} from './hero-detail.service';import {HeroListComponent} from './hero-list.component';////// Testing Vars //////let component: HeroDetailComponent;let harness: RouterTestingHarness;let page: Page;////// Tests //////describe('HeroDetailComponent', () => {  describe('with HeroModule setup', heroModuleSetup);  describe('when override its provided HeroDetailService', overrideSetup);  describe('with FormsModule setup', formsModuleSetup);  describe('with SharedModule setup', sharedModuleSetup);});
```

--------------------------------

### get

Source: https://v18.angular.dev/api/forms/FormRecord

Retrieves a control at the given path. See AbstractControl#get for additional information.

```APIDOC
## get

### Description
Retrieves a control at the given path. See `AbstractControl#get` for additional information.

### Method
get

### Parameters
- **path** (P extends string | readonly (string | number)[] | Array<string | number>) - Required - The path to the control.

### Returns
- **AbstractControl<ɵGetProperty<TRawValue, P>, ɵGetProperty<TRawValue, P>>** - The control at the given path.
```

--------------------------------

### Example template with i18n

Source: https://v18.angular.dev/api/localize/loadTranslations

Example Angular template with `i18n` attribute that produces a message with placeholders.

```html
<div i18n>pre<span>inner-pre<b>bold</b>inner-post</span>post</div>
```

--------------------------------

### Set up hero module with HTTP testing providers

Source: https://v18.angular.dev/guide/testing/components-scenarios

Sets up a test module for the hero detail component using the real HeroDetailService and HTTP testing utilities. Imports the test hero service and defines a setup function that configures the TestBed with router and HTTP testing providers.

```typescript
import {getTestHeroes} from '../model/testing/test-hero.service';
const firstHero = getTestHeroes()[0];
function heroModuleSetup() {
  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
          provideRouter([
            {path: 'heroes/:id', component: HeroDetailComponent},
            {path: 'heroes', component: HeroListComponent},
          ]),
          provideHttpClient(),
          provideHttpClientTesting(),
        ],
      }),
    ).compileComponents();
  });
```

--------------------------------

### Install Schematics CLI

Source: https://v18.angular.dev/tools/cli/schematics-authoring

Installs the @angular-devkit/schematics-cli globally using npm. Requires Node 6.9 or later.

```bash
npm install -g @angular-devkit/schematics-cli
```

--------------------------------

### Assets configuration with glob, input, and output

Source: https://v18.angular.dev/reference/configs/workspace-config

Example of an assets array in the build options, using objects to specify glob patterns, input paths, and output paths. This is the default asset configuration represented in detail.

```json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets/",
                "output": "/assets/"
              },
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              }
            ]
          }
        }
      }
    }
  }
}
```

--------------------------------

### Global install command

Source: https://v18.angular.dev/cli/completion

Installs the Angular CLI globally to ensure the `ng` command is available for autocompletion.

```bash
npm install -g @angular/cli
```

--------------------------------

### Example translations map

Source: https://v18.angular.dev/api/localize/loadTranslations

Example of the `translations` map format, showing the message ID and translated message with placeholders.

```json
{  "2932901491976224757":     "pre{$START_TAG_SPAN}inner-pre{$START_BOLD_TEXT}bold{$CLOSE_BOLD_TEXT}inner-post{$CLOSE_TAG_SPAN}post"}
```

--------------------------------

### HeroModule setup with HTTP testing and navigation tests

Source: https://v18.angular.dev/guide/testing/components-scenarios

Sets up the HeroDetailComponent with the HeroModule configuration, using provideHttpClient and provideHttpClientTesting. Tests cover navigation, saving, and title case conversion, with the last test's code truncated in the source.

```typescript
import {getTestHeroes} from '../model/testing/test-hero.service';
const firstHero = getTestHeroes()[0];
```

```typescript
function heroModuleSetup() {
  beforeEach(async () => {
    await TestBed.configureTestingModule(
      Object.assign({}, appConfig, {
        imports: [HeroDetailComponent, HeroListComponent],
        providers: [
          provideRouter([
            {path: 'heroes/:id', component: HeroDetailComponent},
            {path: 'heroes', component: HeroListComponent},
          ]),
          provideHttpClient(),
          provideHttpClientTesting(),
        ],
      }),
    ).compileComponents();
  });

  describe('when navigate to existing hero', () => {
    let expectedHero: Hero;

    beforeEach(async () => {
      expectedHero = firstHero;
      await createComponent(expectedHero.id);
    });

    it("should display that hero's name", () => {
      expect(page.nameDisplay.textContent).toBe(expectedHero.name);
    });

    it('should navigate when click cancel', () => {
      click(page.cancelBtn);
      expect(TestBed.inject(Router).url).toEqual(`/heroes/${expectedHero.id}`);
    });

    it('should save when click save but not navigate immediately', () => {
      click(page.saveBtn);
      expect(TestBed.inject(HttpTestingController).expectOne({method: 'PUT', url: 'api/heroes'}));
      expect(TestBed.inject(Router).url).toEqual('/heroes/41');
    });

    it('should navigate when click save and save resolves', fakeAsync(() => {
      click(page.saveBtn);
      tick(); // wait for async save to complete
      expect(TestBed.inject(Router).url).toEqual('/heroes/41');
    }));

    it('should convert hero name to Title Case', async () => {
      harness.fixture.autoDetectChanges();

      // get the name's input and display elements from the DOM
      const hostElement: HTMLElement = harness.routeNativeElement!;
      const nameInput: HTMLInputElement = hostElement.querySelector('input')!;
      const nameDisplay: HTMLElement = 
```
Tokens:
Raw