https://github.com/paveldymkov/shoelace-style-angular

https://github.com/paveldymkov/shoelace-style-angular

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/paveldymkov/shoelace-style-angular
• Owner: PavelDymkov
• License: mit
• Created: 2020-09-02T08:24:02.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-24T10:38:56.000Z (almost 2 years ago)
• Last Synced: 2024-11-21T00:11:53.719Z (2 months ago)
• Language: TypeScript
• Size: 4.37 MB
• Stars: 10
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

```

## 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: `

        

            

            

                Say Hello

            

        

        

            Hello,

            {{ form.get("username")!.value }}!

        

    `,

})

export class GreeterComponent {

    form = this.formBuilder.group({

        username: ["World", Validators.required],

    });

    isDialogOpen = false;

    constructor(private formBuilder: FormBuilder) {}

}

```