ods-components-angular

ods-components-angular

Build Status

Development scripts

Running the application in development mode using storybook

yarn workspace @zeiss/ods-components-angular start:dev

Running the linters

yarn workspace @zeiss/ods-components-angular lint

Running the tests

yarn workspace @zeiss/ods-components-angular test

Generate artifact build

yarn workspace @zeiss/ods-components-angular build

Create storybook demo build

yarn workspace @zeiss/ods-components-angular build:demo

Installation

The component library has to be consumed via the SIP feed (Connect to Azure Artifacts).

Preparations

Install the @zeiss/ods-foundations package as described in ods-foundations/README.md.

npm install @zeiss/ods-components-angular

OR

yarn add @zeiss/ods-components-angular

Usage

Then import the

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgOdsModule } from '@zeiss/ods-components-angular'; // ← ADD this
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    NgOdsModule, // ← ADD this
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Then you should be able to use the ODS library in your components like this:

In your app.module.ts:

<!-- app.component.html -->
<cz-ods-floating-card> Hey, I'm floating! </cz-ods-floating-card>