@anjuna/angular-core

@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 {}