Search code examples
angularinterfacecomponents

Angular 2 Component - How to export interface?


I have developed a header component that requires data as "IHeader" type

header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header.component';


@NgModule({
  imports: [
      CommonModule
  ],
  declarations: [
      HeaderComponent       
  ],
  providers: [ ],
  exports: [
    HeaderComponent
  ]

})
export class HeaderModule { }

IHeader.ts

export interface IHeader {
    headerName: string;
    headerTitle: string;   
    headerVisible: boolean;
    headerAttributes:IheaderAttributes;
    headerType:string;
}

header.component.ts

export class HeaderComponent implements OnInit {

    @Input() data: IHeader;

}

How can I export "IHeader" interface ?

Additional Info

I have created this as a module that other in house products can install as node module using "npm install ... ". Developers can import the component in their products but how to limit a user to pass the data in a certain format ?


Solution

  • Check this article if you want to build an angular library/package.

    You should be able to export your interface in the interface_api.ts file. Note that with this trick, you need to import your interface definition in your modules/components/services. But the advantage is that your feature modules will depend on library and thus features modules will be reusable in other projects.

    So this way you can import your interface definition from a library (angular package) without the need of relying on folder structure in your project.

    Hope it can help you.