# msx-ui-common

**Repository Path**: mirrors_CiscoDevNet/msx-ui-common

## Basic Information

- **Project Name**: msx-ui-common
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-22
- **Last Updated**: 2025-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @msx/common

## Description

Common components and directives for MSX platform and service packs.  It provides upgrades and mappings for many MSX UI provided directives and components for use within Angular 9+ based Service Pack User Interfaces.   Using these components ensures a common look and feel, as well as theme-bility through the MSX Theme Builder.  

It also contains mock testing versions of those components and directives that can be
used safely outside of an AngularJS environment.

## Installation

This module is already installed in the MSX UI, and can be used by importing the

`MsxCommonModule` from `@msx/common`:

```typescript
import { NgModule } from '@angular/core';
import { MsxCommonModule } from '@msx/common';

@NgModule({
  imports: [
    MsxCommonModule
  ]
})
export class MyModule {}
```

For service packs, ensure you have installed and are using
`@msx/webpack-externals` in your Webpack configuration, and add `@msx/common` to
your package.json's `peerDependencies` and `devDependencies`. This ensures that
your package indicates that it depends on `@msx/common` to run, but will install
the package locally during development for use in your unit tests.

```json
{
  "name": "my-service-pack",
  "peerDependencies": {
    "@msx/common": "^1.0.0"
  },
  "devDependencies": {
    "@msx/common": "^1.0.0"
  }
}
```

## Testing

If you are testing your component using Angular's `TestBed`, import the
`MsxCommonTestingModule` in your testing module instead of `MsxCommonModule` to
have `@msx/common`'s components and directives mocked.

```typescript
import {
  async,
  ComponentFixture,
  TestBed
} from '@angular/core/testing';
import { MsxCommonTestingModule } from '@msx/common/testing';
import { MyComponent } from './my.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MsxCommonTestingModule
      ],
      declarations: [MyComponent]
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  }));
});
```