ng-coral-browser-module

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

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

1. Run the following command, then check http://localhost:4200/ for detail

ng serve

1. Use above components as usual in Angular component 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