JSPM

ngx-codetab

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q33529F
  • License The Unlicense

Package Exports

  • ngx-codetab

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-codetab) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

NGX-codetab

This is a codetab module and components for Angular projects. Live Demo Here

Badges

Build npm License PRs Welcome

Installing / Getting started

To get started using the library install from npm

npm i ngx-codetab --save

This will give you access to the module and components available in the library.

Add module to you NgModule

After installing the library to get access to the features you need to add it to your AppModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxCodeTabModule } from 'ngx-codetab';

@NgModule({
   imports: [BrowserModule, NgxCodeTabModule],
   declarations: [AppComponent],
})
export class AppModule {}

The inside of you app.component.html you can use the component like so:

<ngx-codetab [language]="html" [content]="<p>Hello World</p>"></ngx-codetab>

If you would like a collection of tabs together simple wrap them in the collection component

<ngx-codetab-collection>
    <ngx-codetab [language]="html" [content]="<p>Hello World</p>"></ngx-codetab>
    <ngx-codetab [language]="js" [content]="console.log('loading...');"></ngx-codetab>
    <ngx-codetab [language]="css" [content]="p { color: blue; }"></ngx-codetab>
</ngx-codetab-collection>

For more information on using this component go to the Documentation and Demo site

Want to Contribute?

Go check out our Contributing Document for more information on getting setup.