part-4

src/app/app.component.html

@@ -1,14 +1,44 @@
 <div class="pure-g">
   <div id="app-header" class="pure-u-24-24">
-    <app-header></app-header>
+    <app-header>
+      <ng-container header-title>
+        <h1>Tutorial Angular </h1>
+      </ng-container>
+      <div header-subtitle>
+        <h3>By Asmen</h3>
+      </div>
+    </app-header>
   </div>
   <div id="app-side-bar" class="pure-u-1-5">
-    <app-side-bar></app-side-bar>
+    <app-side-bar>
+      <ul class="pure-menu-list">
+        <li class="pure-menu-item"><a class="pure-menu-link" href="">Dashboard</a></li>
+        <li class="pure-menu-item"><a class="pure-menu-link" href="">User</a></li>
+        <li class="pure-menu-item"><a class="pure-menu-link" href="">Setting</a></li>
+        <li class="pure-menu-item"><a class="pure-menu-link" href="">Report</a></li>
+      </ul>
+    </app-side-bar>
   </div>
   <div id="app-main" class="pure-u-4-5">
-    <app-main></app-main>
+    <app-main>
+      <div id="app-base-container">
+        <p>Part 4</p>
+        <ul>
+          <li>
+            Buat component module seusai dengan menu disamping <br />
+            <code>ng generate component "module/module-dashboard"</code><br />
+            <code>ng generate component "module/module-user"</code><br />
+            <code>ng generate component "module/module-setting"</code><br />
+            <code>ng generate component "module/module-report"</code><br />
+          </li>
+          <li>
+            Setup angular router untuk membuat link yang dapat menampilkan tiap compopnent sesuai menu yang dipilih
+          </li>
+        </ul>
+      </div>
+    </app-main>
   </div>
 </div>
 <div id="app-footer">
-  <app-footer></app-footer>
+  <app-footer><span>Tutorial angular by Asmen &copy; 2019</span></app-footer>
 </div>

src/app/layout/footer/footer.component.html

@@ -1 +1 @@
-<span>Tutorial angular by Asmen &copy; 2019</span>
+<ng-content></ng-content>

src/app/layout/header/header.component.html

@@ -1 +1,2 @@
-<h1>Tutorial Angular <span>By Asmen</span></h1>
+<ng-content select="[header-title]"></ng-content>
+<ng-content select="[header-subtitle]"></ng-content>

src/app/layout/main/main.component.html

@@ -1,8 +1 @@
-<div id="app-base-container">
-    <p>Part 3</p>
-    <ul>
-        <li>
-            Keluarkan semua konten yg ada di layout ke app component dengan <code>ng-content</code>
-        </li>
-    </ul>
-</div>
+<ng-content></ng-content>

src/app/layout/main/main.component.scss

@@ -1,3 +0,0 @@
-#app-base-container{
-    padding: 30px;
-}

src/app/layout/side-bar/side-bar.component.html

@@ -1 +1 @@
-<p>side-bar works!</p>
+<ng-content></ng-content>

src/styles.scss

@@ -19,8 +19,19 @@
 
 #app-header h1{
     font-size: 120%;
+    margin: 5px;
+}
+
+#app-header h3{
+    font-size: 70%;
+    margin: 5px;
+    color: #333;
+}
+
+#app-base-container{
+    padding: 30px;
 }
 
 #app-side-bar{
-    background-color: #ccc;
+    background-color: #333;
 }