From 7aa64df9f62cd6273ec90928e5181f2d3bb223bb Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Wed, 18 Jul 2018 18:56:01 +0200
Subject: [PATCH] docs(datepicker): custom datepicker header demo styling not
 working (#12253)

---
 .../datepicker-custom-header-example.css      | 17 +----------------
 .../datepicker-custom-header-example.ts       | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.css b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.css
index 6d47c5977d6..7432308753e 100644
--- a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.css
+++ b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.css
@@ -1,16 +1 @@
-.example-header {
-  display: flex;
-  align-items: center;
-  padding: 0.5em;
-}
-
-.example-header-label {
-  flex: 1;
-  height: 1em;
-  font-weight: bold;
-  text-align: center;
-}
-
-.example-double-arrow .mat-icon {
-  margin: -22%;
-}
+/** No CSS for this example */
diff --git a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
index ec549763723..3bdb396bc16 100644
--- a/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
+++ b/src/material-examples/datepicker-custom-header/datepicker-custom-header-example.ts
@@ -15,7 +15,6 @@ import {takeUntil} from 'rxjs/operators';
 @Component({
   selector: 'datepicker-custom-header-example',
   templateUrl: 'datepicker-custom-header-example.html',
-  styleUrls: ['datepicker-custom-header-example.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerCustomHeaderExample {
@@ -25,6 +24,24 @@ export class DatepickerCustomHeaderExample {
 /** Custom header component for datepicker. */
 @Component({
   selector: 'example-header',
+  styles: [`
+    .example-header {
+      display: flex;
+      align-items: center;
+      padding: 0.5em;
+    }
+
+    .example-header-label {
+      flex: 1;
+      height: 1em;
+      font-weight: 500;
+      text-align: center;
+    }
+
+    .example-double-arrow .mat-icon {
+      margin: -22%;
+    }
+  `],
   template: `
     <div class="example-header">
       <button mat-icon-button class="example-double-arrow" (click)="previousClicked('year')">