Add Covalent Components

Covalent UI is based on the official Angular Material 2, and provides lots of missing features in the Angular Material 2.

1. The same layout directive as Angular Material 1.x.
2. HttpIntecepterService and HttpIntecepter.
3. Ui components, such file uploading, loading, charts etc.

Install Covalent components

Install the following components according to your requirements .

npm install --save @covalent/core

# dynamic-forms
npm install --save @covalent/dynamic-forms

# highlight.js integration
npm install --save @covalent/highlight

# http intecepter service
npm install --save @covalent/http

# mardown support
npm install --save @covalent/markdown

# angular translate module
npm install --save @ngx-translate/core
npm install --save @ngx-translate/http-loader

# charts
npm install --save @swimlane/ngx-charts

Register

Create a shared NgModule to import all components.

import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { FormsModule, ReactiveFormsModule, } from '@angular/forms';
import { FlexLayoutModule, } from '@angular/flex-layout';
import { TranslateModule } from '@ngx-translate/core';
import {
  CovalentDataTableModule, CovalentMediaModule, CovalentLoadingModule,
  CovalentNotificationsModule, CovalentLayoutModule, CovalentMenuModule,
  CovalentPagingModule, CovalentSearchModule, CovalentStepsModule,
  CovalentCommonModule, CovalentDialogsModule,
} from '@covalent/core';
import {
  MdButtonModule, MdCardModule, MdIconModule,
  MdListModule, MdMenuModule, MdTooltipModule,
  MdSlideToggleModule, MdInputModule, MdCheckboxModule,
  MdToolbarModule, MdSnackBarModule, MdSidenavModule,
  MdTabsModule, MdSelectModule, MdGridListModule
} from '@angular/material';
import { NgxChartsModule, } from '@swimlane/ngx-charts';

import { ShowAuthedDirective } from './show-authed.directive';
import { Nl2brPipe } from './nl2br.pipe';
import { EmailValidatorDirective } from './email-validator.directive';

const FLEX_LAYOUT_MODULES: any[] = [
  FlexLayoutModule,
];

const ANGULAR_MODULES: any[] = [
  FormsModule, ReactiveFormsModule,
];

const MATERIAL_MODULES: any[] = [
  MdButtonModule, MdCardModule, MdIconModule,
  MdListModule, MdMenuModule, MdTooltipModule,
  MdSlideToggleModule, MdInputModule, MdCheckboxModule,
  MdToolbarModule, MdSnackBarModule, MdSidenavModule,
  MdTabsModule, MdSelectModule, MdGridListModule
];

const COVALENT_MODULES: any[] = [
  CovalentDataTableModule, CovalentMediaModule, CovalentLoadingModule,
  CovalentNotificationsModule, CovalentLayoutModule, CovalentMenuModule,
  CovalentPagingModule, CovalentSearchModule, CovalentStepsModule,
  CovalentCommonModule, CovalentDialogsModule,
];

const CHART_MODULES: any[] = [
  NgxChartsModule,
];

@NgModule({
  imports: [
    CommonModule,
    TranslateModule,
    ANGULAR_MODULES,
    MATERIAL_MODULES,
    COVALENT_MODULES,
    CHART_MODULES,
    FLEX_LAYOUT_MODULES,
  ],
  declarations: [
    ShowAuthedDirective,
    Nl2brPipe,
    EmailValidatorDirective
  ],
  exports: [
    TranslateModule,
    ANGULAR_MODULES,
    MATERIAL_MODULES,
    COVALENT_MODULES,
    CHART_MODULES,
    FLEX_LAYOUT_MODULES,
    ShowAuthedDirective,
    Nl2brPipe,
    EmailValidatorDirective,
  ]
})
export class SharedModule { }

Use it

In other UI based module, import this shared module. eg. In the home.module.ts.

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

Sample codes

The sample codes is hosted on my Github.com account.

https://github.com/hantsy/angular2-material-sample

References:

• Teradata Covalent UI