# @mayvio-ui/angular
> **Official Angular wrapper components and directives for the Mayvio UI component library.**
`@mayvio-ui/angular` exposes custom selectors and attributes mapping to the Mayvio UI design system, built in partial Ivy compilation mode to support modern Angular applications.
---
## Installation
Install both the Angular package and the core styling assets:
```bash
npm install mayvio-ui @mayvio-ui/angular
```
---
## Configuration & Styles
### 1. Import Styles
Include the core stylesheet inside your global stylesheet (e.g. `src/styles.css` or `angular.json` styles array):
```css
@import "mayvio-ui/css";
```
### 2. Import Module
Register `MayvioUIModule` in your module declaration (e.g., `app.module.ts`) or imports metadata array:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MayvioUIModule } from '@mayvio-ui/angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
MayvioUIModule // Register modular selectors
],
bootstrap: [AppComponent]
})
export class AppModule {}
```
---
## Usage Example
Use the wrapper selectors inside your HTML templates:
```html