# shoelace-style-angular

> Provide @shoelace-style to Angular

Latest version **2.1.1** (published 2023-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install shoelace-style-angular
pnpm add shoelace-style-angular
yarn add shoelace-style-angular
bun add shoelace-style-angular
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2023-04-24 |
| First published | 2020-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 187.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Pavel Dymkov |
| Maintainers | paveldymkov |
| Keywords | @shoelace-style, shoelace, angular, ng |

## Links

- npm: https://www.npmjs.com/package/shoelace-style-angular
- Repository: https://github.com/PavelDymkov/shoelace-style-angular
- Homepage: https://github.com/PavelDymkov/shoelace-style-angular#readme
- Issues: https://github.com/PavelDymkov/shoelace-style-angular/issues
- npm.io page: https://npm.io/package/shoelace-style-angular

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [logical-not](https://npm.io/package/logical-not.md) ^1.0.9
- [ngx-subscribable](https://npm.io/package/ngx-subscribable.md) ^1.0.1

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 2.1.1 (latest) — 2023-04-24
- 2.0.5 — 2022-09-21
- 2.0.4 — 2022-08-09
- 1.0.30 — 2022-08-09
- 1.0.29 — 2022-07-04
- 2.0.3 — 2022-07-04
- 2.0.2 — 2022-06-23
- 2.0.1 — 2022-06-23
- 1.0.28 — 2022-06-23
- 1.0.27 — 2022-06-22
- 2.0.0 — 2022-06-22
- 1.0.26 — 2022-06-22
- 1.0.25 — 2022-06-02
- 1.0.24 — 2022-05-20
- 1.0.23 — 2022-05-08
- … 42 more at https://npm.io/package/shoelace-style-angular/versions

## README

# ShoelaceStyleAngular

![test: passed](https://raw.githubusercontent.com/PavelDymkov/shoelace-style-angular/main/badges/test.svg)
![tests with @shoelace-style/shoelace: 2.4.0](https://raw.githubusercontent.com/PavelDymkov/shoelace-style-angular/main/badges/shoelace-version.svg)
![tests with angular: 14.2.2](https://raw.githubusercontent.com/PavelDymkov/shoelace-style-angular/main/badges/ng-version.svg)
![license: ](https://raw.githubusercontent.com/PavelDymkov/shoelace-style-angular/main/badges/license.svg)

## Shoelace and Angular

_src/app/app.module.ts_

```ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { ShoelaceStyleModule } from "shoelace-style-angular";
// required if use ReactiveFormsModule (formControlName etc.)
import { ShoelaceFormControlsModule } from "shoelace-style-angular/form-controls";

@NgModule({
    imports: [BrowserModule, ShoelaceStyleModule, ShoelaceFormControlsModule],
    // required 'cause shoelace based on Web Components:
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```

### Assets

For using `shoelace` assets, add to [config](https://angular.io/guide/workspace-config#asset-config):

```json
{
    "glob": "**/*.*",
    "input": "node_modules/@shoelace-style/shoelace/dist",
    "output": "/assets/shoelace"
}
```

and to `src/main.ts`:

```ts
import { setBasePath } from "@shoelace-style/shoelace";

setBasePath("/assets/shoelace");
```

Provide `shoelace` components and styles to `index.html`:

```html
<link rel="stylesheet" href="/assets/shoelace/themes/light.css" />
```

## Example

Pay attention to use two-way bindings for sl-dialog open attribute!

```ts
import { Component } from "@angular/core";
import { FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: "app-greeter",
    template: `
        <form [formGroup]="form" (submit)="isDialogOpen = true">
            <sl-input
                label="Enter your name"
                formControlName="username"
            ></sl-input>

            <sl-button type="submit" [disabled]="form.invalid">
                Say Hello
            </sl-button>
        </form>

        <sl-dialog label="Greetings" [(open)]="isDialogOpen">
            Hello,
            {{ form.get("username")!.value }}!
        </sl-dialog>
    `,
})
export class GreeterComponent {
    form = this.formBuilder.group({
        username: ["World", Validators.required],
    });

    isDialogOpen = false;

    constructor(private formBuilder: FormBuilder) {}
}
```

---
_Source: https://npm.io/package/shoelace-style-angular · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._