Update angular.md (#1264)

Added an example how to access Shoelace components from component code
pull/1265/head
Marko Hrovatic 2023-03-22 21:39:20 +01:00 zatwierdzone przez GitHub
rodzic 257407758f
commit e335189bb8
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
1 zmienionych plików z 32 dodań i 0 usunięć

Wyświetl plik

@ -41,6 +41,38 @@ import { AppComponent } from './app.component';
export class AppModule {}
```
## Reference Shoelace components in your Angular component code
```js
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>'
})
export class DrawerExampleComponent implements OnInit {
// use @ViewChild to get a reference to the #drawer element within component template
@ViewChild('drawer')
drawer?: ElementRef<SlDrawer>;
...
constructor(...) {
}
ngOnInit() {
}
...
showDrawer() {
// use nativeElement to access Shoelace components
this.drawer?.nativeElement.show();
}
}
```
Now you can start using Shoelace components in your app!
?> Are you using Shoelace with Angular? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/angular.md)