add angular example

README.md

@@ -64,7 +64,7 @@ Open [http://localhost:2000](http://localhost:2000) in your web browser.
 
 If you have babel/webpack set up, you can import the `loadPlayer` instead of using a `<script>` tag.
 
-For a react example, see [here](test/react/index.tsx)
+Example code is available [for react](test/react/index.tsx) and [for angular](test/angular/example.md).
 
 ```js
 // client side code

test/angular/example.md

@@ -0,0 +1,37 @@
+### app.component.html
+
+```html
+<canvas #videoPlayer></canvas>
+```
+
+### app.component.js
+
+```ts
+import { Component, ElementRef, AfterViewInit, ViewChild } from '@angular/core';
+import { loadPlayer, Player } from 'rtsp-relay/browser';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent implements AfterViewInit {
+  /** the instance of the rtsp-relay client */
+  player?: Player;
+
+  @ViewChild('videoPlayer')
+  videoPlayer?: ElementRef<HTMLCanvasElement>;
+
+  async ngAfterViewInit() {
+    // this will wait until the connection is established
+    this.player = await loadPlayer({
+      url: 'ws://localhost:2000/api/stream/1',
+      canvas: this.videoPlayer!.nativeElement,
+
+      // optional
+      onDisconnect: () => console.log('Connection lost!'),
+    });
+
+    console.log('Connected!', this.player);
+  }
+}
+```