Topic: Fixed Button Component Compile Errors
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 {
}
}
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 4 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 4 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.
GK
Konrad Stępień staff commented 4 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()
]
});
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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