🧩 IQnext Angular Snippets

A VS Code snippet extension to speed up your Angular development at IQnext. This extension provides commonly used HTML and TypeScript snippet patterns — especially tailored for Angular and Angular Material used across our codebase.

🚀 Features

• 💡 HTML snippets for reusable UI blocks (dialogs, tables, buttons, etc.)
• ⚡ TypeScript snippets for Angular reactive forms, API calls, and dialog injection
• 📦 Clean, maintainable, and uniform code patterns

📂 Snippet Categories

🟦 TypeScript Snippets (Language: typescript)

These are available in .ts files (primarily components/services):

🔷 HTML Snippets (Language: html)

These are accessible in .html files and include reusable Angular Material components:

🔧 Usage

1. Type the snippet prefix (e.g., initForm) in an appropriate .ts file or iq-dialog in an appropriate .html file
2. Select the snippet from the autocomplete dropdown or press Tab to expand.
3. Fill in the placeholders as needed — e.g., form fields, service names, messages, etc.

🧠 Snippet Previews

initForm (Reactive Form Initialization)

initForm() {
  this.formName = this.formBuilder.group({
    controlName: ['', Validators.required]
  });
}

iq-dialog

<div>
  <div fxLayout="row" fxLayoutAlign="space-between center" mat-dialog-title>
    <div>
      <h2 style="margin:0"></h2>
    </div>
    <div>
      <mat-icon
        class="icon"
        style="float: right;cursor: pointer;"
        mat-dialog-close
      >
        close
      </mat-icon>
    </div>
  </div>
  <div mat-dialog-content></div>
  <div mat-dialog-actions>
    <button mat-button mat-dialog-close></button>
    <button mat-raised-button color="primary"></button>
  </div>
</div>