ng2-responsive-tool
v0.1.4
Published
This package simplifies the creation of responsive Angular components in mobile first approach. Ng2ResponsiveTool exposes a set of observables that emit values depending on different screen sizes and on the browser's user agent.
Downloads
10
Maintainers
Readme
Ng2ResponsiveTool
This package simplifies the creation of responsive Angular components in mobile first approach. Ng2ResponsiveTool exposes a set of observables that emit values depending on different screen sizes and on the browser's user agent.
Install
npm i ng2-responsive-tool --save
Usage
in app.module.ts
import { NgModule } from "@angular/core";
import { Ng2ResponsiveModule } from "ng2-responsive-tool";
import { AppComponent } from "./app.component";
@NgModule({
declarations: [AppComponent],
imports: [
Ng2ResponsiveModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
in app.component.ts
import { Component } from "@angular/core";
<mark>import { ResponsiveToolService } from "ng2-responsive-tool";</mark>
@Component({
selector: "app-root",
template: `
<code>size$: {{ responsiveService.size$ | async }}</code>
<code>isExtraSmall$: {{ responsiveService.isExtraSmall$ | async }}</code>
<code>isSmall$: {{ responsiveService.isSmall$ | async }}</code>
<code>isMedium$: {{ responsiveService.isMedium$ | async }}</code>
<code>isLarge$: {{ responsiveService.isLarge$ | async }}</code>
<code>isExtraLarge$: {{ responsiveService.isExtraLarge$ | async }}</code>
<!-- *ngIf -->
<div *ngIf="responsiveService.isExtraSmall$ | async">visible only if screen is greater than 600px</div>
<!-- style -->
<div[class]="(responsiveService.isLarge$ | async) ? 'bg-red' : 'bg-green'"></div>
`,
styleUrls: ["./app.component.css"],
})
export class AppComponent {
destroy$ = new Subject();
constructor(public responsiveService: ResponsiveToolService) {
responsiveService.size$.pipe(takeUntil(this.destroy$)).subscribe((size) => console.log(size));
}
}
define custom breakpoint
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2ResponsiveModule } from 'ng2-responsive-tool';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
Ng2ResponsiveModule.forRoot({
extraSmall: 150,
small: 300,
medium: 450,
large: 650,
extraLarge: 800
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
API
ResponsiveToolService
| Syntax | Type | Description | | ------------- | --------------------- |-------------| | size$ | Observable< number > | hot observable that emits the size of the screen every time that it changes | | isExtraSmall$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isSmall$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isMedium$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isLarge$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isExtraLarge$ | Observable< boolean > | hot observable that emits true if the screen is bigger than the breakpoint, otherwise emits false | | isMobile$ | Observable< boolean > | hot observable that emits true if the browser's User-Agent is mobile | | isDesktop$ | Observable< boolean > | hot observable that emits true if the browser's User-Agent is desktop |