Custom Angular Library

1. Create an Angular Library

  1. Generate a Library:

    ng generate library my-library

    This creates the projects/my-library folder in your Angular workspace.
  2. Develop Your Library:
    • Add your reusable components, services, or modules in the library’s src folder.
    • Export your library features through the public-api.ts file.
  3. Build the Library:

    ng build my-library

    This compiles the library and creates a distributable package in the dist/my-library folder.

2. Prepare for Distribution

  1. Add a Package.json: Ensure your library has a package.json file in the dist/my-library folder. It should include the following:

    {
    "name": "my-library",
    "version": "1.0.0",
    "peerDependencies": {
    "@angular/core": "^16.0.0",
    "@angular/common": "^16.0.0"
    }
    }
  2. Include a Schematic: Create Angular schematics to enable the ng add functionality:
    • Inside projects/my-library, generate schematics using the Angular DevKit: schematics blank --name=ng-add
    • Implement the logic for ng add in the ng-add schematic to configure your library when added to another project (e.g., updating angular.json, adding dependencies, etc.).
  3. Bundle the Library: Use tools like ng-packagr (built into the Angular CLI) to ensure the library is packaged correctly.

3. Publish the Library

  1. Log in to NPM: If you want others to use it, publish your library to the npm registry: npm login
  2. Publish: cd dist/my-library npm publish
  3. Verify Installation: After publishing, test your library by running: ng add my-library

4. Test Locally (Optional)

To test your library without publishing, use npm link:

cd dist/my-library
npm link
cd ../your-angular-project
npm link my-library
ng add my-library

This will package your library and enable Angular CLI users to add it effortlessly with ng add.

Example components

Here’s a sample code base for a simple Angular library containing two components: one that prints “Hello World,” and another for an accordion component.

Hello World Component

This component simply displays “Hello World” on the screen.

File Structure:

projects/my-library/src/lib/hello-world/hello-world.component.ts

Code:

import { Component } from '@angular/core';

@Component({
  selector: 'lib-hello-world',
  template: `
    <h1>Hello World!</h1>
  `,
  styles: [`
    h1 {
      font-size: 24px;
      color: #007bff;
    }
  `]
})
export class HelloWorldComponent {}

Accordion Component

This component allows users to toggle sections open or closed.

File Structure:

projects/my-library/src/lib/accordion/accordion.component.ts

Code:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'lib-accordion',
  template: `
    <div class="accordion">
      <div *ngFor="let item of items; let i = index">
        <button (click)="toggleAccordion(i)">
          {{ item.title }}
        </button>
        <div *ngIf="openIndex === i" class="content">
          {{ item.content }}
        </div>
      </div>
    </div>
  `,
  styles: [`
    .accordion button {
      display: block;
      width: 100%;
      padding: 10px;
      font-size: 18px;
      cursor: pointer;
      text-align: left;
      background-color: #f1f1f1;
      border: none;
      outline: none;
    }
    .accordion button:hover {
      background-color: #e9e9e9;
    }
    .content {
      padding: 10px;
      border: 1px solid #ddd;
      border-top: none;
    }
  `]
})
export class AccordionComponent {
  @Input() items: { title: string, content: string }[] = [];
  openIndex: number | null = null;

  toggleAccordion(index: number): void {
    this.openIndex = this.openIndex === index ? null : index;
  }
}

Export in Public API

Ensure the components are exported in the library’s public-api.ts file:

export * from './lib/hello-world/hello-world.component';
export * from './lib/accordion/accordion.component';

Example Usage

Once your library is imported, you can use these components in an Angular project:

<!-- Hello World -->
<lib-hello-world></lib-hello-world>

<!-- Accordion -->
<lib-accordion [items]="[
  { title: 'Section 1', content: 'Content for section 1' },
  { title: 'Section 2', content: 'Content for section 2' }
]"></lib-accordion>

With this setup, you have two reusable components ready to be published as part of your Angular library.

Post Views: 2