From f97ac1e79444db8ae29a42b89f1dcecf88aa9257 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 25 Nov 2024 05:29:55 -0800
Subject: [PATCH] docs: fix issues with Angular quick-start guide

---
 docs/framework/angular/quick-start.md | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/docs/framework/angular/quick-start.md b/docs/framework/angular/quick-start.md
index 03ea88b..08537c1 100644
--- a/docs/framework/angular/quick-start.md
+++ b/docs/framework/angular/quick-start.md
@@ -6,17 +6,32 @@ id: quick-start
 The basic angular app example to get started with the Tanstack angular-store.
 
 **app.component.ts**
-```html
+```angular-ts
+import { Component } from '@angular/core'
+import { DisplayComponent } from './display.component'
+import { IncrementComponent } from './increment.component'
+
+@Component({
+selector: 'app-root',
+imports: [DisplayComponent, IncrementComponent],
+template: `
 <h1>How many of your friends like cats or dogs?</h1>
-<p>Press one of the buttons to add a counter of how many of your friends like cats or dogs</p>
+<p>
+  Press one of the buttons to add a counter of how many of your friends like
+  cats or dogs
+</p>
 <app-increment animal="dogs" />
 <app-display animal="dogs" />
 <app-increment animal="cats" />
 <app-display animal="cats" />
+`,
+})
+export class AppComponent {}
+
 ```
 
 **store.ts**
-```js
+```typescript
 import { Store } from '@tanstack/store';
 
 // You can use @tanstack/store outside of App components too!
@@ -68,6 +83,6 @@ import { store, updateState } from './store';
 })
 export class Increment {
     animal = input.required<string>();
-    updateState = injectStore(store, updateState);
+    updateState = updateState;
 }
-```
\ No newline at end of file
+```