ng-coral-browser-module v0.0.0

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 CoralUI 3.x.

Build

Run npm run build to build the project.

Configuration

1. npm install @adcloud/ng-coral-browser-module
2. Replace the default BrowserModule with CoralComponentBrowserPlatform in your AppModule as below

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 '@adcloud/ng-coral-browser-module';

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

3. Use CoralUI components as usual in Angular template.

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

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