Ninja Pirate Marksman

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Angular UI Tabs


    $ npm install @pevil/ng-tabs



    First, import the provided module:

    import { NgTabModule } from '@pevil/ng-tabs';
        imports: [NgTabModule]
    export class Module {}

    Building a set of tabs

    3 directives are provided:

    • pvlTabGroup
    • pvlTab
    • pvlTabPanel

    First, an example of how to use them together, with more detail below

    <ul pvlTabGroup [tabPanel]="characterPanel">
        <li pvlTab [tabId]="'a'">
            View A
        <li pvlTab [tabId]="'b'">
            View B
        <li pvlTab [tabId]="'c'">
            View C
            <ng-template><img [src]="c" /></ng-template>
    <div>some other optional content that maybe you want to place before the tab panel</div>
    <ng-template pvlTabPanel #putContentHere="pvlTabPanel"></ng-template>

    For a more concrete example, see here or here

    pvlTabGroup Use this to define a group of tabs that belong together. Here, we're defining an

      element as the group, where each child with the pvlTab directive (in this case each
    • element), is a part of this tabGroup.

      The [tabPanel] input expects a reference to the panel where we want to render these tabs. The optional [initialTab] input expects a string matching the tabId of whichever tab should be displayed first. If none is provided, the first tab's contents will be the default.

      pvlTab As described above, we want to apply the pvlTab directive to each element that describes a tab. In this case we have 3

    • elements, where the tabs themselves will display [View A, View B, View C]. Each element with a pvlTab directive also uses an to define the data that should be rendered in the panel when the tab is selected.

      The [tabId] input expects a string id, unique to the other tabs in this tab group.

      Whichever tab is active will have the css class .pvl-active-tab applied to it

      pvlTabPanel Apply this to an element, wherever you want the content defined by each tab to render. Also remember to grab a reference to the directive, in order to pass that as an input to the tabGroup directive (in our example, we did that with #putContentHere="pvlTabPanel")


      Run local demo by:

      1. Cloning the repo
      2. Run $ npm run build.all
      3. cd demo
      4. python3 -m http.server 4300
      5. open localhost:4300 in a browser

      OR visit this plunkr


    npm i @pevil/ng-tabs

    DownloadsWeekly Downloads






    Last publish


    • peterlaraia