I'll show you if I'm a iPhone or ipad device.
\nI'll show you if I'm a iPhone device.
\nI'll show you if I'm a chrome browser.
\nI'll show you if I'm a xl screen size.
\nI'll show you if I'm a lg screen size.
\nI'll show you if I'm a md screen size.
\nI'll show you if I'm a sm screen size.
\nI'll show you if I'm a xs screen size.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n4. ALL RESPONSIVE DIRECTIVES OPTIONS \n\n * Responsive Window directive: Capture the size of the parent element to show or hide fill elements. If the parent responsive size is x show or hide.\n \n ```\nI'll show you if all the options are true.
\n\n I'll show you if all the options are true & listen events changes.\n \n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n 2. One function detect\n * With Bootstrap Screen sizes\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a xl screen size.
\nI'll show you if I'm a lg screen size.
\nI'll show you if I'm a md screen size.
\nI'll show you if I'm a sm screen size.
\nI'll show you if I'm a xs screen size.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With multiple combinations of bootstrap screen sizes and show / hide options\n - Strings Multiple combinations = \"['xs','sm','md','lg','xl']\"\n\n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you only in md and xs screen sizes.
\nI'll hide you only in lg and sm screen sizes.
',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With Devices Screen sizes\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a smartTv device.
\nI'll show you if I'm a desktop device.
\nI'll show you if I'm a tablet device.
\nI'll show you if I'm a mobile device.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With multiple devices detect combinations: show / hide options.\n - Strings Multiple combinations = \"['mobile','tablet','smarttv','desktop']\"\n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a tablet or a mobile device.
\nI'll hide you if I'm a desktop / tablet or mobile device.
',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With Standard Devices detect\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a iPhone device.
\nI'll show you if I'm a iPad device.
\nI'll show you if I'm a android mobile device.
\nI'll show you if I'm a android tablet device.
\nI'll show you if I'm a windows phone mobile device.
',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With multiple devices detect combinations: show / hide options.\n - Strings Multiple combinations = \"['iphone','ipad','android mobile','android tablet','windows phone']\"\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a android mobile or a windows phone device.
\nI'll hide you if I'm a iPad or a iPhone device.
',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With orientation device\n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a portrait state.
\nI'll show you if I'm a landscape state.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With custom sizes and show / hide options\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I have a width between the min and max.
\nIt is hidden if I have a width between the min and max.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With browser detection.\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a Chrome Browser.
\nI'll show you if I'm a Firefox Browser.
\nI'll show you if I'm a Safari Browser.
\nI'll show you if I'm a Opera Browser.
\nI'll show you if I'm a Internet Explorer Browser.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n * With multiple browsers detect combinations: show / hide options.\n - Strings Multiple combinations = \"['chrome','firefox','ie','safari', 'opera']\"\n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a IE or Opera Browser.
\nI'll hide you if I'm a Chrome, Firefox or Safari Browser.
',\n directives: [CORE_DIRECTIVES]\n })\n ```\n * With Internet Explorer Version detection.\n \n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a Internet Explorer 9.
\nI'll show you if I'm a Internet Explorer 10.
\nI'll show you if I'm a Internet Explorer 11.
\nI'll show you if I'm a Internet Explorer 12.
',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n * With multiple Internet Explorer version detect: show / hide options.\n - Strings Multiple combinations = \"['ie 9','ie 10','ie 11','ie +12']\"\n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a IE 11 browser or IE 12
\nI'll hide you if I'm IE 9 browser or IE 10.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n * With pixel ratio detect:\n ```\n @Component({\n selector: 'my-component',\n template: '\nI'll show you if I'm a 1x screen.
\nI'll show you if I'm a retina screen.
\nI'll show you if I'm a 4k screen.
\n ',\n directives: [CORE_DIRECTIVES]\n })\n ```\n \n \n# NEXT STEPS \n- Refactor to more simple code and easy to maintain. Less specific directives.\n- Work in demo page\n- Directive css classes:\n```\n\n\n```\n- Webp images browser compatibility: \n```\n