Not working with angular 7 project.

[johannesjo]

Not sure, but it it seems that there is an issue with the latest build. I can import the module, but the components don't seem to be available anywhere.The html gets not parsed to the component and the linting in webstorm also hows me that eco-fab-speed-dial etc are unknown html tags.

[miller45]

Just tried it with a fresh ng7 project (angular-cli) and it works...Did you add the @angular/material stuff? This required for this to work. (see https://material.angular.io/guide/getting-started)

[johannesjo]

I did. Maybe I'm missing some modules. I'll check and get back to you.

Ramon Klein notifications@github.com schrieb am Fr., 26. Okt. 2018, 20:43:

Just tried it with a fresh ng7 project (angular-cli) and it works...Did you add the @angular/material stuff? This required for this to work. (see https://material.angular.io/guide/getting-started)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Ecodev/fab-speed-dial/issues/11#issuecomment-433506377, or mute the thread https://github.com/notifications/unsubscribe-auth/ABY4iSaLJuQ0JAYaNegdb7SZYW4lGiCvks5uo1fcgaJpZM4X8slK .

[johannesjo]

No luck. The issue persists even with a fresh project. app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import 'hammerjs';

import {
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatIconModule,
  MatInputModule,
  MatRadioModule,
  MatSlideToggleModule,
  MatTooltipModule,
  MatToolbarModule,
} from '@angular/material';

import { EcoFabSpeedDialModule } from '@ecodev/fab-speed-dial';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    EcoFabSpeedDialModule,

    MatIconModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatInputModule,
    MatRadioModule,
    MatCardModule,
    MatCheckboxModule,
    MatSlideToggleModule,
    MatTooltipModule,
    MatToolbarModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
}

package.json

{
  "name": "test-ng",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/cdk": "^7.0.2",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.0.2",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ecodev/fab-speed-dial": "^3.0.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.3",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }
}

html

<eco-fab-speed-dial [(open)]="open" [direction]="direction" [animationMode]="animationMode" [fixed]="fixed">
  <eco-fab-speed-dial-trigger>
    <button mat-fab (click)="actionX()"><mat-icon>check</mat-icon></button>
  </eco-fab-speed-dial-trigger>

  <eco-fab-speed-dial-actions>
    <button mat-mini-fab (click)="action1()"><mat-icon>add</mat-icon></button>
    <button mat-mini-fab (click)="action2()"><mat-icon>edit</mat-icon></button>
    <button mat-mini-fab (click)="action3()"><mat-icon>menu</mat-icon></button>
  </eco-fab-speed-dial-actions>
</eco-fab-speed-dial>

[johannesjo]

Interesting. Just copied over the contents of the app component over too, so all functions used in the template are also there. Now it works. It's interesting because no error whatsoever was thrown before.

[johannesjo]

Maybe it makes sense to adjust the example in the Readme in a way that copy and paste works fine?