https://github.com/bodnya29179/ngx-responsive-if
📱 ngx-responsive-if – Conditional rendering based on media queries.
https://github.com/bodnya29179/ngx-responsive-if
angular conditional-rendering directive media-queries ngx-responsive-if responsive typescript ui
Last synced: about 1 month ago
JSON representation
📱 ngx-responsive-if – Conditional rendering based on media queries.
- Host: GitHub
- URL: https://github.com/bodnya29179/ngx-responsive-if
- Owner: bodnya29179
- License: mit
- Created: 2025-03-15T10:27:36.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2025-03-15T12:26:01.000Z (about 2 months ago)
- Last Synced: 2025-03-15T12:27:59.135Z (about 2 months ago)
- Topics: angular, conditional-rendering, directive, media-queries, ngx-responsive-if, responsive, typescript, ui
- Language: TypeScript
- Homepage:
- Size: 212 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - ngx-responsive-if - An Angular structural directive for conditional rendering based on media queries. (Table of contents / Third Party Components)
- awesome-angular - ngx-responsive-if - An Angular structural directive for conditional rendering based on media queries. (Table of contents / Third Party Components)
README
# ngx-responsive-if
An Angular structural directive for conditional rendering based on media queries.
## 💡 Example Use Cases
- Show different layouts for mobile and desktop.
- Hide elements on smaller screens.
- Change UI dynamically based on screen size.
## 🚀 Features
- 📱 Show or hide elements based on media queries
- 🔥 Works with `min-width`, `max-width`, `aspect-ratio`, and more
- ⚡ Fully reactive – updates on window resize
## 📦 Installation
```sh
npm install ngx-responsive-if
```
## 📌 Version Compatibility
To ensure compatibility with different Angular versions, install the correct package version:
| Angular Version | Plugin Version | Supports Standalone Components | Installation Command |
|--------------------------|----------------|--------------------------------|-----------------------------------|
| `>=16.0.0` | `v3` | Yes | `npm install ngx-responsive-if@3` |
| `>=14.0.0` and `<16.0.0` | `v2` | Yes | `npm install ngx-responsive-if@2` |
| `>=8.0.0` and `<14.0.0` | `v1` | No | `npm install ngx-responsive-if@1` |
## 🛠️ Usage
You can use the directive in two ways: **Module-based** or **Standalone**.
### 1️⃣ Module-Based Approach
Import and declare the `NgxResponsiveIfModule` inside an Angular module:
```ts
import { NgxResponsiveIfModule } from 'ngx-responsive-if';
@NgModule({
imports: [NgxResponsiveIfModule],
})
export class AppModule {}
```
Then use it in your template:
```html
This content is visible on screens wider than 600px.
This is shown on smaller screens.
Visible only on smaller screens.
```
### 2️⃣ Standalone Approach
You can use `NgxResponsiveIfDirective` without a module by importing it directly in a component:
```ts
import { Component } from '@angular/core';
import { NgxResponsiveIfDirective } from 'ngx-responsive-if';
@Component({
selector: 'app-example',
standalone: true,
imports: [NgxResponsiveIfDirective],
template: `
This content is visible on screens wider than 600px.
`,
})
export class ExampleComponent {}
```
This approach is useful when working with standalone components in Angular 14+.
Choose the method that best fits your project structure! 🚀
## 🔧 strictMode
The `strictMode` property defines how media queries are validated.
- **`true` (default)**: Allows only predefined media query formats.
**Supported queries in strict mode**:
- `min-width: Xpx`
- `max-width: Xpx`
- `min-height: Xpx`
- `max-height: Xpx`
- `aspect-ratio: X/Y`
- `orientation: portrait`
- `orientation: landscape`
**Allowed CSS units**:
- `px`
- `rem`
- `em`
- `vw`
- `dvw`
- `vh`
- `dvh`
- **`false`**: Accepts any valid media query string without validation.
**Usage format**:
Convert a CSS media query into the directive's syntax as follows:
`@media {}` -> `*ngxResponsiveIf="''"`
**Examples**:
1. Convert:
```css
@media screen and (min-width: 40rem) {
/* Some styles here */
}
```
to:
```html
```
2. Convert:
```css
@media (max-width: 50rem) {
/* Some styles here */
}
```
to:
```html
```
### Examples:
```html
This content is visible when the width is at least 40em (without strict validation).
This content is displayed when the width is between 30em and 50em.
This content is displayed on smaller screens.
This content appears when the width is at most 20vw.
Visible only on smaller screens.
```