2.1.1 • Published 2 years ago

shoelace-style-angular v2.1.1

Weekly downloads
51
License
MIT
Repository
github
Last release
2 years ago

ShoelaceStyleAngular

test: passed tests with @shoelace-style/shoelace: 2.4.0 tests with angular: 14.2.2 license:

Shoelace and Angular

src/app/app.module.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:

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

and to src/main.ts:

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

setBasePath("/assets/shoelace");

Provide shoelace components and styles to index.html:

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

Example

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

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) {}
}
2.1.1

2 years ago

2.0.5

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.4

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

2.0.1

3 years ago

1.0.24

3 years ago

2.0.0

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.30

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.23

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.13

4 years ago

1.0.11

4 years ago

1.0.9

4 years ago

1.0.5

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.7.47

4 years ago

0.7.45

4 years ago

0.7.43

4 years ago

0.7.37

4 years ago

0.7.39

4 years ago

0.7.41

4 years ago

0.7.33

4 years ago

0.7.35

4 years ago

0.7.31

4 years ago

0.7.29

4 years ago

0.7.25

4 years ago

0.7.27

4 years ago

0.0.0

4 years ago

0.7.23

4 years ago

0.7.21

4 years ago

0.7.19

4 years ago

0.7.17

4 years ago

0.7.15

4 years ago

0.7.13

4 years ago

0.7.11

4 years ago

0.7.9

5 years ago

0.7.7

5 years ago

0.7.5

5 years ago

0.7.3

5 years ago

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago