Fixed Button Component Compile Errors

Topic: Fixed Button Component Compile Errors

gkondrach pro asked 5 years ago

0 0

Expected behavior

I created Angular 9 component for Fixed Buttons. I expected it to work like demo page.

Actual behavior

It worked -with errors- after 'save', but failed when server fully stopped then restarted.

Resources (screenshots, code snippets etc.)

Error message TS2554 for each button:

Error occurs in the template of component ButtonsComponent. src/app/buttons/buttons.component.html:30:127 - error TS2554: Expected 0 arguments, but got 1.
30     <a mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star" 
(click)="fixed.toggle($event)">
  src/app/buttons/buttons.component.ts:5:16
    5   templateUrl: './buttons.component.html',

What have I missed?

buttons.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-buttons',
  templateUrl: './buttons.component.html',
  styleUrls: ['./buttons.component.scss']
})
export class ButtonsComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
}

Add comment

Konrad Stępień staff answered 5 years ago

0 0 Best answer

Hi @gkondrach,

did you set this code in your project?

<div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">

Please give more information about HTML code.

Add comment

gkondrach pro answered 5 years ago

0 0 Best answer

Hi Konrad,

Yes, that code is in the component code I copied from the guide. It occurs 3 parts:

Part 1:

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

  <a mdbBtn floating="true" size="lg" color="red" class="waves-light" mdbWavesEffect (click)="fixed.toggle($event)">
    <mdb-icon fas icon="pencil-alt" ></mdb-icon>
  </a>

  **<div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">**
    <a mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star" ></mdb-icon></a>
    <a mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon></a>
    <a mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
    <a mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="shopping-cart"></mdb-icon></a>
  </div>

</div>

Part 2:

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;" (mouseleave)="fixed.toggle()">

  <a mdbBtn floating="true" size="lg" color="red" class="waves-light" mdbWavesEffect (mouseenter)="fixed.toggle()">
    <mdb-icon fas icon="pencil-alt"></mdb-icon>
  </a>

  **<div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">**
    <a mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star" ></mdb-icon></a>
    <a mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect><mdb-icon fas icon="user"></mdb-icon></a>
    <a mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
    <a mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="shopping-cart"></mdb-icon></a>
  </div>

</div>

Part 3:

<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">

  <a mdbBtn floating="true" size="lg" color="red" class="waves-light" mdbWavesEffect (click)="fixed.toggle($event)">
    <mdb-icon fas icon="pencil-alt" ></mdb-icon>
  </a>

  **<div class="fixed_collapse" mdbCollapse="isCollapsed" #fixed="bs-collapse">**
    <a mdbBtn floating="true" color="red" class="waves-light" mdbWavesEffect><mdb-icon fas icon="star"  (click)="fixed.toggle($event)"></mdb-icon></a>
    <a mdbBtn floating="true" color="yellow" class="darken-1 waves-light" mdbWavesEffect><mdb-icon fasa icon="user"></mdb-icon></a>
    <a mdbBtn floating="true" color="green" class="waves-light" mdbWavesEffect><mdb-icon fas icon="envelope"></mdb-icon></a>
    <a mdbBtn floating="true" color="blue" class="waves-light" mdbWavesEffect><mdb-icon fas icon="shopping-cart"></mdb-icon></a>
  </div>

</div>

Konrad Stępień staff commented 5 years ago

Can you follow again the https://mdbootstrap.com/docs/angular/getting-started/quick-start/ page? I think you didn't import correctly package

gkondrach pro commented 5 years ago

Thank you for suggestion, Konrad. I have questions at the end that you can answer once you see what I did before I logged issue. What I had done is this:

FIRST1. Followed NPM install 9-steps in VM #12. Built baseline app using MDB code3. Compile failed.

SECOND1. Deleted project2. Performed again what's listed in FIRST

THIRD1. Built new VM with clean Angular envronment2. Audited environment3. Tested non-MDB apps4. Performed again what's listed in FIRST in new VM

All 3 test projects package.json show: "ng-uikit-pro-standard":"git+https://oauth2:XXXX(MY-TOKEN)@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git"

Please say EXACTLY HOW to import correctly that is different from performed so far.

Konrad Stępień staff commented 5 years ago

Could you send me a simple project for my mail? k.stepien@mdbootstrap.com

And you also import styles and scripts in your angular.json file and in app module file?

Like this:

    import { NgModule } from '@angular/core';
    import { MDBBootstrapModule } from 'angular-bootstrap-md';
    @NgModule({
        imports: [
            MDBBootstrapModule.forRoot()
        ]
    });

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 9.1.0
Device: workstation, server
Browser: chrome, firefox
OS: linux
Provided sample code: No
Provided link: No

gkondrach

Pro User

170Support score
8Questions 13Answers

0Snippets likes 0Snippets