From c4db99f5a3e332f7515553c62d866fb50665b2db Mon Sep 17 00:00:00 2001
From: Bernhard <bernhard_tulln@live.at>
Date: Wed, 24 May 2023 16:34:05 +0200
Subject: [PATCH] update angular getting started (#1352)

---
 docs/frameworks/angular.md | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/docs/frameworks/angular.md b/docs/frameworks/angular.md
index d94ed5ae..c57477d6 100644
--- a/docs/frameworks/angular.md
+++ b/docs/frameworks/angular.md
@@ -10,10 +10,30 @@ To add Shoelace to your Angular app, install the package from npm.
 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.
+Next, [include a theme](/getting-started/themes) into your project. In this example, we'll import the light theme and use the CDN as a base path.
+
+Include the theme into your `angular.json` config.
+
+```json
+...
+"styles": [
+  "src/app/theme/styles.scss",
+  "@shoelace-style/shoelace/dist/themes/light.css"
+],
+...
+```
+
+OR
+include it into your `styles.scss`.
+
+```scss
+@use "@shoelace-style/shoelace/dist/themes/light.css";
+...
+```
+
+After that set the [base path](/getting-started/installation#setting-the-base-path) in your `AppModule` for icons and other assets.
 
 ```jsx
-import '@shoelace-style/shoelace/dist/themes/light.css';
 import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
 
 setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
@@ -31,6 +51,10 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 import { AppComponent } from './app.component';
 
+import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
+
+setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
+
 @NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule],
@@ -48,7 +72,8 @@ import { SlDrawer } from '@shoelace-style/shoelace';
 
 @Component({
   selector: 'app-drawer-example',
-  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>'
+  template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>',
+  providers: [SlDrawer]
 })
 export class DrawerExampleComponent implements OnInit {