Documentation
Services Reference
Angular services provided by Angular AI Kit for common functionality.
Overview
Available services
MarkdownService
Parse and render markdown content
CodeHighlightService
Syntax highlighting for code
ThemeService
Theme management (light/dark)
ClipboardService
Clipboard copy/paste operations
StorageService
Local storage wrapper
MarkdownService
Parse and render markdown content
1// MarkdownService - Markdown Rendering2import { MarkdownService } from '@angular-ai-kit/core';3 4@Component({5 selector: 'app-example',6})7export class ExampleComponent {8 private markdown = inject(MarkdownService);9 10 // Render markdown to HTML11 html = this.markdown.render('# Hello **World**');12 // => '<h1>Hello <strong>World</strong></h1>'13 14 // Render with options15 html = this.markdown.render(content, {16 sanitize: true,17 gfm: true,18 breaks: true,19 });20 21 // Parse without rendering (get AST)22 tokens = this.markdown.parse('# Title');23 24 // Check if content has code blocks25 hasCode = this.markdown.hasCodeBlocks(content);26 27 // Extract code blocks28 codeBlocks = this.markdown.extractCodeBlocks(content);29}30 31// Service API32interface MarkdownService {33 /** Render markdown to HTML */34 render(content: string, options?: MarkdownOptions): string;35 36 /** Parse markdown to tokens */37 parse(content: string): Token[];38 39 /** Check if content has code blocks */40 hasCodeBlocks(content: string): boolean;41 42 /** Extract code blocks from content */43 extractCodeBlocks(content: string): CodeBlock[];44}CodeHighlightService
Syntax highlighting for code blocks
1// CodeHighlightService - Syntax Highlighting2import { CodeHighlightService } from '@angular-ai-kit/core';3 4@Component({5 selector: 'app-example',6})7export class ExampleComponent {8 private highlight = inject(CodeHighlightService);9 10 // Highlight code11 highlightedHtml = this.highlight.highlight(code, 'typescript');12 13 // Auto-detect language14 result = this.highlight.highlightAuto(code);15 // => { language: 'typescript', value: '<span class="hljs-...">...</span>' }16 17 // Get supported languages18 languages = this.highlight.getSupportedLanguages();19 20 // Register additional languages21 ngOnInit() {22 this.highlight.registerLanguage('custom', customLanguageDefinition);23 }24}25 26// Service API27interface CodeHighlightService {28 /** Highlight code with specified language */29 highlight(code: string, language: string): string;30 31 /** Auto-detect language and highlight */32 highlightAuto(code: string): HighlightResult;33 34 /** Get list of supported languages */35 getSupportedLanguages(): string[];36 37 /** Register a custom language */38 registerLanguage(name: string, definition: LanguageDefinition): void;39 40 /** Set the theme */41 setTheme(theme: string): void;42}ThemeService
Manage light/dark theme
1// ThemeService - Theme Management2import { ThemeService } from '@angular-ai-kit/core';3 4@Component({5 selector: 'app-example',6})7export class ExampleComponent {8 private theme = inject(ThemeService);9 10 // Get current theme11 currentTheme = this.theme.theme; // Signal<'light' | 'dark'>12 13 // Check if dark mode14 isDark = this.theme.isDark; // Signal<boolean>15 16 // Toggle theme17 toggleTheme() {18 this.theme.toggle();19 }20 21 // Set specific theme22 setDark() {23 this.theme.setTheme('dark');24 }25 26 // Follow system preference27 useSystem() {28 this.theme.setTheme('system');29 }30}31 32// Service API33interface ThemeService {34 /** Current theme (signal) */35 readonly theme: Signal<'light' | 'dark' | 'system'>;36 37 /** Whether dark mode is active (signal) */38 readonly isDark: Signal<boolean>;39 40 /** Toggle between light and dark */41 toggle(): void;42 43 /** Set specific theme */44 setTheme(theme: 'light' | 'dark' | 'system'): void;45}ClipboardService
Clipboard operations
1// ClipboardService - Clipboard Operations2import { ClipboardService } from '@angular-ai-kit/core';3 4@Component({5 selector: 'app-example',6})7export class ExampleComponent {8 private clipboard = inject(ClipboardService);9 10 // Copy text11 async copyText() {12 const success = await this.clipboard.copy('Text to copy');13 if (success) {14 this.showNotification('Copied!');15 }16 }17 18 // Copy with notification19 async copyWithFeedback() {20 await this.clipboard.copyWithFeedback('Text', {21 successMessage: 'Copied to clipboard!',22 errorMessage: 'Failed to copy',23 });24 }25 26 // Read from clipboard (requires permission)27 async pasteText() {28 const text = await this.clipboard.read();29 console.log('Pasted:', text);30 }31}32 33// Service API34interface ClipboardService {35 /** Copy text to clipboard */36 copy(text: string): Promise<boolean>;37 38 /** Copy with feedback notification */39 copyWithFeedback(text: string, options?: FeedbackOptions): Promise<boolean>;40 41 /** Read from clipboard */42 read(): Promise<string | null>;43 44 /** Check if clipboard is supported */45 isSupported(): boolean;46}StorageService
Local storage wrapper with type safety
1// StorageService - Local Storage Wrapper2import { StorageService } from '@angular-ai-kit/core';3 4@Component({5 selector: 'app-example',6})7export class ExampleComponent {8 private storage = inject(StorageService);9 10 // Store data11 saveSettings() {12 this.storage.set('settings', { theme: 'dark', fontSize: 14 });13 }14 15 // Retrieve data (with type safety)16 loadSettings() {17 const settings = this.storage.get<Settings>('settings');18 return settings ?? defaultSettings;19 }20 21 // Remove data22 clearSettings() {23 this.storage.remove('settings');24 }25 26 // Check if key exists27 hasSettings() {28 return this.storage.has('settings');29 }30 31 // Clear all data32 clearAll() {33 this.storage.clear();34 }35}36 37// Service API38interface StorageService {39 /** Store data (serialized as JSON) */40 set<T>(key: string, value: T): void;41 42 /** Retrieve data */43 get<T>(key: string): T | null;44 45 /** Remove data */46 remove(key: string): void;47 48 /** Check if key exists */49 has(key: string): boolean;50 51 /** Clear all data */52 clear(): void;53 54 /** Get all keys */55 keys(): string[];56}Creating Custom Services
Build your own services following Angular AI Kit patterns
You can create your own services following Angular AI Kit patterns. Here's an example of a conversation management service:
1// Creating Custom Services2import { Injectable, signal, inject } from '@angular/core';3import { ChatMessage } from '@angular-ai-kit/core';4 5@Injectable({ providedIn: 'root' })6export class ConversationService {7 private conversations = signal<Conversation[]>([]);8 private activeId = signal<string | null>(null);9 10 // Expose as readonly11 readonly conversations$ = this.conversations.asReadonly();12 readonly activeId$ = this.activeId.asReadonly();13 14 // Computed signals15 readonly activeConversation = computed(() => {16 const id = this.activeId();17 return this.conversations().find(c => c.id === id) ?? null;18 });19 20 // Methods21 create(): string {22 const id = crypto.randomUUID();23 const conversation: Conversation = {24 id,25 title: 'New Chat',26 messages: [],27 createdAt: new Date(),28 updatedAt: new Date(),29 };30 31 this.conversations.update(c => [conversation, ...c]);32 this.activeId.set(id);33 return id;34 }35 36 select(id: string): void {37 this.activeId.set(id);38 }39 40 addMessage(message: ChatMessage): void {41 const id = this.activeId();42 if (!id) return;43 44 this.conversations.update(convs =>45 convs.map(c => {46 if (c.id !== id) return c;47 return {48 ...c,49 messages: [...c.messages, message],50 updatedAt: new Date(),51 };52 })53 );54 }55 56 delete(id: string): void {57 this.conversations.update(c => c.filter(conv => conv.id !== id));58 if (this.activeId() === id) {59 this.activeId.set(this.conversations()[0]?.id ?? null);60 }61 }62}Best Practices
Tips for using services effectively
Use inject()
Prefer inject() over constructor injection
Signal-Based State
Use signals for reactive state in services
Provide at Root
Use providedIn: 'root' for singletons
Readonly Signals
Expose signals as readonly to prevent external mutations
Importing Services
How to import services in your project
import {
MarkdownService,
CodeHighlightService,
ThemeService,
ClipboardService,
StorageService,
} from '@angular-ai-kit/core';