@zoom-ui/angular v0.0.1-alpha.20

Zoom-UI // Angular

The official Angular flavor of Zoom-UI.

Usage

Angular Components

To utilize the Zoom-UI Angular components, simply import the ZoomUiModule in your top-level Angular project module, like so...

import { NgModule } from '@angular/core';
import { ZoomUiModule } from '@zoom-ui/angular';

@NgModule({
    imports: [
        ZoomUiModule
    ],
    declarations: [ ... ],
    providers: [ ... ],
    bootstrap: [ ... ]
})
export class AppModule {
}

Once the module is imported, you can use any of the component's within the Zoom-UI library in your application!

As a quick example, here's a new component utilizing the Zoom-UI InputComponent:

import { Component } from '@angular/core';

@Component({
    selector: 'zoom-test',
    template: `
    <zoom-input [(value)]="test" 
                label="Test Zoom-UI Field:"></zoom-input>
    `
})
export class TestComponent {
    public test: string = '';
}

SCSS Styling

Zoom-UI uses SCSS for it's styling library. To import all of the Zoom-UI styles into your application, simply import the main Zoom-UI scss file into your own SCSS files like so:

@import "~@zoom-ui/angular/index.scss";

This will import all of the base styling for all Zoom-UI Angular components!

Development

The Angular flavor of Zoom-UI utilizes the Angular CLI for development.

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.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

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.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.