Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Inline NgDoc ViewerNew to Visual Studio Code? Get it now.
Inline NgDoc Viewer

Inline NgDoc Viewer

SMIT_PATEL_SP

|
4 installs
| (0) | Free
Enhance your Angular development with instant inline documentation. View Angular API docs, examples, and best practices directly in your code editor while typing. Supports core Angular services, RxJS, forms, routing, and more.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Inline NgDoc Viewer

Version Installs Rating License

⚡ Boost your Angular development productivity with instant inline documentation! View Angular API docs, examples, and best practices directly in your code editor while typing.

⚠️ Disclaimer ⚠️

This is NOT an official Angular extension. It is a community-developed tool designed to enhance the Angular development experience.

✨ Features

  • 🚀 Instant Documentation: Hover over Angular classes and services to see comprehensive documentation
  • 📚 Extensive Coverage: Documentation for all major Angular concepts:
    • 🛠️ Core Angular services (HttpClient, ChangeDetectorRef, NgZone)
    • 📝 Forms (FormBuilder, FormGroup, FormControl, Validators)
    • 🛣️ Routing (Router, ActivatedRoute, Route)
    • 🏗️ Structure (@Component, @Directive, @Injectable, Input, Output)
    • 🔒 Security (DomSanitizer, SafeHtml)
    • ⏱️ Lifecycle hooks (OnInit, OnDestroy, OnChanges, AfterViewInit, AfterContentInit)
    • 🔄 RxJS operators (map, filter, switchMap)
    • 🎯 Structural directives (ngIf, ngFor, ngSwitch)
    • 🧪 Testing utilities (TestBed, ComponentFixture)
    • 📦 Common modules (BrowserModule, CommonModule)
  • 💡 Smart Examples: Practical code examples for each feature
  • 🎨 Clean Formatting: Well-organized and easy-to-read documentation
  • ⚡ Zero Configuration: Works out of the box

🚀 Quick Start

  1. Open VS Code
  2. Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac)
  3. Search for "Inline NgDoc Viewer"
  4. Click Install
  5. Start coding! Just hover over any Angular class or service

📋 Requirements

  • VS Code 1.60.0 or higher
  • TypeScript or JavaScript files
  • Angular project

⚙️ Extension Settings

This extension contributes the following settings:

  • inlineNgDocViewer.enable: Enable/disable the extension (default: true)

🔍 Usage Examples

// Hover over HttpClient to see its documentation
constructor(private http: HttpClient) {}

// Hover over FormBuilder to see form creation examples
constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    name: ['', Validators.required]
  });
}

// Hover over Router to see navigation examples
constructor(private router: Router) {
  this.router.navigate(['/dashboard']);
}

📚 Additional Resources

  • Official Angular Documentation
  • Angular API Reference
  • RxJS Documentation
  • VS Code Extension Guide

🤝 Contributing

Contributions are welcome! Please feel free to report bugs/enhancements.

📝 Release Notes

See the CHANGELOG.md file for details.

🙏 Acknowledgments

  • Thanks to the Angular team for their excellent documentation and framework
  • Thanks to the VS Code team for providing a robust extension API
  • Thanks to all contributors who help improve this extension

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Known Issues

  • Currently supports a limited set of Angular services
  • Documentation is static and not pulled from the official Angular documentation
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft