Creating Elements Components
Overview
These elements are Angular components packaged as custom elements, which can be used in any web application.
Why use Elements?
- Reusability: Angular elements can be reused across different projects and frameworks.
- Interoperability: They can be used in non-Angular projects, making them versatile.
- Encapsulation: Custom elements encapsulate their styles and behavior, reducing the risk of conflicts.
How to use Create custom Elements
Step 1: Install the Schematics Package globally
To Generate the Angular Elements, you need to install the @celerofinancas/schematics package globally, using the following command:
yarn global add @celerofinancas/schematics
Step 2: Create a new Celero Angular Elements Project
To create a new Angular Elements project, you can use the following command, which will generate a new Angular project with the necessary configurations to create Angular Elements.
ng new --collection=@celerofinancas/schematics
The CLI will ask you to provide the name of the project and the type of project you want to create.
- To name the project, you can use the name of the element you want to create.
- To select the type of project, you can select the option
Elements.
Step 3: Install dependencies of MFE which you want to use
After creating the project, you need to install the dependencies of the MFE you want to use in your project and install all the necessary dependencies.
yarn add @celerofinancas/ui-auth @celerofinancas/ui-cash-flow
To exemplify the configuration, we are using the CashFlowComponent component as an example.
Step 4: Configure the Angular Elements project
After installing the dependencies, you need to configure the Angular Elements project to use the MFE components. To do this, you need to add the dependencies and configurations to the elements.module.ts file.
@NgModule({
imports: [
BrowserModule,
CommonModule,
StoreModule,
CdsInputsModule,
UiDirectivesModule,
LoadersModule,
BrowserAnimationsModule,
UiOAuthModule.forRoot(
{ apiUrl: 'https://finance-develop-celero-api-client.celero.mobi' },
{
issuer: 'https://auth-develop.celero.mobi/realms/Develop',
redirectUri: `${window.location.origin}/silent-refresh.html`,
clientId: 'client',
scope: 'openid profile email',
}
),
],
providers: [
provideNgxMask(),
provideRouter(routes),
provideHttpClient(
withInterceptors([httpHeadersInterceptor]),
withInterceptorsFromDi()
),
{
provide: HTTP_INTERCEPTORS,
useClass: ClearRequestInterceptor,
multi: true,
},
{
provide: ENVIRONMENTS_CONFIGURATION,
useValue: {
apiUrl: 'https://finance-develop-celero-api-client.celero.mobi',
staticUrl: 'https://finance-develop-celero-static.celero.mobi',
},
},
{ provide: HELP_CENTER_CONFIGURATION, useValue: {} },
],
})
export class ElementModule implements DoBootstrap {
protected components = [
{ name: 'cash-flow', component: CashFlowComponent },
];
constructor(private injector: Injector, private tokenHandlerService: TokenHandlerService) {}
ngDoBootstrap(appRef: ApplicationRef) {
this.tokenHandlerService.setStorage(new CookieStorage());
this.components.forEach(({ name, component }) => {
if (!customElements.get(name)) {
const webComponent = createCustomElement(component, {
injector: this.injector,
});
customElements.define(name, webComponent);
}
});
this.injectGlobalStyles();
}
private injectGlobalStyles(): void {
const head = document.querySelector('head');
const linkRef = document.createElement('link');
linkRef.rel = 'stylesheet';
linkRef.href = `https://static.celero.mobi/fonts/style.css`;
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = './styles.css';
head.appendChild(linkRef);
head.appendChild(style);
}
}
To exemplify the configuration, we are using the CashFlowComponent component as an example.
In the ElementModule class, we have the components array, which contains the components that will be created as custom elements.
In the ngDoBootstrap method, we create the custom elements using the createCustomElement method and define them using the customElements.define method.
To access data from the MFE components, you need create and configure the TokenHandlerService service.
Exists a method setStorage in the TokenHandlerService service that receives a storage object as a parameter. This object must implement the OAuthStorage interface.
Step 5: Create and Using the CashFlowComponent component
After configuring the project, you can create the CashFlowComponent component and use it in your project as exemplified below.
@Component({
selector: 'cash-flow',
templateUrl: './cash-flow.component.html',
styleUrls: ['./cash-flow.component.scss'],
imports: [BfmCashFlowComponent],
standalone: true,
})
export class CashFlowComponent {
constructor() {}
}
<div class="cash-flow">
<h1>Cash Flow</h1>
<bfm-cash-flow [allowRedirectAfterDownload]="false"/>
</div>
Step 6: Build the Angular Elements project
After creating the component, you need to build the project to generate the custom elements.
yarn build
Step 7: Import the Global main file in your project
To use the element, you need to import the main file in your project. You can do this by setting the main.js file in your HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="dist/cash-flow-element/main.js"></script>
</head>
<body>
<cash-flow></cash-flow>
</body>
</html>
See that we are using the cash-flow tag to use the CashFlowComponent component.
To more information about how to use the custom elements, you can read the Web components documentation,
or the Web Components Configuraiton documentation on this site.
Conclusion
In this guide, we learned how to create Angular Elements components and use them in a web application. Which allows you to create reusable components that can be used in any web application, consult the Web Components documentation for more information, or visit the Theming section to learn how to customize the components, and the visit each library documentation to know more about the components.