NG-ZORRO

https://ng.ant.design/docs
Admin
NG-ZORRO is an enterprise-class UI component library for Angular applications, built upon the Ant...
Tokens:17,897
Snippets:231
Trust Score:9.6
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Angular CLI Globally

Source: https://ng.ant.design/docs/getting-started/en

Installs the Angular CLI globally using npm or yarn, which is a prerequisite for creating and managing Angular projects.

```bash
$ npm install -g @angular/cli
# Or if you use yarn
$ yarn global add @angular/cli
```

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

### Serve Angular Project for Development

Source: https://ng.ant.design/docs/getting-started/en

Starts the development server for the Angular project, compiling the code and opening a welcome page in the browser. The port can be set to 0 to use a random available port.

```bash
$ ng serve --port 0 --open
```

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

### Create a New Angular Project

Source: https://ng.ant.design/docs/getting-started/en

Uses the Angular CLI to generate a new Angular project folder with necessary dependencies. It automatically runs `npm install` or `yarn`.

```bash
$ ng new PROJECT-NAME
```

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

### Install and Initialize ng-zorro-antd

Source: https://ng.ant.design/docs/getting-started/en

Installs the ng-zorro-antd library and initializes project configuration, including importing i18n files, stylesheets, and loading initial modules using schematics.

```bash
$ cd PROJECT-NAME
$ ng add ng-zorro-antd
```

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

### Build Angular Project for Production

Source: https://ng.ant.design/docs/getting-started/en

Builds the Angular project for production deployment. The output files are generated in the `dist` directory by default.

```bash
$ ng build --prod
```

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

### Install Dependencies for NG-ZORRO

Source: https://ng.ant.design/docs/contributing/en

Installs all necessary project dependencies for NG-ZORRO development. This is a prerequisite for running tests, linting, or building the project.

```bash
npm install
```

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

### Import All ng-zorro-antd Styles

Source: https://ng.ant.design/docs/getting-started/en

Demonstrates how to import all component styles for ng-zorro-antd in different configuration files (`angular.json`, `style.css`, `style.less`).

```json
{
  "styles": ["node_modules/ng-zorro-antd/ng-zorro-antd.min.css"]
}
```

```css
@import '~ng-zorro-antd/ng-zorro-antd.min.css';
```

```less
@import '~ng-zorro-antd/ng-zorro-antd.less';
```

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

### Install ng-zorro-antd using npm

Source: https://ng.ant.design/docs/contributing/docs/faq/en

This snippet demonstrates how to install the ng-zorro-antd library into an existing project using npm. This is an alternative to using the Angular CLI's `ng add` command.

```bash
$ npm install ng-zorro-antd
```

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

### Run NG-ZORRO Website Locally

Source: https://ng.ant.design/docs/contributing/en

Starts a local development server to view the NG-ZORRO website. This is useful for previewing changes and documentation.

```bash
npm start
```

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

### Install ng-zorro-antd using npm

Source: https://ng.ant.design/docs/changelog

This snippet shows how to install the ng-zorro-antd package directly using npm. This method can be used as an alternative to the Angular CLI's `ng add` command.

```bash
$ npm install ng-zorro-antd

```

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

### Install ng-zorro-antd using Angular CLI

Source: https://ng.ant.design/docs/contributing/docs/faq/zh

Installs the ng-zorro-antd library into an Angular project using the Angular CLI. This is the recommended method for easier development and integration with the Angular ecosystem.

```bash
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

```

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

### Install ng-zorro-antd using npm or yarn

Source: https://ng.ant.design/docs/contributing/docs/faq/zh

Installs the ng-zorro-antd library into a project using npm or yarn package managers. This is an alternative to using the Angular CLI's `ng add` command.

```bash
$ npm install ng-zorro-antd

```

```bash
$ yarn add ng-zorro-antd

```

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

### Dynamically Change Theme Configuration with NzConfigService

Source: https://ng.ant.design/docs/customize-theme-variable/en

This example illustrates how to dynamically change global theme configurations, specifically the primary color, using the `set` method of `NzConfigService`. This change affects all component instances unless they have independent configurations.

```typescript
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-change-zorro-config',
  standalone: true
})
export class ChangeZorroConfigComponent {
  private nzConfigService = inject(NzConfigService);

  onChangeConfig() {
    this.nzConfigService.set('theme', { primaryColor: '#1890ff' });
  }
}

```

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

### Import and Use NzButtonModule in Angular Component

Source: https://ng.ant.design/docs/getting-started/en

Illustrates how to import the `NzButtonModule` into an Angular component and use the `nz-button` directive in the component's template.

```typescript
import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';

@Component({
  imports: [NzButtonModule]
})
export class AppComponent {}

```

```html
<button nz-button nzType="primary">Primary</button>
```

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

### Install Custom Webpack Builder for Angular

Source: https://ng.ant.design/docs/customize-theme/en

Installs the @angular-builders/custom-webpack package as a development dependency. This builder allows for custom webpack configurations in Angular projects.

```bash
npm i -D @angular-builders/custom-webpack
```

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

### Import Specific ng-zorro-antd Component Styles

Source: https://ng.ant.design/docs/getting-started/en

Shows how to import base styles along with specific component styles (e.g., button) in `style.css` or `style.less` to reduce code redundancy.

```css
@import '~ng-zorro-antd/style/index.min.css'; /* Import base styles */
@import '~ng-zorro-antd/button/style/index.min.css'; /* Import one component's styles */
```

```less
@import '~ng-zorro-antd/style/entry.less'; /* Import base styles */
@import '~ng-zorro-antd/button/style/entry.less'; /* Import one component's styles */
```

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

### Dynamically Change Global Configuration at Runtime (Angular)

Source: https://ng.ant.design/docs/global-config/en

This example illustrates how to dynamically change global Ant Design configurations at runtime in an Angular application. It injects `NzConfigService` into a component and uses its `set` method to update the configuration for the 'button' component, changing its `nzSize` to 'large'.

```typescript
import { NzConfigService } from 'ng-zorro-antd/core/config';

@Component({})
export class ChangeZorroConfigComponent {
  private nzConfigService = inject(NzConfigService);

  onChangeConfig() {
    this.nzConfigService.set('button', { nzSize: 'large' });
  }
}

```

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

### Checkout to Feature Branch

Source: https://ng.ant.design/docs/contributing/en

Switches your working branch to a specified feature branch, for example, 'docs-fix'. This is where you'll make your changes.

```bash
git checkout docs-fix
```

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

### Set Component Template Instance via NzConfigService (Angular)

Source: https://ng.ant.design/docs/global-config/en

This example shows how to set a template instance, like a custom spinner indicator for the 'spin' component, using `NzConfigService` within an Angular component. It injects `NzConfigService` and uses the `set` method to update the configuration.

```typescript
import { NzConfigService } from 'ng-zorro-antd/core/config';

export class AppComponent implements OnInit {
  private nzConfigService = inject(NzConfigService);

  @ViewChild('nzIndicatorTpl', { static: true })
  nzIndicator!: TemplateRef<void>;

  ngOnInit(): void {
    this.nzConfigService.set('spin', { nzIndicator: this.nzIndicator });
  }
}

```

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

### Switch date-fns locale at runtime in Angular

Source: https://ng.ant.design/docs/i18n/en

Demonstrates how to dynamically change the date-fns locale at runtime within an Angular component using NzI18nService. This allows for on-the-fly language switching for date formatting.

```typescript
// Switch language to Japanese at runtime
import { NzI18nService } from 'ng-zorro-antd/i18n';
import { inject } from '@angular/core';
import { ja } from 'date-fns/locale';

export class AppComponent {
  private i18n = inject(NzI18nService);

  switchLanguage() {
    this.i18n.setDateLocale(ja);
  }
}

```

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

### Set Direction via Service (Ant Design Angular)

Source: https://ng.ant.design/docs/direction/en

This example illustrates how to programmatically set the text direction using Ant Design Angular services. It shows how to configure the direction for modals using NzModalService and globally for modal configurations using NzConfigService, offering dynamic control over layout direction.

```typescript
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { inject } from '@angular/core';

class MyComponent {
  private modalService = inject(NzModalService);
  private nzConfigService = inject(NzConfigService);

  openModal(): void {
    this.modalService.create({ nzDirection: 'rtl' });
  }

  setDirWithConfig(): void {
    this.nzConfigService.set('modal', { nzDirection: 'rtl' });
  }
}
```

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

### Input Number Component Examples (Angular)

Source: https://ng.ant.design/docs/changelog/en

Demonstrates the new usage of the input-number component in ng-zorro-antd v19, including custom handler icons, affixes, and addons. This replaces the older ng-template-based approach.

```html
<nz-input-number>
  <nz-icon nzInputNumberUpIcon />
  <nz-icon nzInputNumberDownIcon />
</nz-input-number>

<nz-input-number>
  <span nzInputPrefix>Prefix</span>
  <span nzInputSuffix>Suffix</span>
</nz-input-number>

<nz-input-number>
  <span nzInputAddonBefore>Before</span>
  <span nzInputAddonAfter>After</span>
</nz-input-number>
```

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

### Overwrite Global Configuration within a Component (Angular)

Source: https://ng.ant.design/docs/global-config/en

This example shows how to override global Ant Design configurations for a specific Angular component using the `providers` array. It demonstrates setting a local configuration for the 'button' component's `nzSize` to 'large'.

```typescript
@Component({
  providers: [
    // reset local NzConfigService
    NzConfigService,
    {
      provide: NZ_CONFIG,
      useValue: {
        button: {
          nzSize: 'large'
        }
      }
    }
  ]
})

```

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

### Cascader Component Value Handling Example (Angular)

Source: https://ng.ant.design/docs/changelog/en

Illustrates the change in value handling for the cascader component in ng-zorro-antd v19. Previously, it supported `NzCascaderOption[]` for values, but now expects the actual value from the options list. This example shows the old behavior.

```typescript
@Component({
  template: `<nz-cascader [nzOptions]="options" [ngModel]="value"></nz-cascader>`
})
export class ExampleComponent {
  value = [{ label: 'NG ZORRO', value: 'ng-zorro-antd' }];
}
```

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

### Dynamically Switch Locale with NzI18nService

Source: https://ng.ant.design/docs/i18n/en

Demonstrates how to dynamically change the language of ng-zorro-antd components at runtime using the `NzI18nService`. Injecting `NzI18nService` allows calling the `setLocale` method with the desired locale configuration, such as `en_US`, to update the UI's language.

```typescript
import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';

class DemoComponent {
  private i18n = inject(NzI18nService);

  switchLanguage() {
    this.i18n.setLocale(en_US);
  }
}

```

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

### Remove Angular locale dependency

Source: https://ng.ant.design/docs/i18n/en

Provides instructions on how to optionally remove the Angular Locales package after switching to date-fns to reduce the overall application bundle size. This is safe to remove if date-fns is handling all locale-specific formatting.

```typescript
// The following code can be removed as needed
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

```

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

### Updating Data Immutably in NG-ZORRO-ANTD

Source: https://ng.ant.design/docs/faq/en

Demonstrates how to update data immutably when using NG-ZORRO-ANTD components, which run in OnPush mode. This prevents issues with change detection not being triggered by direct mutations. It shows examples for adding and removing data from an array.

```typescript
```typescript
// add data
this.dataSet = [
  ...this.dataSet,
  {
    key: `${this.i}`,
    name: `Edward King ${this.i}`,
    age: '32',
    address: `London, Park Lane no. ${this.i}`
  }
];
// remove data
this.dataSet = this.dataSet.filter(d => d.key !== i);
```
```

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

### Configure Default i18n Language in Angular

Source: https://ng.ant.design/docs/i18n/en

Sets the default internationalization language for ng-zorro-antd and Angular. It involves registering locale data for Angular's common module and providing the ng-zorro-antd locale configuration using `provideNzI18n`. This ensures consistent language display for both Angular and ng-zorro-antd components.

```typescript
/** config angular i18n **/
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

/** config ng-zorro-antd i18n **/
import { provideNzI18n, en_US } from 'ng-zorro-antd/i18n';

/** set the default i18n config **/
export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNzI18n(en_US)
  ]
};

```

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

### Angular Component with Side Effects in Template Expression

Source: https://ng.ant.design/docs/faq/en

Illustrates a common Angular pitfall where a template expression has side effects, leading to performance issues or deadlocks. This example shows a component where a function called in the template logs a message every time, indicating it runs excessively.

```typescript
```typescript
@Component({
  template: ` <input [value]="value" /> `
})
export class BugComponent {
  value(): string {
    console.log('I will run every time');
    return 'value';
  }
}
```
```

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

### Integrate ng-zorro-antd with Angular localize Service

Source: https://ng.ant.design/docs/i18n/en

Enables ng-zorro-antd to use the same localization settings as Angular's `@angular/localize` service. This is achieved by registering all necessary locale data and then dynamically providing the ng-zorro-antd locale based on Angular's `LOCALE_ID`. This approach ensures that the application's language is consistently managed across all components.

```typescript
/** import all locales data **/
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import zh from '@angular/common/locales/zh';
registerLocaleData(en);
registerLocaleData(zh);

/** config ng-zorro-antd i18n **/
import { en_US, provideNzI18n, fr_FR } from 'ng-zorro-antd/i18n';

/** switch ng-zorro-antd locales via LOCALE_ID **/
export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNzI18n(() => (inject(LOCALE_ID) === 'fr' ? fr_FR : en_US))
  ]
};

```

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

### Initialize Ant Design Angular Project with CLI

Source: https://ng.ant.design/docs/schematics/en

Initializes a new project with Ant Design of Angular. This command prompts for configuration options such as i18n and stylesheet imports. It's the primary way to scaffold a new project with the library.

```bash
ng add ng-zorro-antd [options]
```

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

### Static Theme Configuration with provideNzConfig

Source: https://ng.ant.design/docs/customize-theme-variable/en

This code demonstrates how to set static theme configurations, such as the primary color, using the `provideNzConfig` function in the application's root injector. It defines a `NzConfig` object and provides it to the application, which is then managed by `NzConfigService`.

```typescript
import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';
import { ApplicationConfig } from '@angular/core';

const ngZorroConfig: NzConfig = {
  theme: {
    primaryColor: '#1890ff'
  }
};

export const appConfig: ApplicationConfig = {
  providers: [provideNzConfig(ngZorroConfig)]
};

```

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

### Applying Component Styles with Theme Mixin (Less)

Source: https://ng.ant.design/docs/customize-theme/en

Demonstrates how to wrap component-specific styles within the `.themeMixin` to ensure they are correctly themed. It assumes the mixin is imported and then invoked with the component styles.

```less
@import 'mixin'; // Similarly, no need for relative path

.themeMixin({
  :host {
    // Component styles
    ...
  }
});

```

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

### Compile LESS with Custom Prefix

Source: https://ng.ant.design/docs/customize-theme-variable/en

This command shows how to compile the Ant Design LESS files with a custom prefix using `lessc`. This is useful for resolving conflicts when multiple Ant Design style files are present in a project, by modifying the default `--ant` prefix.

```bash
lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css

```

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

### Stage and Commit Changes

Source: https://ng.ant.design/docs/contributing/en

Stages all modified files and creates a new commit with a message that follows the project's guidelines. Use '-a' to stage modified and deleted files.

```bash
git commit -a
```

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

### Override ng-zorro internationalization configuration

Source: https://ng.ant.design/docs/i18n/en

Shows how to override default internationalization text for ng-zorro components, such as the 'items per page' text in the pagination component. This is achieved by providing a custom language pack.

```typescript
import { en_US, provideNzI18n } from 'ng-zorro-antd/i18n';
import { ApplicationConfig } from '@angular/core';

const customLanguagePack = {
  en_US,
  ...{
    Pagination: {
      items_per_page: 'per page'
    }
  }
};

export const appConfig: ApplicationConfig = {
  providers: [provideNzI18n(customLanguagePack)]
};

```

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

### Importing Ng Ant Design Stylesheets (Less)

Source: https://ng.ant.design/docs/customize-theme/en

Demonstrates how to import the main Ng Ant Design stylesheet and custom theme files in a Less entry point. Assumes a project structure with separate theme files.

```less
@import '../../node_modules/ng-zorro-antd/ng-zorro-antd';
@import './themes/dark';

```

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

### Build NG-ZORRO Library for Publishing

Source: https://ng.ant.design/docs/contributing/en

Creates a production build of the NG-ZORRO library, typically placed in the 'publish' directory. This build is ready for distribution or deployment.

```bash
npm run build:lib
```

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

### Configure date-fns locale in Angular

Source: https://ng.ant.design/docs/i18n/en

Sets the default locale for date-fns in an Angular application by providing the NZ_DATE_LOCALE token. This affects date formatting across date-related components. Requires importing locale data from 'date-fns/locale'.

```typescript
// Set the value of NZ_DATE_LOCALE in the `app.config.ts` to activate date-fns mode
import { enUS, ja } from 'date-fns/locale';
import { ApplicationConfig } from '@angular/core';
import { NZ_DATE_LOCALE } from 'ng-zorro-antd/core/time-picker';

export const appConfig: ApplicationConfig = {
  providers: [{ provide: NZ_DATE_LOCALE, useValue: enUS }]
};

```

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

### Provide Global Configuration using FactoryProvider (Angular)

Source: https://ng.ant.design/docs/global-config/en

This snippet illustrates an advanced method for providing global configurations in Angular using a `FactoryProvider`. It dynamically creates a component to access its template references, such as `nzIndicator`, and returns them as part of the `NzConfig` object.

```typescript
// The module-level Component which contains template references.
// Exporting is required for AOT compatibility
@Component({
  template: `
    <ng-template #nzIndicatorTpl>
      <span class="ant-spin-dot">
        <nz-icon nzType="loading" />
      </span>
    </ng-template>
  `
})
export class GlobalTemplatesComponent {
  @ViewChild('nzIndicatorTpl', { static: true })
  nzIndicator!: TemplateRef<void>;
}

// The Factory function
const nzConfigFactory = (): NzConfig => {
  const environmentInjector = inject(EnvironmentInjector);
  const { nzIndicator } = createComponent(component, { environmentInjector }).instance;
  return {
    spin: {
      nzIndicator
    }
  };
};

export const appConfig: ApplicationConfig = {
  providers: [
    {
      // The FactoryProvider
      provide: NZ_CONFIG,
      useFactory: nzConfigFactory
    }
  ]
};

```

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

### Replace CSS Import for Dynamic Theme

Source: https://ng.ant.design/docs/customize-theme-variable/en

This snippet shows how to switch from the default Ant Design CSS import to the CSS Variable version to enable dynamic theming. This change is necessary for dynamic theme capabilities and requires removing `babel-plugin-import`.

```less
- @import "~ng-zorro-antd/ng-zorro-antd.min.css";
+ @import "~ng-zorro-antd/ng-zorro-antd.variable.min.css";

```

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

### Configure Styles for Dynamic Theme Switching

Source: https://ng.ant.design/docs/customize-theme/en

Sets up the `styles` array in `angular.json` for dynamic theme switching. It defines multiple theme files with specific bundle names and disables injection for themes intended for runtime switching.

```json
"styles": [
  "src/styles.less",
  {
    "input": "src/styles/default.less",
    "bundleName": "default",
    "inject": false
  },
  {
    "input": "src/styles/dark.less",
    "bundleName": "dark",
    "inject": false
  }
],
```

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

### Synchronize Theme Switching with Promises in TypeScript

Source: https://ng.ant.design/docs/customize-theme/en

This TypeScript code demonstrates how to synchronize theme switching by wrapping the CSS loading process in a Promise. This ensures that className switching waits for the CSS theme to be fully loaded, preventing theme mixing. It includes functions to remove old themes and load new ones, handling the initial load scenario.

```typescript
private removeUnusedTheme(theme: ThemeType): void {
  document.documentElement.classList.remove(theme);
  const removedThemeStyle = document.getElementById(theme);
  if (removedThemeStyle) {
    document.head.removeChild(removedThemeStyle);
  }
}

loadTheme(firstLoad = true): Promise<Event> {
  const theme = this.currentTheme;
  if (firstLoad) {
    document.documentElement.classList.add(theme);
  }
  this.loadCss(`${theme}.css`, theme).then(
    e => {
      if (!firstLoad) {
        document.documentElement.classList.add(theme);
      }
      this.removeUnusedTheme(this.previousTheme);
      resolve(e);
    },
    e => reject(e)
  );
}
```

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

### Run Full Test Suite for NG-ZORRO

Source: https://ng.ant.design/docs/contributing/en

Executes the entire test suite for NG-ZORRO to ensure all functionalities are working as expected. This is crucial before submitting changes.

```bash
npm test
```

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

### Import Mixins Without Relative Paths

Source: https://ng.ant.design/docs/customize-theme/en

Demonstrates how to import Less mixins using the configured `includePaths` in `angular.json`. This simplifies imports by allowing direct reference to files within the specified include paths.

```less
// A relative path works
@import 'src/path-to-mixin/mixin';
// But now this works as well
@import 'mixin';
```

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

### Dynamically Loading CSS Theme File (TypeScript)

Source: https://ng.ant.design/docs/customize-theme/en

A TypeScript function to dynamically load a CSS stylesheet by creating a link element and appending it to the document's head. This is used for switching pre-defined themes.

```typescript
private loadCss(href: string, id: string): Promise<Event> {
  return new Promise((resolve, reject) => {
    const style = document.createElement('link');
    style.rel = 'stylesheet';
    style.href = href;
    style.id = id;
    style.onload = resolve;
    style.onerror = reject;
    document.head.append(style);
  });
}

```

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

### Customizing Dark Theme Styles (Less)

Source: https://ng.ant.design/docs/customize-theme/en

Shows how to customize specific theme variables for a dark theme by importing the base dark theme and overriding variables. Uses Less's (multiple) import for handling identical filenames.

```less
@import (multiple) '../../../node_modules/ng-zorro-antd/src/style/themes/dark';
@import './base';

@layout-sider-background: @component-background;
@layout-header-background: @component-background;

```

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

### Defining Base Theme Variables (Less)

Source: https://ng.ant.design/docs/customize-theme/en

Illustrates how to define common style variables that apply across all themes in a `base.less` file. This file should be imported in every theme customization stylesheet.

```less
// base.less customizes common style variables
@margin-md: 17px;
...

```

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

### Provide Global Configuration with provideNzConfig (Angular)

Source: https://ng.ant.design/docs/global-config/en

This snippet demonstrates how to set global configurations for Ant Design components in Angular using the `provideNzConfig` function. It defines default settings for `message` and `notification` components.

```typescript
import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config';

const ngZorroConfig: NzConfig = {
  message: { nzTop: 120 },
  notification: { nzTop: 240 }
};

export const appConfig: ApplicationConfig = {
  providers: [provideNzConfig(ngZorroConfig)]
};

```

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

### Push Local Master to Origin

Source: https://ng.ant.design/docs/contributing/en

Pushes your local 'master' branch to your 'origin' remote repository. This is usually done after pulling upstream changes to keep your fork synchronized.

```bash
git push origin master
```

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

### Run Specific Test Files with Watch Mode

Source: https://ng.ant.design/docs/contributing/en

Runs specific test files and monitors for changes, automatically re-running tests when modifications are detected. Useful for focused development and debugging.

```bash
npm run test:watch [name]
```

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

### Push Feature Branch to Origin

Source: https://ng.ant.design/docs/contributing/en

Pushes your local feature branch to your 'origin' remote repository. A force push ('-f') might be required after rebasing, but use with caution.

```bash
git push
```

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

### Configure Style Preprocessor Include Paths in Angular JSON

Source: https://ng.ant.design/docs/customize-theme/en

Adds a `stylePreprocessorOptions` section to `angular.json` to specify include paths for style preprocessors. This allows importing mixins and variables from specified directories without using relative paths.

```json
"stylePreprocessorOptions": {
  "includePaths": [
    "src/path-to-mixin"
  ]
},
```

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

### Merge Global and Local Configuration using useFactory (Angular)

Source: https://ng.ant.design/docs/global-config/en

This snippet demonstrates how to merge global Ant Design configurations with local configurations within an Angular component using a `useFactory` provider. It injects the global `NzConfigService`, retrieves its configuration, and merges it with local settings for the 'select' component.

```typescript
@Component({
  providers: [
    // reset local NzConfigService
    NzConfigService,
    {
      provide: NZ_CONFIG,
      useFactory: () => {
        // get global NzConfigService
        const globalConfig = inject(NzConfigService, { skipSelf: true }).getConfig();
        const localConfig = {
          select: {
            nzVariant: 'borderless'
          }
        };
        // merge local and global config
        const mergedConfig = {
          ...globalConfig,
          ...localConfig
        };
        return mergedConfig;
      },
    }
  ]
})

```

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

### Update Less Function Syntax in Ant Design for Angular

Source: https://ng.ant.design/docs/changelog/en

Demonstrates the updated syntax for using Less functions in Ant Design for Angular. It shows how to remove the tilde (~) and backticks from function calls like `colorPalette`.

```less
- color(~`colorPalette('@{primary-color}', 5)`);
+ color(colorPalette('@{primary-color}', 5));
```

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

### Theme Mixin for Component Styles (Less)

Source: https://ng.ant.design/docs/customize-theme/en

Provides a Less mixin (`.themeMixin`) to encapsulate component styles, allowing them to be applied conditionally based on the active theme (e.g., 'default' or 'dark'). This avoids repetitive style definitions.

```less
.themeMixin(@rules) {
  html {
    &.default {
      @import './default.less';
      @rules();
    }
    &.dark {
      @import './dark.less';
      @rules();
    }
  }
}

```

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

### Generate Ant Design Angular Component with CLI

Source: https://ng.ant.design/docs/schematics/en

Generates template source codes for Ant Design Angular components. You can specify the schematic and a name for the component to be generated. This helps in quickly setting up component structures.

```bash
ng g ng-zorro-antd:[schematic] <name> [options]
```

```bash
ng g ng-zorro-antd:form-normal-login login
```

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

### Importing NG-Zorro-Antd Less Themes

Source: https://ng.ant.design/docs/customize-theme/en

This Less code demonstrates how to import different official themes provided by NG-Zorro-Antd. You can uncomment the specific theme you wish to use, such as dark, compact, or Aliyun.

```less
// Import the official default less style file
@import '~ng-zorro-antd/ng-zorro-antd.less';

// Import the official dark less style file
//@import "~ng-zorro-antd/ng-zorro-antd.dark.less";

// Import the official compact less style file
//@import "~ng-zorro-antd/ng-zorro-antd.compact.less";

// Import the official Aliyun less style file
//@import "~ng-zorro-antd/ng-zorro-antd.aliyun.less";

```

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

### Configure Angular JSON for Ant Design Styles

Source: https://ng.ant.design/docs/customize-theme/en

Specifies the path to the ng-zorro-antd.less file in the angular.json configuration for styling. This is a prerequisite for applying Ant Design styles.

```json
{
  "styles": ["node_modules/ng-zorro-antd/ng-zorro-antd.less"]
}
```

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

### Set Direction in Angular Template (Ant Design Angular)

Source: https://ng.ant.design/docs/direction/en

This code shows how to import and use the Angular CDK's BidiModule to control text direction within specific parts of your Angular application's template. This allows for localized direction settings for components or sections.

```typescript
import { BidiModule } from '@angular/cdk/bidi';

```

```html
<div dir="rtl"></div>
```

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

### Importing NG-Zorro-Antd CSS Themes

Source: https://ng.ant.design/docs/customize-theme/en

This CSS code shows how to import various official NG-Zorro-Antd themes directly into your project's CSS file. Similar to Less, you can uncomment the desired theme file (dark, compact, or Aliyun).

```css
@import '~ng-zorro-antd/ng-zorro-antd.css';
/*@import "~ng-zorro-antd/ng-zorro-antd.dark.css";*/
/*@import "~ng-zorro-antd/ng-zorro-antd.compact.css";*/
/*@import "~ng-zorro-antd/ng-zorro-antd.aliyun.css";*/

```

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

### Lint NG-ZORRO Code

Source: https://ng.ant.design/docs/contributing/en

Checks the code style of the NG-ZORRO project against predefined linting rules. Ensures code consistency and quality.

```bash
npm run lint
```

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

### Pull Latest Changes from Upstream Master

Source: https://ng.ant.design/docs/contributing/en

Fetches and merges the latest changes from the 'upstream' master branch into your local 'master' branch. Ensures your local repository is up-to-date.

```bash
git pull upstream master
```

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

### Customize Webpack Less Loader Options

Source: https://ng.ant.design/docs/customize-theme/en

Defines a custom webpack configuration file (extra-webpack.config.js) to modify Less variables. This allows for overriding theme variables like primary color, link color, and border-radius.

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader',
        options: {
          modifyVars: {
            // modify theme variable
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true
        }
      }
    ]
  }
};
```

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

### Configure Angular.json for NG-Zorro-Antd Styles

Source: https://ng.ant.design/docs/customize-theme/en

This configuration snippet shows how to include the NG-Zorro-Antd CSS file in your Angular project's build process. It's typically added to the 'styles' array within the 'build.options' of your angular.json file.

```json
{
  "build": {
    "options": {
      "styles": ["./node_modules/ng-zorro-antd/ng-zorro-antd.min.css"]
    }
  }
}
```

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

### Configure Webpack for NG-Zorro-Antd Theme Variables

Source: https://ng.ant.design/docs/customize-theme/en

This JavaScript configuration demonstrates how to use `less-loader` in webpack to override NG-Zorro-Antd theme variables. It imports theme variable files and enables JavaScript execution for the Less compiler.

```javascript
const darkThemeVars = require('ng-zorro-antd/dark-theme');
const compactThemeVars = require('ng-zorro-antd/compact-theme');
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader',
        options: {
          modifyVars: {
            hack: `true;@import "${require.resolve('ng-zorro-antd/style/color/colorPalette.less')}";`,
            ...darkThemeVars,
            ...compactThemeVars
          },
          javascriptEnabled: true
        }
      }
    ]
  }
};

```
Tokens:
Raw