@anjuna/angular-core
v1.2.19
Published
<p align="center"> <img src="//cdn.zuora.com/theme/0.6.0/assets/anjuna/anjuna-logo.svg"/> <br/><br/> </p>
Downloads
801
Keywords
Readme
@anjuna/angular-core
The @anjuna/angular-core module is a set of Angular-specific wrappers and helpers to plug the core component library into Angular's APIs and patterns.
Getting Started
npm install @anjuna/core @anjuna/angular-core
Include the Theme
The best way to add the theme is by including the theme.css
files from @anjuna/theme
in your styles.scss
. Icons are best added by CDN url in your styles.scss
.
@import '~@anjuna/theme/dist/css/theme.css';
Note: the polyfill for CSS variables does not work with dynamically loaded imports. For CSS variables to work in IE, the theme needs to be part of your application's compiled style.
Include the Web Components
To use the web components in your application, you first need to include them. Depending on your integration, there are a couple ways to do this.
The preferred way to add web component libraries to Angular applications is to do so when bootstrapping the app. Update your application's
main.ts
to add the following functionality:
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
// import the loader and alias it so it won't conflict with other libraries
import {applyPolyfills, defineCustomElements as defineAnjunaElements} from '@anjuna/core/loader';
import {AppModule} from '@app/app.module';
import {environment} from '@env/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
applyPolyfills().then(() => {
defineAnjunaElements(window);
// define any other web components within this block also
});
Custom Elements Schema
By default, Angular does not like it when it doesn't recognize a component tag and will throw an error. To configure Angular modules to tell them we're using custom elements, we need to add the CUSTOM_ELEMENT_SCHEMA schema to modules that will be making use of them.
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@NgModule({
declarations: [
// removed for brevity
],
imports: [
// removed for brevity
],
schemas: [
// the important part
CUSTOM_ELEMENTS_SCHEMA
],
bootstrap: [AppComponent]
})
export class AppModule {}
Include the Module
Once installed, you can import the module into any Angular module you need it.
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {AnjunaCoreModule} from '@anjuna/angular-core';
@NgModule({
imports: [
// Other imports
AnjunaCoreModule
],
declarations: [
// application components
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class MyModule {}