ngx-material-faq v2.0.1
ngx-material-faq - Angular Library built with material design in order to provide a reusable faq (frequently asked questions) component for every project. Ask, Answer and List
This project has been moved to @angular-material-extensions/faq
Demo
View all the directives in action at https://anthonynahas.github.io/ngx-material-faq
Dependencies
- Angular v6.x (requires Angular 2 or higher, tested with 2.0.0) - Angular V6 - Material V6 are now supported
Requirements (peer dependencies):
- angular flex-layout v6.0.0-beta.15
- angular material v6.0.2
- angular cdk v6.0.2
- angular animations v6.0.2
- angular forms v6.0.2
npm i @angular/cdk @angular/material @angular/flex-layout @angular/animations @angular/forms
Additional requirements (Material Design)
Installation
Install above dependencies via npm.
Now install ngx-material-faq
via:
npm install -s ngx-material-faq
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forngx-material-faq
:map: { 'ngx-material-faq': 'node_modules/ngx-material-faq/bundles/ngx-material-faq.umd.js', }
Once installed you need to import the main module:
import { NgxMaterialFaqModule } from 'ngx-material-faq';
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgxMaterialFaqModule .forRoot()
):
import { NgxMaterialFaqModule } from 'ngx-material-faq';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgxMaterialFaqModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import NgxMaterialFaqModule
:
import { NgxMaterialFaqModule } from 'ngx-material-faq';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxMaterialFaqModule, ...],
})
export class OtherModule {
}
Usage
add the ngx-material-faq
or the ngx-material-faq-admin
element to your template:
ngx-material-faq
This component aims to list the provided frequently asked questions
<ngx-material-faq [faqList]="list"></ngx-material-faq>
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {FaqItem} from 'ngx-material-faq';
export class HomeComponent implements OnInit {
ngOnInit() {
}
list: FaqItem[] = [
{
question: 'Why does it think the jQuery plugin is missing?',
answer: 'Remember: load jQuery before AngularJS if you are using jQuery plugins!'
},
{
question: 'How do I access the DOM from a controller?',
answer: 'DO NOT perform DOM selection/traversal from the controller. The HTML hasn\'t rendered yet. Look up \'directives\'.'
}
];
}
ngx-material-faq-admin
This component is actually for admin purposes, like to add a frequently asked question to the backend, firebase ... and so on..
<ngx-material-faq-admin [title]="'Admin'" (onFAQItemAdded)="onNewFaqItem($event)"></ngx-material-faq-admin>
in your component
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {FaqItem} from 'ngx-material-faq';
export class HomeComponent implements OnInit {
ngOnInit() {
}
faq: FaqItem[] = [];
onNewFaqItem(faqItem: FaqItem) {
console.log('on new faqItem -> ', faqItem);
this.faq.splice(0, 0, faqItem);
}
}
Please checkout the full documentation here or follow the official tutorial
Development
- clone this repo
- Install the dependencies by running
npm i
- build the library
npm run build
orgulp build
To generate all*.js
,*.d.ts
and*.metadata.json
files:
$ npm run build
- Link the library
- on windows
gulp link
or locallynpx gulp link
on mac/linux
sudo gulp link
or locallysudo npx gulp link
- Navigate to the demo app's directory
cd demo
npm i
npm start
extras
To lint all *.ts
files:
$ npm run lint
Other Angular Libraries
- ngx-auth-firebaseui
- ngx-material-pages
- ngx-material-password-strength
- ngx-material-contacts
- @angular-material-extensions/combination-generator
License
Copyright (c) 2018 anthonynahas. Licensed under the MIT License (MIT)