ngx-lib-nfq-button

A simple test of webcomponents in Angular

Usage no npm install needed!

<script type="module">
  import ngxLibNfqButton from 'https://cdn.skypack.dev/ngx-lib-nfq-button';
</script>

README

NgxLibNfqButton

  • A simple component library to be used with Angular.
  • This component extends the funtionality of Angular web-components and is recommended that it is used with it.
  • However, this component can be used inside any other component.
  • It is developed using Angular >=8.0.0 and its ng g library schematics.

Examples/Demo

  • A simple Example can be found under src/app directory of this repository. It uses json-server to have a url and filter functionality.

Installation

npm i ngx-lib-nfq-button

API

import { ButtonModule } from 'ngx-lib-nfq-button';
selector: ui-button

@Inputs()

Input Type Required Description
text string YES the text to be displayed inside the button.
disabled boolean Optional, default: false if true, it disables the button

Usage

  1. Register the ButtonModule in your app module.

import { ButtonModule } from 'ngx-lib-nfq-button'

import { NgModule } from '@angular/core';
import { ButtonModule } from 'ngx-mat-typeahead';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [AppComponent],
 imports: [
   ButtonModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {}
  1. Use the selector inside any component html file <ui-buton><ui-button> in your component.

Running the example in local env inside your project

  • npm i
  • Run ng serve for a dev server and running the demo app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
  • The demo app uses json-server module for enabling the url and filter funtionality.