NG-ALAIN

https://ng-alain.com/docs/
Admin
NG-ALAIN is an Ant Design-based front-end solution for mid-back office systems, providing common...
Tokens:997
Snippets:8
Trust Score:8.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Force Update All Project Libraries by Reinstallation

Source: https://ng-alain.com/docs/upgrade/zh

This method ensures all project dependencies are updated to their latest compatible versions by first removing the `node_modules` directory and `yarn.lock` file, then performing a clean installation using `yarn`. While effective, it carries a risk of introducing breaking changes from third-party libraries.

```JavaScript
yarn
```

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

### Manually Update @delon Library Versions and Reinstall Dependencies

Source: https://ng-alain.com/docs/upgrade/zh

This method involves directly editing the `package.json` file to update the version numbers of all `@delon/` prefixed libraries to their desired latest versions. After modifying the version numbers, the `yarn` command is executed to fetch and install the updated dependencies.

```JSON
"@delon/theme": "^12.0.0"
```

```JavaScript
yarn
```

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

### Upgrade NG-ALAIN Scaffolding via Angular CLI

Source: https://ng-alain.com/docs/upgrade/zh

The recommended method for upgrading NG-ALAIN, especially for minor version updates. This command leverages the Angular CLI's built-in update mechanism to manage `@delon/*` library versions automatically.

```Angular CLI
ng update ng-alain
```

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

### Angular Component Export Pattern

Source: https://ng-alain.com/docs/new-component/zh

Illustrates how to consolidate multiple component exports from an `index.ts` file, providing a single entry point for importing related components, which is useful for complex component structures.

```TypeScript
// main.component.ts
export class MainComponent {}

// sub.component.ts
export class SubComponent {}

// index.ts
export MainComponent from './main.component';
export SubComponent from './sub.component';
```

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

### Using Angular Image Wrapper Component in Template

Source: https://ng-alain.com/docs/new-component/zh

Illustrates how to integrate the `image-wrapper` component into an Angular template. It shows how to pass data to the component using property binding for `src` and `desc` attributes, enabling dynamic content display.

```HTML
<image-wrapper
  src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
  desc="示意图"></image-wrapper>
```

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

### LESS Styling for Angular Image Wrapper Component

Source: https://ng-alain.com/docs/new-component/zh

Provides LESS styling for the `ImageWrapperComponent`. It defines host-level styles for layout and background, and uses `::ng-deep` to apply styles to the image element within the component's shadow DOM, including max-width, margins, vertical alignment, and box-shadow.

```LESS
// index.less
:host {
  width: 400px;
  margin: 0 auto;
  padding: 0 20px 8px;
  text-align: center;
  background: #f2f4f5;

  ::ng-deep {
    .img {
      max-width: calc(100% - 32px);
      margin: 2.4em 1em;
      vertical-align: middle;
      box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
    }
  }
}
```

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

### Angular Image Wrapper Component Definition

Source: https://ng-alain.com/docs/new-component/zh

Defines an Angular component named `ImageWrapperComponent`. It uses `@Input()` decorators to receive `style`, `src`, and `desc` properties, and renders an image with an optional description using Angular's template syntax, including conditional rendering with `@if`.

```TypeScript
// index.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'image-wrapper',
  template: `
    <div [ngStyle]="style">
      <img class="img" [src]="src" [alt]="desc" />
      @if (desc) {
        <div class="desc">{{ desc }}</div>
      }
    </div>
  `,
  styleUrls: [ './index.less' ]
})
export class ImageWrapperComponent {
  @Input() style: { [key: string]: string };
  @Input() src: string;
  @Input() desc: string;
}
```

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

### Registering Angular Component in SharedModule

Source: https://ng-alain.com/docs/new-component/zh

Demonstrates how to import and register a custom Angular component (`ImageWrapperComponent`) within a `SharedModule`. This makes the component available for use across all feature modules that import the `SharedModule`, promoting reusability.

```TypeScript
// shared.module.ts
import { ImageWrapperComponent } from './image-wrapper';
const COMPONENTS = [
  ImageWrapperComponent
];
```
Tokens:
Raw