fe-admin Angular Package

This guide will help you integrate the fe-admin package into your Angular project.

1. Install the Package

First, install the fe-admin package using npm:

npm install --save fe-admin

2. Add Required Styles

In order to use the styles provided by the fe-admin package, you need to import them into your project.

Option 1: Add Imports in the angular.json file

Open your angular.json file and add the following paths to the "styles" array:

"styles": [
  "src/styles.scss",
  "../node_modules/fe-admin/src/assets/global/styles.scss",
  "../node_modules/fe-admin/src/assets/global/tailwind.css"
]

Option 2: Add Imports in Your Main Styles File

Alternatively, you can add these imports directly to your main SCSS file (typically src/styles.scss):

@import '../node_modules/fe-admin/src/assets/global/styles.scss';
@import '../node_modules/fe-admin/src/assets/global/tailwind.css';

3. Add Translation Assets to angular.json

The fe-admin package includes i18n (internationalization) files that you need to add to your assets in the angular.json file.

In the angular.json file, add the following object under the assets array:

"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/fe-admin/src/assets/i18n",
    "output": "/assets/fe-admin/i18n/"
  },
  ...
]

This will copy the translation files from the fe-admin package into your project's assets folder.

4. Create a Lazy-Loaded Module with FeAdminModule and Custom Translation Loader

You need to create a lazy-loaded Angular module that imports the FeAdminModule and sets up a custom translation loader using the translation files.

Here's an example of how to set it up:

import { NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpLoaderFactory } from './app.translate.factory'; // Create this factory function

import { FeAdminModule } from 'fe-admin'; // Import FeAdminModule
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin.component'; // Your admin component

// Create the TranslateHttpLoader factory function
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
  return new TranslateHttpLoader(http, 'assets/fe-admin/i18n/', '.json');
}

@NgModule({
  imports: [
    FeAdminModule, // Add FeAdminModule here
    AdminRoutingModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  declarations: [AdminComponent],
  exports: [],
})
export class AdminModule {}

In this setup:

FeAdminModule is imported from the fe-admin package.

TranslateModule is configured to load translation files from assets/fe-admin/i18n/ using the custom HttpLoaderFactory.

5.add urls configuration to our component.

app.component.ts;

import { FEAdminModule } from "fe-admin";

@Component({
  selector: "app-root",
  template: `<fe-admin />`,
  standalone: true,
  imports: [FEAdminModule],
})
export class AppComponent {
  constructor(private feAdmin: FeAdminService) {
    this.feAdmin.useLanguage("en");
    this.feAdmin.setUrlConfig({
      baseUrl: environment.apiUrl,
      imageUrl: environment.imageUrl,
      commonUrl: environment.commonUrl,
      otherUrl: environment.otherUrl, // for organization search
    });
  }
}

6. Add the fe-admin Component to Your HTML.

To display the fe-admin component in your application, simply add the tag to the HTML file where you want it to appear.

For example, in your admin.component.html:

<fe-admin />

This will render the fe-admin component in your Angular application.

Summary

Install the fe-admin package with npm install --save fe-admin.

mport the required styles into your angular.json or main styles file.

Add the translation assets in angular.json.

Create a lazy-loaded module, importing FeAdminModule and setting up a custom translation loader.

create urls configuaration for our admin component.

Use in your HTML to display the admin component.

That’s it! Your application should now be integrated with fe-admin.