{"id":26353282,"url":"https://github.com/bodnya29179/ngx-responsive-if","last_synced_at":"2026-02-26T07:12:58.618Z","repository":{"id":282556581,"uuid":"948948503","full_name":"bodnya29179/ngx-responsive-if","owner":"bodnya29179","description":"📱 ngx-responsive-if – Conditional rendering based on media queries.","archived":false,"fork":false,"pushed_at":"2025-03-15T12:26:01.000Z","size":217,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T12:27:59.135Z","etag":null,"topics":["angular","conditional-rendering","directive","media-queries","ngx-responsive-if","responsive","typescript","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bodnya29179.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2025-03-15T10:27:36.000Z","updated_at":"2025-03-15T12:08:47.000Z","dependencies_parsed_at":"2025-03-15T12:38:36.067Z","dependency_job_id":null,"html_url":"https://github.com/bodnya29179/ngx-responsive-if","commit_stats":null,"previous_names":["bodnya29179/ngx-responsive-if"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2Fngx-responsive-if","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2Fngx-responsive-if/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2Fngx-responsive-if/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bodnya29179%2Fngx-responsive-if/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bodnya29179","download_url":"https://codeload.github.com/bodnya29179/ngx-responsive-if/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243858058,"owners_count":20359269,"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","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","conditional-rendering","directive","media-queries","ngx-responsive-if","responsive","typescript","ui"],"created_at":"2025-03-16T11:17:41.859Z","updated_at":"2026-02-26T07:12:53.584Z","avatar_url":"https://github.com/bodnya29179.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Directives"],"readme":"# ngx-responsive-if\n\n![npm](https://img.shields.io/npm/v/ngx-responsive-if)\n![license](https://img.shields.io/npm/l/ngx-responsive-if)\n![downloads](https://img.shields.io/npm/dt/ngx-responsive-if)\n\nAn Angular structural directive for conditional rendering based on media queries.\n\n## 💡 Example Use Cases\n\n- Show different layouts for mobile and desktop.\n- Hide elements on smaller screens.\n- Change UI dynamically based on screen size.\n\n## 🚀 Features\n\n- 📱 Show or hide elements based on media queries\n- 🔥 Works with `min-width`, `max-width`, `aspect-ratio`, and more\n- ⚡ Fully reactive – updates on window resize\n\n## 📦 Installation\n\n```sh\nnpm install ngx-responsive-if\n```\n\n## 📌 Version Compatibility\n\nTo ensure compatibility with different Angular versions, install the correct package version:\n\n| Angular Version          | Plugin Version | Supports Standalone Components | Installation Command              |\n|--------------------------|----------------|--------------------------------|-----------------------------------|\n| `\u003e=16.0.0`               | `v3`           | Yes                            | `npm install ngx-responsive-if@3` |\n| `\u003e=14.0.0` and `\u003c16.0.0` | `v2`           | Yes                            | `npm install ngx-responsive-if@2` |\n| `\u003e=8.0.0` and `\u003c14.0.0`  | `v1`           | No                             | `npm install ngx-responsive-if@1` |\n\n## 🛠️ Usage\n\nYou can use the directive in two ways: **Module-based** or **Standalone**.\n\n### 1️⃣ Module-Based Approach\n\nImport and declare the `NgxResponsiveIfModule` inside an Angular module:\n\n```ts\nimport { NgxResponsiveIfModule } from 'ngx-responsive-if';\n\n@NgModule({\n  imports: [NgxResponsiveIfModule],\n})\nexport class AppModule {}\n```\n\nThen use it in your template:\n\n```html\n\u003cdiv *ngxResponsiveIf=\"'min-width: 600px'\"\u003e\n  This content is visible on screens wider than 600px.\n\u003c/div\u003e\n\n\u003cdiv *ngxResponsiveIf=\"'max-width: 599px'; else mobileTemplate\"\u003e\n  This is shown on smaller screens.\n\u003c/div\u003e\n\n\u003cng-template #mobileTemplate\u003e\n  \u003cp\u003eVisible only on smaller screens.\u003c/p\u003e\n\u003c/ng-template\u003e\n```\n\n### 2️⃣ Standalone Approach\n\nYou can use `NgxResponsiveIfDirective` without a module by importing it directly in a component:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgxResponsiveIfDirective } from 'ngx-responsive-if';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [NgxResponsiveIfDirective],\n  template: `\n    \u003cdiv *ngxResponsiveIf=\"'min-width: 600px'\"\u003e\n      This content is visible on screens wider than 600px.\n    \u003c/div\u003e\n  `,\n})\nexport class ExampleComponent {}\n```\n\nThis approach is useful when working with standalone components in Angular 14+.\n\nChoose the method that best fits your project structure! 🚀\n\n## 🔧 strictMode\n\nThe `strictMode` property defines how media queries are validated.\n\n- **`true` (default)**: Allows only predefined media query formats.\n\n  **Supported queries in strict mode**:\n  - `min-width: Xpx`\n  - `max-width: Xpx`\n  - `min-height: Xpx`\n  - `max-height: Xpx`\n  - `aspect-ratio: X/Y`\n  - `orientation: portrait`\n  - `orientation: landscape`\n\n  **Allowed CSS units**:\n  - `px`\n  - `rem`\n  - `em`\n  - `vw`\n  - `dvw`\n  - `vh`\n  - `dvh`\n\n- **`false`**: Accepts any valid media query string without validation.\n\n  **Usage format**:\n\n  Convert a CSS media query into the directive's syntax as follows:\n  \n  `@media \u003cyour condition\u003e {}` -\u003e `*ngxResponsiveIf=\"'\u003cyour condition\u003e'\"`\n\n  **Examples**:\n\n  1. Convert:\n     ```css\n     @media screen and (min-width: 40rem) {\n       /* Some styles here */\n     }\n     ```\n     to:\n     ```html\n     \u003csome-html-element *ngxResponsiveIf=\"'screen and (min-width: 40rem)'\"\u003e\u003c/some-html-element\u003e\n     ```\n\n  2. Convert:\n     ```css\n     @media (max-width: 50rem) {\n       /* Some styles here */\n     }\n     ```\n     to:\n     ```html\n     \u003c!-- IMPORTANT: Ensure the condition includes parentheses if required --\u003e\n     \u003c!-- In enabled strict mode, we do not need parentheses --\u003e\n     \u003csome-html-element *ngxResponsiveIf=\"'(max-width: 50rem)'\"\u003e\u003c/some-html-element\u003e\n     ```\n\n### Examples:\n\n```html\n\u003cdiv *ngxResponsiveIf=\"'screen and (min-width: 40em)'; strictMode: false\"\u003e\n  This content is visible when the width is at least 40em (without strict validation).\n\u003c/div\u003e\n\n\u003cdiv *ngxResponsiveIf=\"'screen and (min-width: 30em) and (max-width: 50em)'; strictMode: false\"\u003e\n  This content is displayed when the width is between 30em and 50em.\n\u003c/div\u003e\n\n\u003cdiv *ngxResponsiveIf=\"'(max-width: 37.4rem)'; strictMode: false; else mobileTemplate\"\u003e\n  This content is displayed on smaller screens.\n\u003c/div\u003e\n\n\u003cdiv *ngxResponsiveIf=\"'(max-width: 20vw)'; else mobileTemplate; strictMode: false\"\u003e\n  This content appears when the width is at most 20vw.\n\u003c/div\u003e\n\n\u003cng-template #mobileTemplate\u003e\n  \u003cp\u003eVisible only on smaller screens.\u003c/p\u003e\n\u003c/ng-template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbodnya29179%2Fngx-responsive-if","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbodnya29179%2Fngx-responsive-if","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbodnya29179%2Fngx-responsive-if/lists"}