{"id":30570187,"url":"https://github.com/jadehendricks/ng-structure-and-queries","last_synced_at":"2026-05-16T08:07:08.889Z","repository":{"id":309737825,"uuid":"1037209163","full_name":"JadeHendricks/ng-structure-and-queries","owner":"JadeHendricks","description":"Explores Angular’s structural directives, template rendering techniques, and view queries. Each concept is demonstrated on its own dedicated page with clear, minimal examples for easy learning. ","archived":false,"fork":false,"pushed_at":"2025-08-16T11:56:40.000Z","size":170,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-16T13:38:30.398Z","etag":null,"topics":["angular","directives","viewchild"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JadeHendricks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-13T08:21:58.000Z","updated_at":"2025-08-16T11:56:43.000Z","dependencies_parsed_at":"2025-08-16T13:38:34.172Z","dependency_job_id":null,"html_url":"https://github.com/JadeHendricks/ng-structure-and-queries","commit_stats":null,"previous_names":["jadehendricks/query-playground","jadehendricks/ng-structure-and-queries"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/JadeHendricks/ng-structure-and-queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JadeHendricks%2Fng-structure-and-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JadeHendricks%2Fng-structure-and-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JadeHendricks%2Fng-structure-and-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JadeHendricks%2Fng-structure-and-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JadeHendricks","download_url":"https://codeload.github.com/JadeHendricks/ng-structure-and-queries/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JadeHendricks%2Fng-structure-and-queries/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272547543,"owners_count":24953441,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","directives","viewchild"],"created_at":"2025-08-28T20:02:51.086Z","updated_at":"2026-05-16T08:07:08.863Z","avatar_url":"https://github.com/JadeHendricks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Structure \u0026 Queries Playground\n\nThis project explores **Angular’s structural directives, template rendering techniques, view queries**, and the **new signal-based APIs**.  \nEach concept is demonstrated on its own dedicated page with clear, minimal examples for easy learning.\n\n## 📚 Topics Covered\n\n### 1) Structural \u0026 Template Features\n- `ng-content` – Content projection into components.\n- `ng-container` – Logical grouping without extra DOM.\n- `ng-template` – Reusable template blocks.\n- `ngTemplateOutlet` – Rendering templates dynamically.\n\n### 2) Classic View Queries\n- `ViewChild` – Query a single element/directive from the template.\n- `ViewChildren` – Query multiple elements/directives from the template.\n\n### 3) **Signal-Based Queries** (function APIs)\n\u003e These return **signals** and stay up-to-date without lifecycle hooks.\n- `viewChild()` – Signal of a single view child.\n- `viewChildren()` – Signal of multiple view children.\n- `contentChild()` – Signal of a single projected (content) child.\n- `contentChildren()` – Signal of multiple projected (content) children.\n---\n\n## 📂 Project Structure\n\nEach topic has its **own route/page** with:\n- A concise explanation of what it does.\n- A simple code example.\n- A live demonstration in the browser.\n\nSuggested route map:\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadehendricks%2Fng-structure-and-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjadehendricks%2Fng-structure-and-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjadehendricks%2Fng-structure-and-queries/lists"}