demo(app): integration of the new MatFaqModule

Author: AnthonyNahas

demo/e2e/app.e2e-spec.ts

@@ -1,6 +1,6 @@
 import { NgxMaterialFaqDemoPage } from './app.po';
 
-describe('ngx-material-faq-demo App', () => {
+describe('faq-demo App', () => {
   let page: NgxMaterialFaqDemoPage;
 
   beforeEach(() => {

demo/package.json

@@ -10,7 +10,7 @@
     "test": "jest",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "postinstall": "npm link ngx-material-faq"
+    "postinstall": "npm link @angular-material-extensions/faq"
   },
   "private": true,
   "dependencies": {

demo/src/app/app.module.ts

@@ -17,7 +17,7 @@ import {HttpClientModule} from '@angular/common/http';
     // Add .withServerTransition() to support Universal rendering.
     // The application ID can be any identifier which is unique on
     // the page.
-    BrowserModule.withServerTransition({appId: 'ngx-material-faq-demo-id'}),
+    BrowserModule.withServerTransition({appId: 'faq-demo-id'}),
     BrowserAnimationsModule,
     FormsModule,
     HttpClientModule,

demo/src/app/getting-started/getting-started.component.html

@@ -550,8 +550,8 @@ <h1>Getting Started</h1>
           <mat-card>
             <mat-card-title>Example of ngx-material-faq-admin</mat-card-title>
             <mat-card-content>
-              <!--<ngx-material-faq-admin [title]="'ngx-material-faq-admin'"-->
-              <!--(onFAQItemAdded)="onNewFaqItem($event)"></ngx-material-faq-admin>-->
+              <!--<faq-admin [title]="'faq-admin'"-->
+              <!--(onFAQItemAdded)="onNewFaqItem($event)"></faq-admin>-->
             </mat-card-content>
           </mat-card>
 

demo/src/app/getting-started/getting-started.component.ts

@@ -194,7 +194,7 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('Getting Started | ngx-material-faq');
+    this.titleService.setTitle('Getting Started | faq');
   }
 
   onNewFaqItem(faqItem: FaqItem) {

demo/src/app/home/home.component.html

@@ -2,15 +2,15 @@
   <div class="container">
     <div class="row">
       <div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
-        <img src="assets/logo.svg" alt="ngx-material-faq logo" class="logo">
+        <img src="assets/logo.svg" alt="@angular-material-extensions/faq logo" class="logo">
       </div>
       <div class="col-sm-8 text-center text-md-left">
-        <h1>ngx-material-faq</h1>
+        <h1>@angular-material-extensions/faq</h1>
         <p>Angular Library built with material design in order to provide a reusable faq (frequently asked questions)
           component for every project. Ask, Answer and List</p>
         <p>Scroll down to see it in action!</p>
         <p class="buttons">
-          <a class="btn btn-outline-primary btn-lg" href="https://github.com/anthonynahas/ngx-material-faq"
+          <a class="btn btn-outline-primary btn-lg" href="https://github.com/angular-material-extensions/faq"
              target="_blank"><i class="fa fa-github fa-lg"></i> Code on Github</a>
           <a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
             class="fa fa-book fa-lg"></i> Documentation</a>
@@ -23,13 +23,13 @@ <h1>ngx-material-faq</h1>
 
 <section class="home">
   <div class="container">
-    <ngx-material-faq-admin [title]="'Admin'" (onFAQItemAdded)="onNewFaqItem($event)"></ngx-material-faq-admin>
-    <!--ngx-material-faq-->
+    <mat-faq-admin [title]="'Admin'" (onFAQItemAdded)="onNewFaqItem($event)"></mat-faq-admin>
+    <!--faq-->
   </div>
 </section>
 <section class="home" style="margin: 2rem 0 2rem 0">
   <div class="container">
-    <ngx-material-faq [faqList]="faq"></ngx-material-faq>
+    <mat-faq [faqList]="faq"></mat-faq>
     <a href="https://github.com/angular/angular.js/wiki/FAQ"
        mat-button
        color="primary">

demo/src/app/home/home.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {FaqItem} from 'ngx-material-faq';
+import {FaqItem} from '@angular-material-extensions/faq';
 
 @Component({
   selector: 'app-home',
@@ -85,15 +85,16 @@ export class HomeComponent implements OnInit {
     },
     {
       question: 'How do I .preventDefault() or .stopPropagation()?',
-      answer: 'All ng-click and related bindings inject a $event object that you can call things like .preventDefault() or even pass the object to your methods'
+      answer: 'All ng-click and related bindings inject a $event object that you can call things like ' +
+      '.preventDefault() or even pass the object to your methods'
     },
   ];
 
   constructor(private titleService: Title) {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('Home | ngx-material-faq');
+    this.titleService.setTitle('@angular-material-extensions/faq');
   }
 
   onNewFaqItem(faqItem: FaqItem) {

demo/src/app/shared/header/header.component.html

@@ -1,11 +1,11 @@
-
 <div class="container" style="padding-left: 0; padding-right: 0;">
   <header class="navbar navbar-light navbar-fixed-top navbar-expand-lg">
 
-    <a class="navbar-brand" routerLink="/home" (click)="navbarCollapsed = true">ngx-material-faq</a>
+    <a class="navbar-brand" routerLink="/home" (click)="navbarCollapsed = true">@angular-material-extensions/faq</a>
 
     <button class="navbar-toggler navbar-toggler-right" type="button" (click)="navbarCollapsed = !navbarCollapsed"
-            [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
+            [attr.aria-expanded]="!navbarCollapsed" aria-controls="navbarContent" aria-expanded="false"
+            aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
 
@@ -17,4 +17,4 @@
       </ul>
     </div>
   </header>
-</div>
+</div>

demo/src/app/shared/shared.module.ts

@@ -18,16 +18,17 @@ import {
 } from '@angular/material';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatFaqModule} from '@angular-material-extensions/faq';
+
 import {DisqusModule} from 'ngx-disqus';
 import {HighlightModule} from 'ngx-highlightjs';
 import {NgxMaterialPagesModule} from 'ngx-material-pages';
-import {NgxMaterialFaqModule} from 'ngx-material-faq';
 
 @NgModule({
   imports: [
     RouterModule,
     NgbCollapseModule.forRoot(),
-    NgxMaterialFaqModule.forRoot(),
+    MatFaqModule.forRoot(),
     NgxMaterialPagesModule.forRoot(),
     DisqusModule.forRoot('ngx-material-faq'),
     HighlightModule.forRoot(),
@@ -48,7 +49,7 @@ import {NgxMaterialFaqModule} from 'ngx-material-faq';
     HeaderComponent,
     FooterComponent,
     ContentWrapperComponent,
-    NgxMaterialFaqModule,
+    MatFaqModule,
     NgxMaterialPagesModule,
     DisqusModule,
     HighlightModule,