Skip to content

Commit

Permalink
Update angular.md (#1670)
Browse files Browse the repository at this point in the history
Added more instructions for clearity about what to do
  • Loading branch information
floflausch committed Oct 20, 2023
1 parent e5da26f commit 8d42e9f
Showing 1 changed file with 27 additions and 2 deletions.
29 changes: 27 additions & 2 deletions docs/pages/frameworks/angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,41 @@ Angular [plays nice](https://custom-elements-everywhere.com/#angular) with custo

## Installation

### Download the npm package

To add Shoelace to your Angular app, install the package from npm.

```bash
npm install @shoelace-style/shoelace
```

Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
### Update the Angular Configuration

Next, [include a theme](/getting-started/themes). In this example, we'll import the light theme.
Its also important to load the components, by using a <script> tag into the index.html file. However, the Angular way to do it is by adding a script configurations into your angular.json file as follows:


```
"architect": {
"build": {
...
"options": {
...
"styles": [
"src/styles.scss",
"@shoelace-style/shoelace/dist/themes/light.css"
],
"scripts": [
"@shoelace-style/shoelace/dist/shoelace.js"
]
...
```

### Setting up the base path

Next, set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets in the `main.ts`. In this example, we'll use the CDN as a base path.

```jsx
import '@shoelace-style/shoelace/%NPMDIR%/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/%NPMDIR%/utilities/base-path';

setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');
Expand Down

0 comments on commit 8d42e9f

Please sign in to comment.