Skip to content

Commit

Permalink
feat(ngx-material-faq): support angular v6 | material v6 and rxjs v6
Browse files Browse the repository at this point in the history
  • Loading branch information
AnthonyNahas committed May 15, 2018
1 parent fa92e9a commit c7ce34f
Show file tree
Hide file tree
Showing 17 changed files with 4,079 additions and 4,935 deletions.
60 changes: 40 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,30 @@
View all the directives in action at https://anthonynahas.github.io/ngx-material-faq

## Dependencies
* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 2.0.0)
* [Angular v6.0.1](https://angular.io) (*requires* Angular 2 or higher, tested with 2.0.0) - Angular V6 - Material V6 are now supported

### Requirements (peer dependencies):
- [angular flex-layout ](https://www.npmjs.com/package/@angular/flex-layout)
- [angular material ](https://www.npmjs.com/package/@angular/material)
- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme)
- [angular cdk ](https://www.npmjs.com/package/@angular/cdk)
- [angular animations ](https://www.npmjs.com/package/@angular/animations)
- [angular forms ](https://www.npmjs.com/package/@angular/forms)
- if you need a built in theme --> please let me know

- [angular flex-layout v6.0.0-beta.15](https://www.npmjs.com/package/@angular/flex-layout)
- [angular material v6.0.2](https://www.npmjs.com/package/@angular/material)
- [angular cdk v6.0.2](https://www.npmjs.com/package/@angular/cdk)
- [angular animations v6.0.1](https://www.npmjs.com/package/@angular/animations)
- [angular forms v6.0.1](https://www.npmjs.com/package/@angular/forms)

```bash
npm i @angular/cdk @angular/material @angular/flex-layout @angular/animations @angular/forms
```

### Additional requirements (Material Design)
- [angular material theme](https://material.angular.io/guide/getting-started#step-4-include-a-theme)
- [angular material icons](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)


## Installation
Install above dependencies via *npm*.

Now install `ngx-material-faq` via:
```shell
npm install --save ngx-material-faq
npm install -s ngx-material-faq
```

---
Expand All @@ -63,30 +64,30 @@ map: {

Once installed you need to import the main module:
```js
import { LibModule } from 'ngx-material-faq';
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 ` LibModule .forRoot()`):
different for the root (top-level) module for which you should end up with the code similar to (notice ` NgxMaterialFaqModule .forRoot()`):
```js
import { LibModule } from 'ngx-material-faq';
import { NgxMaterialFaqModule } from 'ngx-material-faq';

@NgModule({
declarations: [AppComponent, ...],
imports: [LibModule.forRoot(), ...],
imports: [NgxMaterialFaqModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
```

Other modules in your application can simply import ` LibModule `:
Other modules in your application can simply import ` NgxMaterialFaqModule `:

```js
import { LibModule } from 'ngx-material-faq';
import { NgxMaterialFaqModule } from 'ngx-material-faq';

@NgModule({
declarations: [OtherComponent, ...],
imports: [LibModule, ...],
imports: [NgxMaterialFaqModule, ...],
})
export class OtherModule {
}
Expand All @@ -99,6 +100,8 @@ add the `ngx-material-faq` or the `ngx-material-faq-admin` element to your templ

### ngx-material-faq

**This component aims to list the provided frequently asked questions**

<p align="center">
<img alt="ngx-material-faq" style="text-align: center;"
src="assets/demo-ngx-material-faq.png">
Expand All @@ -109,7 +112,13 @@ add the `ngx-material-faq` or the `ngx-material-faq-admin` element to your templ
```

```typescript
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {FaqItem} from 'ngx-material-faq';

export class HomeComponent implements OnInit {

ngOnInit() {
}

list: FaqItem[] = [
{
Expand All @@ -123,9 +132,14 @@ export class HomeComponent implements OnInit {
];

}

```

### 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..**

<p align="center">
<img alt="ngx-material-faq-admin" style="text-align: center;"
src="assets/demo-ngx-material-faq-admin.png">
Expand All @@ -138,7 +152,13 @@ export class HomeComponent implements OnInit {
in your component

```typescript
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {FaqItem} from 'ngx-material-faq';

export class HomeComponent implements OnInit {

ngOnInit() {
}

faq: FaqItem[] = [];

Expand All @@ -154,7 +174,7 @@ export class HomeComponent implements OnInit {

## Development

1. clone this [repo]()
1. clone this [repo](https://github.com/AnthonyNahas/ngx-material-faq)
2. Install the dependencies by running `npm i`
3. build the library `npm run build` or `gulp build`
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
Expand All @@ -164,10 +184,10 @@ $ npm run build
```

4. Link the library
- on windows `gulp link` or `locally npx gulp link`
- on windows `gulp link` or locally `npx gulp link`
- on mac/linux `sudo gulp link` or locally `sudo npx gulp link`

5. Navigate to the demo app
5. Navigate to the demo app's directory
- `cd demo`
_ `npm i`
_ `npm start`
Expand Down
88 changes: 0 additions & 88 deletions demo/.angular-cli.json

This file was deleted.

153 changes: 153 additions & 0 deletions demo/angular.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"bsr": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/browser",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss",
"node_modules/material-design-icons/iconfont/material-icons.css"
],
"scripts": []
},
"configurations": {
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
},
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "bsr:build"
},
"configurations": {
"hmr": {
"browserTarget": "bsr:build:hmr"
},
"production": {
"browserTarget": "bsr:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "bsr:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss",
"node_modules/material-design-icons/iconfont/material-icons.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/server",
"main": "main.server.ts",
"tsConfig": "tsconfig.server.json"
}
}
}
},
"bsr-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "bsr:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "bsr",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
Loading

0 comments on commit c7ce34f

Please sign in to comment.