A common package for all Angular packages published by team hive

Usage no npm install needed!

<script type="module">
  import teamhiveAngularPackageCore from 'https://cdn.skypack.dev/@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



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

In angular.json add the following entries to their locations

  "styles": [
  "scripts": [



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

  imports: [
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';

  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">
import { Component } from '@angular/core';

  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.