# ng-coral-browser-module

> A customized browser module which extends the default BrowserModule in @angular/core to fill the gap between Angular 4.x and Coral 3.x.

Latest version **0.0.0** (published 2017-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-coral-browser-module
pnpm add ng-coral-browser-module
yarn add ng-coral-browser-module
bun add ng-coral-browser-module
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2017-04-07 |
| First published | 2017-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | jianliao79 |

## Links

- npm: https://www.npmjs.com/package/ng-coral-browser-module
- npm.io page: https://npm.io/package/ng-coral-browser-module

## Dependencies (11)

- [rxjs](https://npm.io/package/rxjs.md) ^5.1.0
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.4
- [@angular/core](https://npm.io/package/@angular/core.md) ^4.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^4.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^4.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^4.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^4.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^4.0.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^4.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^4.0.0

## Recent versions

- 0.0.0 (latest) — 2017-04-07

## README

# Angular Browser Module for CoralUI

A customized browser module which extends the default BrowserModule in @angular/core to fill the gap between Angular 4.x and Coral 3.x.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.

## Configuration

1. Copy folder src/app/coral_browser to your `Angular 4.x` project source folder
2. Replace the default `BrowserModule` with `CoralComponentBrowserPlatform` in your `AppModule` as below
```typescript

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';

import {AppComponent} from './app.component';
import {CoralComponentBrowserModule} from '../coral_browser';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CoralComponentBrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

```
3. Run the following command, then check [http://localhost:4200/]() for detail
```bash
ng serve
```

4. Use above components as usual in Angular component template.
```html
<coral-anchorlist>
  <a is="coral-anchorlist-item" icon="users" href="#community">Community</a>
  <a is="coral-anchorlist-item" icon="news" href="#news">What's new in CoralUI</a>
  <a is="coral-anchorlist-item" icon="servers" href="#status">CoralUI Status</a>
</coral-anchorlist>
```
   All the CoralUI custom events are suppose to work.
```html
<coral-accordion (coral-accordion:change)="onAccordionChanged($event)">
  <coral-accordion-item>
    <coral-accordion-item-label>Panel 1</coral-accordion-item-label>
    <coral-accordion-item-content>CoralUI has CSS theme support. 
    </coral-accordion-item-content>
  </coral-accordion-item>
  <coral-accordion-item>
    <coral-accordion-item-label>Panel 2</coral-accordion-item-label>
    <coral-accordion-item-content>There are currently only two themes available for CoralUI;
    </coral-accordion-item-content>
  </coral-accordion-item>
  <coral-accordion-item>
    <coral-accordion-item-label>Panel 3</coral-accordion-item-label>
    <coral-accordion-item-content>It may be helpful to understand how a theme is included into CoralUI.
    </coral-accordion-item-content>
  </coral-accordion-item>
  <coral-accordion-item>
    <coral-accordion-item-label>Panel 4</coral-accordion-item-label>
    <coral-accordion-item-content>This section provides details on the few CSS-only.
    </coral-accordion-item-content>
  </coral-accordion-item>
</coral-accordion>
```   

## How it works?
The project is inspired by article [Experiments with Angular Renderers](https://blog.nrwl.io/experiments-with-angular-renderers-c5f647d4fd9e). I built an angular customer render which encapsulate all special handling for all the problematic Coral components. Since renderer is totally transparent to application code developer, any internal change of CoralUI components would not influence application code. 

## Known Issues
`Coral.TabView` still has problem


## Reference
Angular ticket [6827](https://github.com/angular/angular/issues/6827)

---
_Source: https://npm.io/package/ng-coral-browser-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._