# wrToClassList

> Flattens class inputs into a de-duplicated list of single class names.

Source: https://ngwr.dev/reference/utils/wr-to-class-list  
Kind: Util  
Added in v14.11  
Updated in v16  
Optional

## Usage

Pass your own CDK `panelClass` through it: the CDK does not split `'a b'` and throws.

```angular-ts
import { wrToClassList } from 'ngwr/utils';

wrToClassList('p-4 rounded-xl');            // ['p-4', 'rounded-xl']
wrToClassList(['btn', 'p-4 rounded'], 'x'); // ['btn', 'p-4', 'rounded', 'x']
wrToClassList('a', null, false, '  ', 'a'); // ['a']
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `wrToClassList` | Splits on whitespace and de-duplicates. Skips `false`, `null`, `undefined` and empty tokens. | `(...values: readonly (WrClassInput \| false)[]) => string[]` | `—` |

## See also

- [Theming](https://ngwr.dev/guides/theming) — Load the theme, switch light and dark, and rebrand the palette.
- [Overlay](https://ngwr.dev/guides/overlay) — Style ngwr's floating panels and control where focus goes.
- [Common types](https://ngwr.dev/reference/interfaces/common) — Shared type aliases from ngwr/utils.
- [Dialog](https://ngwr.dev/reference/components/dialog) — Open any component as a modal dialog and await its result.
- [Select](https://ngwr.dev/reference/components/select) — Pick one or several values from a list, with search and free-text tags.