Simple loading indicator

Author: danish-jamil

src/app/app.component.html

@@ -1,10 +1,9 @@
 <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
 <div class="container">
- <h2>Basic CRUD Angular 5 POC</h2>
  <div class="row">
  <div class="col-xs-12">
  <div>
- <span class="">CRUD Manager</span>
+ <h3>CRUD Manager</h3>
  <button type="button" class="btn custom-btn btn-primary pull-right" (click)="addNew()">
  <span class="fa fa-plus">&nbsp;Add New</span>
  </button>

src/app/simple-modal-content/simple-modal-content.component.html

@@ -15,7 +15,7 @@ <h4 class="modal-title pull-left">{{title}}</h4>
  <div class="col-md-4">
  <input id="name"name="name" type="text" placeholder="Enter Employee Name" class="form-control input-md" formControlName="name">
  <div *ngIf="employeeForm.controls.name.invalid && employeeForm.controls.name.touched">
- Name is invalid
+ Invalid
  </div>
  </div>
  </div>

src/styles.scss

@@ -6,6 +6,12 @@
 
 @import 'assets/custom-styles/checkbox';
 
+.btn{
+ &.custom-btn{
+ margin-bottom: 10px;
+ }
+}
+
 .ngx-datatable{
  &.bootstrap{
  border: 1px solid #dadada;
@@ -21,11 +27,12 @@
  }
  .datatable-body{
  .datatable-body-row{
+ &.active{
+ background-color: #FFFFFF !important;
+ color: #000 !important;
+ }
  &.datatable-row-even{
  background-color: transparent !important;
- &.active{
- background-color: #1483ff !important;
- }
  }
  .datatable-body-cell{
  overflow: inherit;