Element for FAB already registered

[shaikhspear16]

Nativescript + Angular:

What is the best place to register FAB?

registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);

in AppModule, AppComponent, ChildComponents gives an error "Element for FAB already registered".

[Adam95]

Had the same problem. Then I placed it in my top-level app component above the class definition and it works fine now.

import {registerElement} from 'nativescript-angular/element-registry';

registerElement('Fab', () => require('nativescript-floatingactionbutton').Fab);

@Component({
  selector: "ns-app",
  templateUrl: "app.template.html"
})
export class AppComponent implements OnInit {
...
}

[bradmartin]

Thanks @Adam95 for the info.

[jafsparrow]

Hi.. I am getting the same error.
I tried adding those two line in AppComponent.ts.. same error.
pretty much tried with other components too.!!
any other solution..

import {registerElement} from 'nativescript-angular/element-registry';

registerElement('Fab', () => require('nativescript-floatingactionbutton').Fab);

@component({
selector: "ns-app",
templateUrl: "app.component.html",
})

[bradmartin]

I do this in app.component

import { Fab } from "nativescript-floatingactionbutton";
import { registerElement } from "nativescript-angular/element-registry";
registerElement("Fab", () => Fab);

and have no issues, hope that helps.

[jafsparrow]

Tried this .. same error.
If I don't add these two line, I can see floating action. but a stretched version of it.

I will try to add FAB in a brand new sample project and try..

[bradmartin]

If it's stretched then you likely don't have a width set on it for the styler to apply. You only have to call registerElement once in your app and I do it in app.component in all of my apps and have no issue. So I'd check to make sure you don't have it called twice.