@anjuna/angular-core/README.md

<p align="center"> <img src="//cdn.zuora.com/theme/0.6.0/assets/anjuna/anjuna-logo.svg"/> <br/><br/> </p>

<p align="center">
<img src="//cdn.zuora.com/theme/0.6.0/assets/anjuna/anjuna-logo.svg"/>
<br/><br/>
</p>

# @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

```bash
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`.

```css
@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:

```typescript
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.

```typescript
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.

```typescript
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 {}
```