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.