diff --git a/src/popper-content.css b/src/popper-content.css
new file mode 100644
index 0000000..34e2328
--- /dev/null
+++ b/src/popper-content.css
@@ -0,0 +1,149 @@
+.ngxp__container {
+  display: none;
+  position: absolute;
+  border-radius: 3px;
+  border: 1px solid grey;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  padding: 10px;
+}
+
+.ngxp__container.ngxp__animation {
+  -webkit-animation: ngxp-fadeIn 150ms ease-out;
+  -moz-animation: ngxp-fadeIn 150ms ease-out;
+  -o-animation: ngxp-fadeIn 150ms ease-out;
+  animation: ngxp-fadeIn 150ms ease-out;
+}
+
+.ngxp__container > .ngxp__arrow {
+  border-color: grey;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+  margin: 5px;
+}
+
+.ngxp__container[x-placement^="top"],
+.ngxp__container[x-placement^="bottom"],
+.ngxp__container[x-placement^="right"],
+.ngxp__container[x-placement^="left"] {
+  display: block;
+}
+
+.ngxp__container[x-placement^="top"] {
+  margin-bottom: 5px;
+}
+
+.ngxp__container[x-placement^="top"] > .ngxp__arrow {
+  border-width: 5px 5px 0 5px;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  bottom: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ngxp__container[x-placement^="top"] > .ngxp__arrow.__force-arrow {
+  border-right-color: transparent !important;
+  border-bottom-color: transparent !important;
+  border-left-color: transparent !important;
+}
+
+.ngxp__container[x-placement^="bottom"] {
+  margin-top: 5px;
+}
+
+.ngxp__container[x-placement^="bottom"] > .ngxp__arrow {
+  border-width: 0 5px 5px 5px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-left-color: transparent;
+  top: -5px;
+  left: calc(50% - 5px);
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.ngxp__container[x-placement^="bottom"] > .ngxp__arrow.__force-arrow {
+  border-top-color: transparent !important;
+  border-right-color: transparent !important;
+  border-left-color: transparent !important;
+}
+
+.ngxp__container[x-placement^="right"] {
+  margin-left: 5px;
+}
+
+.ngxp__container[x-placement^="right"] > .ngxp__arrow {
+  border-width: 5px 5px 5px 0;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  left: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.ngxp__container[x-placement^="right"] > .ngxp__arrow.__force-arrow {
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  border-left-color: transparent !important;
+}
+
+.ngxp__container[x-placement^="left"] {
+  margin-right: 5px;
+}
+
+.ngxp__container[x-placement^="left"] > .ngxp__arrow {
+  border-width: 5px 0 5px 5px;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+  right: -5px;
+  top: calc(50% - 5px);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.ngxp__container[x-placement^="left"] > .ngxp__arrow.__force-arrow {
+  border-top-color: transparent !important;
+  border-bottom-color: transparent !important;
+  border-right-color: transparent !important;
+}
+
+@-webkit-keyframes ngxp-fadeIn {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
+
+@keyframes ngxp-fadeIn {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+
+  1% {
+    display: block;
+    opacity: 0;
+  }
+
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}
diff --git a/src/popper-content.ts b/src/popper-content.ts
index 07d1e9a..fe8af77 100644
--- a/src/popper-content.ts
+++ b/src/popper-content.ts
@@ -39,158 +39,7 @@ import {Placements, PopperContentOptions, Triggers} from './popper-model'
 
     </div>
   `,
-  styles: [`
-    .ngxp__container {
-      display: none;
-      position: absolute;
-      border-radius: 3px;
-      border: 1px solid grey;
-      box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-      padding: 10px;
-    }
-
-    .ngxp__container.ngxp__animation {
-      -webkit-animation: ngxp-fadeIn 150ms ease-out;
-      -moz-animation: ngxp-fadeIn 150ms ease-out;
-      -o-animation: ngxp-fadeIn 150ms ease-out;
-      animation: ngxp-fadeIn 150ms ease-out;
-
-    }
-
-    .ngxp__container > .ngxp__arrow {
-      border-color: grey;
-      width: 0;
-      height: 0;
-      border-style: solid;
-      position: absolute;
-      margin: 5px;
-    }
-
-    .ngxp__container[x-placement^="top"],
-    .ngxp__container[x-placement^="bottom"],
-    .ngxp__container[x-placement^="right"],
-    .ngxp__container[x-placement^="left"] {
-      display: block;
-    }
-
-    .ngxp__container[x-placement^="top"] {
-      margin-bottom: 5px;
-    }
-
-    .ngxp__container[x-placement^="top"] > .ngxp__arrow {
-      border-width: 5px 5px 0 5px;
-      border-right-color: transparent;
-      border-bottom-color: transparent;
-      border-left-color: transparent;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .ngxp__container[x-placement^="top"] > .ngxp__arrow.__force-arrow {
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      border-left-color: transparent !important;
-    }
-
-    .ngxp__container[x-placement^="bottom"] {
-      margin-top: 5px;
-    }
-
-    .ngxp__container[x-placement^="bottom"] > .ngxp__arrow {
-      border-width: 0 5px 5px 5px;
-      border-top-color: transparent;
-      border-right-color: transparent;
-      border-left-color: transparent;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-
-    .ngxp__container[x-placement^="bottom"] > .ngxp__arrow.__force-arrow {
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-left-color: transparent !important;
-    }
-
-    .ngxp__container[x-placement^="right"] {
-      margin-left: 5px;
-    }
-
-    .ngxp__container[x-placement^="right"] > .ngxp__arrow {
-      border-width: 5px 5px 5px 0;
-      border-top-color: transparent;
-      border-bottom-color: transparent;
-      border-left-color: transparent;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .ngxp__container[x-placement^="right"] > .ngxp__arrow.__force-arrow {
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      border-left-color: transparent !important;
-    }
-
-    .ngxp__container[x-placement^="left"] {
-      margin-right: 5px;
-    }
-
-    .ngxp__container[x-placement^="left"] > .ngxp__arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent;
-      border-bottom-color: transparent;
-      border-right-color: transparent;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .ngxp__container[x-placement^="left"] > .ngxp__arrow.__force-arrow {
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      border-right-color: transparent !important;
-    }
-
-    @-webkit-keyframes ngxp-fadeIn {
-      0% {
-        display: none;
-        opacity: 0;
-      }
-
-      1% {
-        display: block;
-        opacity: 0;
-      }
-
-      100% {
-        display: block;
-        opacity: 1;
-      }
-    }
-
-    @keyframes ngxp-fadeIn {
-      0% {
-        display: none;
-        opacity: 0;
-      }
-
-      1% {
-        display: block;
-        opacity: 0;
-      }
-
-      100% {
-        display: block;
-        opacity: 1;
-      }
-    }
-  `]
+  styleUrls: ['./popper-content.css'],
 })
 export class PopperContent implements OnDestroy {