Nurturing Palpable Magnificence

    @teamhive/angular-package-core
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    @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.

    Keywords

    none

    Install

    npm i @teamhive/angular-package-core

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    108 kB

    Total Files

    47

    Last publish

    Collaborators

    • sarcolemna
    • wzachsmith
    • granttw
    • jpinkster
    • sbannigan
    • jgibson55
    • emrad
    • jsmit2239
    • ryankayne
    • mriess260
    • nkosy