show-when.js 2.0KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import { Attribute, Directive, NgZone } from '@angular/core';
  2. import { DisplayWhen } from './display-when';
  3. import { Platform } from '../../platform/platform';
  4. /**
  5. *
  6. * @name ShowWhen
  7. * @description
  8. * The `showWhen` attribute takes a string that represents a platform or screen orientation.
  9. * The element the attribute is added to will only be shown when that platform or screen orientation is active.
  10. *
  11. * Complements the [hideWhen attribute](../HideWhen). If the `showWhen` attribute is used on an
  12. * element that also has the `hideWhen` attribute, the element will not show if `hideWhen` evaluates
  13. * to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
  14. * will not show if `hidden` evaluates to `true`.
  15. *
  16. * View the [Platform API docs](../../../platform/Platform) for more information on the different
  17. * platforms you can use.
  18. *
  19. * @usage
  20. * ```html
  21. * <div showWhen="android">
  22. * I am visible on Android!
  23. * </div>
  24. *
  25. * <div showWhen="ios">
  26. * I am visible on iOS!
  27. * </div>
  28. *
  29. * <div showWhen="android,ios">
  30. * I am visible on Android and iOS!
  31. * </div>
  32. *
  33. * <div showWhen="portrait">
  34. * I am visible on Portrait!
  35. * </div>
  36. *
  37. * <div showWhen="landscape">
  38. * I am visible on Landscape!
  39. * </div>
  40. * ```
  41. * @demo /docs/demos/src/show-when/
  42. * @see {@link ../HideWhen HideWhen API Docs}
  43. * @see {@link ../../../platform/Platform Platform API Docs}
  44. */
  45. export class ShowWhen extends DisplayWhen {
  46. constructor(showWhen, plt, zone) {
  47. super(showWhen, plt, zone);
  48. }
  49. }
  50. // ngOnDestroy is implemented in DisplayWhen
  51. ShowWhen.decorators = [
  52. { type: Directive, args: [{
  53. selector: '[showWhen]',
  54. host: {
  55. '[class.hidden-show-when]': '!isMatch'
  56. }
  57. },] },
  58. ];
  59. /** @nocollapse */
  60. ShowWhen.ctorParameters = () => [
  61. { type: undefined, decorators: [{ type: Attribute, args: ['showWhen',] },] },
  62. { type: Platform, },
  63. { type: NgZone, },
  64. ];
  65. //# sourceMappingURL=show-when.js.map