CT #1 ToolBar Begining

angular.json

@@ -25,6 +25,9 @@
             "styles": [
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
+              "./node_modules/primeicons/primeicons.css",
+              "./node_modules/primeng/resources/themes/nova-light/theme.css",
+              "./node_modules/primeng/resources/primeng.min.css",
               "src/styles.css"
             ],
             "scripts": []

package.json

@@ -11,7 +11,8 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
+    "@angular-devkit/build-ng-packagr": "^0.13.8",
+    "@angular/animations": "^7.1.4",
     "@angular/common": "~7.1.0",
     "@angular/compiler": "~7.1.0",
     "@angular/core": "~7.1.0",
@@ -24,12 +25,14 @@
     "jquery": "^3.3.1",
     "ngx-bootstrap": "^3.2.0",
     "popper": "^1.0.1",
+    "primeicons": "^1.0.0",
+    "primeng": "^8.0.1",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.11.4",
+    "@angular-devkit/build-angular": "^0.13.8",
     "@angular/cli": "~7.1.2",
     "@angular/compiler-cli": "~7.1.0",
     "@angular/language-service": "~7.1.0",

src/app/app.component.css

@@ -0,0 +1,24 @@
+#Mytoolbar:first-child{
+    background: none;
+    background-color:transparent;
+    border-color: none !important;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    z-index: 9999 !important;
+}
+.dropShadow {
+    box-shadow: 0 10px 60px 10px black;
+    z-index: 12;
+}
+
+.ui-toolbar.ui-widget-header{
+    background: none;
+    background-image: none;
+    background-color:transparent !important;
+    border-color: none !important;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    z-index: 9999 !important;
+}

src/app/app.component.html

@@ -1 +1,60 @@
-<router-outlet></router-outlet>
+<!--<nav class="navbar navbar-dark bg-dark mb-5">
+        <a 
+      class="navbar-brand" href="/">Angular & Bootstrap</a>
+        <div 
+      class="navbar-expand mr-auto">
+          <div 
+      class="navbar-nav">
+            <a 
+      class="nav-item nav-link active" href="#">Home</a>
+            <a 
+      class="nav-item nav-link" href="#">About</a>
+            <a 
+      class="nav-item nav-link" href="#">Contact</a>
+          </div>
+        </div>
+        <div 
+      class="navbar-expand ml-auto navbar-nav">
+          <div 
+      class="navbar-nav">
+            <a 
+      class="nav-item nav-link" href="https://github.com/beeman" target="_blank">
+              <i 
+      class="fa fa-github"></i>
+            </a>
+            <a 
+      class="nav-item nav-link" href="https://twitter.com/beeman_nl" target="_blank">
+              <i 
+      class="fa fa-twitter"></i>
+            </a>
+            <a 
+      class="nav-item nav-link" href="https://medium.com/@beeman" target="_blank">
+              <i 
+      class="fa fa-medium"></i>
+            </a>
+          </div>
+        </div>
+      </nav>
+    -->
+
+    <p-toolbar id="Mytoolbar">
+        
+            <div class="ui-toolbar-group-left">
+                <button pButton type="button" label="New" icon="pi pi-plus"></button>
+                <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
+                    
+                <i class="pi pi-bars"></i>
+                
+                <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="ui-button-warning"></p-splitButton>
+            </div>
+            
+            <div class="ui-toolbar-group-right">
+                <button pButton type="button" icon="pi pi-search"></button>
+                <button pButton type="button" icon="pi pi-calendar" class="ui-button-success"></button>
+                <button pButton type="button" icon="pi pi-times" class="ui-button-danger"></button>
+            </div>
+      
+            
+        </p-toolbar>
+        <router-outlet></router-outlet>
+

src/app/app.component.ts

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import {MenuItem} from 'primeng/api';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
   title = 'MyControlPanel';
+
+  items : MenuItem[];
+
+  //constructor(){}
+  ngOnInit(){
+    this.items = [
+      {label: 'Update', icon: 'pi pi-refresh'},
+      {label: 'Delete', icon: 'pi pi-times'}
+      
+  ];
+
+
+  }
 }

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -9,7 +10,12 @@ import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
-import { BorderCardDirective } from './directives/border-card.directive'
+import { BorderCardDirective } from './directives/border-card.directive';
+
+import { ToolbarModule } from 'primeng/toolbar';
+import { ButtonModule } from 'primeng/button';
+import { SplitButtonModule } from 'primeng/splitbutton';
+
 
 
 @NgModule({
@@ -20,11 +26,16 @@ import { BorderCardDirective } from './directives/border-card.directive'
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     AlertModule.forRoot(),
     BsDatepickerModule.forRoot(),
     BsDropdownModule.forRoot(),
-    CarouselModule.forRoot()
+    CarouselModule.forRoot(),
+    ToolbarModule,
+    ButtonModule,
+    SplitButtonModule
+    
   ],
   providers: [],
   bootstrap: [AppComponent]