Skip to main content

Component Library With Ionic+Angular

· 3 min read

1. Summary​

A component library is a collection of logically group components so that one can explore, select components and helps in maintaining consistent design across projects. nag-ionic-lib built using following components.

  1. Angular cli (ng generate library)
  2. Ionic cli
  3. Storybook

2. How to Create a Ionic Library Refer Code:​

  1. Generate library skeleton in a new workspace with the following commands.
    ng new nag-workspace --create-application=false
    cd nag-workspace
    ng generate library nag-ionic-lib

  1. Add a custom component

    ng g component customCard

  2. Add symlink between your local node modules folder and this dist folder Refer Code:

You can now run yarn link "nag-ionic-lib" in the projects where you want to use this package and it will be used instead.

    ng build
    cd dist/nag-ionic-lib
    yarn link
    
    ****** Command output ******
    yarn link
    yarn link v1.22.4
    warning package.json: No license field
    warning package.json: No license field
    success Registered "nag-ionic-lib".
    info You can now run yarn link <span class="hljs-string">"nag-ionic-lib"</span> in the projects where you want to use this package and it will be used instead. Done in 0.09s.

  1. Adding Ionic to your Library

        cd projects/nag-ionic-lib
        yarn add --dev @ionic/angular

  2. And Modify the 'nag-ionic-lib.module.ts'

    import { NgModule, ModuleWithProviders, InjectionToken } from '@angular/core';
    import { NagIonicLibComponent } from './nag-ionic-lib.component';
    import { CustomCardComponent } from './custom-card/custom-card.component';
    
    import { CommonModule } from '@angular/common';
    import { IonicModule } from '@ionic/angular';
    import { HttpClientModule } from '@angular/common/http';
    import { NagIonicLibService } from 'nag-ionic-lib';
    
    export interface LibConfig {
      apiUrl: string;
    }
    
    export const LibConfigService = new InjectionToken<LibConfig>('LibConfig');
    
    @NgModule({
      declarations: [
        NagIonicLibComponent,
        CustomCardComponent
      ],
      imports: [
        CommonModule,
        HttpClientModule,
        IonicModule
      ],
      exports: [
        NagIonicLibComponent, CustomCardComponent
      ]
    })
    export class NagIonicLibModule {
    static forRoot(config: LibConfig): ModuleWithProviders<NagIonicLibModule> {
        return {
          ngModule: NagIonicLibModule,
          providers: [
            NagIonicLibService,
            {
              provide: LibConfigService,
              useValue: config
            }
          ]
        };
      }
     }

Refer Code

Modify the Custom-Card Refer Code​

    // custom-card.component.ts
    import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
      selector: 'custom-card',
      templateUrl: './custom-card.component.html',
      styleUrls: ['./custom-card.component.css']
    })
    export class CustomCardComponent implements OnInit {
      @Input() title: string = "";
      @Input() content: string = "";
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
    }
    
    <!-- custom-card.component.html -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>{{ title }}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        {{ content }}
      </ion-card-content>
    </ion-card>

3. Publish the Lib to npm​

Use the below commands

    ng build --prod
    cd dist/nag-ionic-lib
    npm publish