@teamhive/angular-package-core

A common package for all Angular packages published by team hive

DEMO: https://teamhive.github.io/angular-package-core

Contribution Guidelines

Changelog

Installation

npm i @teamhive/angular-package-core --save

In angular.json add the following entries to their locations

  ...
  "styles": [
    "node_modules/prismjs/themes/prism.css",
    "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css"
  ],
  "scripts": [
    "node_modules/marked/lib/marked.js",
    "node_modules/prismjs/prism.js",
    "node_modules/prismjs/components/prism-bash.min.js",
    "node_modules/prismjs/components/prism-typescript.min.js",
    "node_modules/prismjs/components/prism-scss.min.js",
    "node_modules/prismjs/plugins/line-numbers/prism-line-numbers.js"
  ]

Usage

app.module.ts

import { TeamHivePackageCoreModule } from '@teamhive/angular-package-core';

@NgModule({
  imports: [
    ...,
    TeamHivePackageCoreModule.forRoot(),
  ]
})

When providing values to the ExampleSources and SupportingSource objects, use the require() function with '!!raw-loader' to read the files so they can be passed. requiring them in, in this way makes sure that, during bundling the locations of the files are taken into account

app-example-page-shell is the main component to use from this package

import { Component } from '@angular/core';
import { ExampleSources, SupportingSource } from '@teamhive/angular-package-core';

@Component({
  selector: 'app-my-page',
  templateUrl: 'my-page.component.html',
  styleUrls: ['my-page.component.scss']
})
export class MyPageComponent {

  // The component example's files. Allows the component to be run and the files viewed at the same time. 
  // Dynamic paths do not work. The entire relative path must be available at compile time.
  readonly source: ExampleSources = {
    html: require(`!!raw-loader?lang=html!../../exampless/my-example/my-example.component.html`),
    ts: require(`!!raw-loader?lang=typescript!../../examples/my-example/my-example.component.ts`)
  }

  // Other supporting files (data, interfaces, utils, pipes, etc.)
  otherFiles: SupportingSource[] = [
    {
      name: 'sample-data.ts',
      language: 'javascript',
      content: require('!!raw-loader?lang=typescript!../../data/sample-data.ts')
    }
  ];
}

<!-- the example title will display above the example -->
<app-example-page-shell exampleTitle="My Example" [exampleSources]="source" [otherSources]="otherFiles">
    <app-my-example></app-my-example>
</app-example-page-shell>

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

@Component({
  selector: 'app-my-example',
  templateUrl: 'my-example.component.html',
  styleUrls: ['my-example.component.scss']
})
export class MyExampleComponent {
  ...
}

Inputs and Configuration

Directives and Inputs

| Inputs | Description | |---|---| | exampleTitle | The title to display above the example | | exampleSources | The files that are used as a part of the component rendered as an example. See example-sources.interface.ts | | otherSources | The supporting files for the example or any other files to include for display. See supporting-sources.interface.ts

More Examples

See the Demo for more configuration, and styling options.