DOCSEARCHbyAlgolia
Submit Docs

ng-cw-v20 Component Library

website·Indexed 31 days ago

https://nc20.chenxiaopa.cn

A collection of UI components and services for Angular 20 standalone applications. Features include animation components (BorderBeam, MagicCard, AuroraText), specialized viewers (ObjViewer, PdfViewer, TxtViewer), data display tools (VirtualScroll, Timeline, WaveProgress), and utility services like NcHtml2canvasService for screenshots.

Tokens
23.1K
Snippets
180
Records
206
Agent score
56%

What's inside ng-cw-v20

  1. Implement a spotlight effect with MagicCard

    The MagicCard component creates a spotlight effect that follows the mouse cursor and highlights the card border when the user hovers over the card. It is implemented as a directive.
    import { MagicCardDirective } from 'ng-cw-v20/magic-card';
    <div ncMagicCard></div>

  2. Install and import ColorPicker component

    To use the ColorPicker component, import ColorPickerComponent from the ng-cw-v20/color-picker module. If you need to use the associated types for configuration, import NcSizeType, NcFormatType, NcThemeType, and NcTriggerType from the same path.
    import { ColorPickerComponent } from 'ng-cw-v20/color-picker';
import { NcSizeType, NcFormatType, NcThemeType, NcTriggerType } from 'ng-cw-v20/color-picker';

  3. Import the InfiniteScroll component

    To use the InfiniteScroll component, import InfiniteScrollComponent from the ng-cw-v20/infinite-scroll package.
    import { InfiniteScrollComponent } from 'ng-cw-v20/infinite-scroll';

  4. Improve ScrollList and CarouselList performance and reliability

    In version 1.1.0, ScrollList and CarouselList were updated to remove the DOM cloning approach. They now move actual projection nodes to create a circular scroll effect, which ensures that Angular bindings and interactions remain functional. This update also fixes an issue where dynamically adding or removing projection items failed to refresh the view.

  5. Install and import NumberCounter component

    To use the NumberCounter component and its associated direction types, import them from the ng-cw-v20/number-counter module.
    import { NumberCounterComponent, ncDirectionType } from 'ng-cw-v20/number-counter';

  6. Install and import PoiComponent

    To use the POI search component, import the PoiComponent and its associated types (NcMapType, NcShowType) from the ng-cw-v20/poi package.
    import { PoiComponent, NcMapType, NcShowType } from 'ng-cw-v20/poi';

  7. Import and use the CarouselList component

    The CarouselList component is used to create a rotating list display. It wraps a list (typically a <ul> with <li> elements) and automatically cycles through the items.
    import { CarouselListComponent } from 'ng-cw-v20/carousel-list';
    <nc-carousel-list>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nc-carousel-list>

  8. Import the AutoScrollText component

    To use the AutoScrollText component in your project, import AutoScrollTextComponent from the ng-cw-v20/auto-scroll-text package.
    import { AutoScrollTextComponent } from 'ng-cw-v20/auto-scroll-text';

  9. Install and use the BorderBeam directive

    The BorderBeamDirective creates an animated light beam that travels along the edges of a container. To use it, import the directive from ng-cw-v20/border-beam and apply the ncBorderBeam attribute to an HTML element.
    import { BorderBeamDirective } from 'ng-cw-v20/border-beam';
    <!-- Basic usage -->
<div ncBorderBeam></div>

  10. Create an API service layer using firstValueFrom

    Implement an ApiService layer to separate business endpoint definitions from the base HTTP logic. Use firstValueFrom() from RxJS to convert Observables into Promises, allowing the use of async/await for cleaner asynchronous code. This layer should also handle business-level response validation (e.g., checking a code field in the response) before returning data to the component.
    import { Injectable, inject } from '@angular/core';
import { firstValueFrom } from 'rxjs';
import { HttpService } from './http.service';
import { NzMessageService } from 'ng-zorro-antd/message';

interface ApiResponse<T> {
    code: number;
    message: string;
    data: T;
}

interface TestData {
    id: number;
    name: string;
}

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    private readonly hs = inject(HttpService);
    private readonly message = inject(NzMessageService);
    private readonly apiUrl = '/api/';

    async getTestData(id: number): Promise<TestData> {
        const url = this.apiUrl + 'testData?id=' + id;
        const res = await firstValueFrom(this.hs.get<ApiResponse<TestData>>(url));
        return this.getResult(res);
    }

    async downloadTestFile(params: Record<string, unknown>): Promise<string> {
        const url = this.apiUrl + 'testFile';
        const blob = await firstValueFrom(this.hs.postBlob(url, params));
        return URL.createObjectURL(blob);
    }

    private getResult<T>(res: ApiResponse<T>): T {
        if (res.code === 0) {
            return res.data;
        }
        this.message.error(res.message);
        throw new Error(res.message);
    }
}

  11. Validate strong passwords with NcCommonService.passwordValidate

    Verify if a password meets strong security requirements: 8-16 characters in length and containing at least three of the following: uppercase letters, lowercase letters, numbers, or special characters.
    let isStrong = this.cs.passwordValidate('123456789'); // false

  12. Install and import WaveProgress component

    To use the circular water-wave progress bar, import the WaveProgressComponent and its associated speed type NcSpeedType from the ng-cw-v20/wave-progress package.
    import { WaveProgressComponent } from 'ng-cw-v20/wave-progress';
import { NcSpeedType } from 'ng-cw-v20/wave-progress';