Install the library and its required peer dependencies via npm. Use the following commands:
npm install ng-im-form-bootstrap
npm install bootstrap@5.3.8
npm install @fortawesome/fontawesome-free@7.1.0
Add Bootstrap and Font Awesome styles to your global configuration
in angular.json:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css",
"src/styles.css"
],
"scripts": []Alternatively, if you prefer to import styles directly in your global stylesheet (styles.scss or styles.css):
@import "bootstrap/dist/css/bootstrap.min.css";
@import "@fortawesome/fontawesome-free/css/all.min.css";
In your main app module (app.module.ts), import the
FormBuilderModule
or
FormPreviewModule:
import { FormBuilderModule } from 'ng-im-form-bootstrap';
@NgModule({
imports: [
BrowserModule,
FormBuilderModule
],
bootstrap: [AppComponent]
})
export class AppModule {}Once installed, you can use the component selector in any template:
<ng-im-form-builder [preset]="null"></ng-im-form-builder>If you see Bootstrap styling and Font Awesome icons properly rendered, your setup is complete