Introduction

Special directives to show or hide items according to the size of the device screen in Angular 2

responsive-directives-angular2 provides the following features:

• Directives detecting states according to standard measures in bootstrap: lg / md / sm / xs
• Directives that detect three states according to the type of device screens.
• NEW: Multiple combinations of states bootstrap.
• NEW: Custom sizes detector.
• NEW: Show and hide options
• Written for the latest release of Angular 2 in typescript.

How to start

1. installing the package via npm

npm i responsive-directives-angular2 --save

2. import the responsive-directives-angular2 in your Angular 2 component

   • With Bootstrap Screen sizes Directives

import { LG,MD,SM,XS } from 'responsive-directives-angular2';

* With multiple combinations screen sizes bootstrap and show / hide options

import { ShowItBootstrap,HideItBootstrap } from 'responsive-directives-angular2';

• With Devices Screen sizes Directives

import { IsDesktop,IsMobile,IsTablet } from 'responsive-directives-angular2';

* With custom sizes and show / hide options

import { ShowItSizes,HideItSizes } from 'responsive-directives-angular2';

3. Assign directives for use in a component

   • With Bootstrap Screen sizes

@Component({
 selector: 'my-component',
 template: '
   <p *lg>I'll show you if I'm a lg screen size.</p>
   <p *md>I'll show you if I'm a md screen size.</p>
   <p *sm>I'll show you if I'm a sm screen size.</p>
   <p *xs>I'll show you if I'm a xs screen size.</p>
 ',
 directives: [LG,MD,SM,XS]
})

* With multiple combinations screen sizes bootstrap and show / hide options

@Component({
 selector: 'my-component',
 template: '
   <p *showItBootstrap="['md','xs']">I'll show you only in md and xs screen sizes.</p>
   <p *hideItBootstrap="['lg','sm']">I'll hide you only in lg and sm screen sizes.</p>
 ',
 directives: [ShowItBootstrap,HideItBootstrap]
})

• With Devices Screen sizes

@Component({
 selector: 'my-component',
 template: '
   <p *isDesktop>I'll show you if I'm a desktop device.</p>
   <p *isTablet>I'll show you if I'm a tablet device.</p>
   <p *isMobile>I'll show you if I'm a mobile device.</p>
 ',
 directives: [IsDesktop,IsMobile,IsTablet ]
})

• With custom sizes and show / hide options

@Component({
 selector: 'my-component',
 template: '
   <p *showItSizes="{min:955,max:1057}">I'll show you if I have a width between the min and max.</p>
   <p *hideItSizes="{min:360,max:768}">It is hidden if I have a width between the min and max.</p>
 ',
 directives: [ ShowItSizes,HideItSizes ]
})

NEXT

Will work in the following features:

• Detection device: browser type, operating system..etc
• Detect portrait and landscape device status

License