diff --git a/ng6-seed/ng6-seed.zip b/ng6-seed/ng6-seed.zip
new file mode 100644
index 000000000..38076affb
Binary files /dev/null and b/ng6-seed/ng6-seed.zip differ
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
new file mode 100644
index 000000000..4b25b783e
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.html
@@ -0,0 +1,102 @@
+<p>Address</p>
+<form class="address" [formGroup]="addressForm">
+    <mat-form-field>
+        <input matInput placeholder="Address" formControlName="address">
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-select placeholder="Address Type" formControlName="address_type">
+            <mat-option value="Office">Office</mat-option>
+            <mat-option value="Clinic">Clinic</mat-option>
+            <mat-option value="Factory">Factory</mat-option>
+            <mat-option value="Warehouse">Warehouse</mat-option>
+            <mat-option value="Shop">Shop</mat-option>
+            <mat-option value="ResidencecumOffice">Residence cum Office</mat-option>
+            <mat-option value="Residence">Residence</mat-option>
+            <mat-option value="Other">Other (PD officer to fill)</mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <mat-form-field>
+        <mat-select placeholder="Locality" formControlName="locality">
+            <mat-option value="CommercialOffice">Commercial (Office type) Area
+            </mat-option>
+            <mat-option value="CommercialShop">Commercial (shop type) Area</mat-option>
+            <mat-option value="Industrial">Industrial Area</mat-option>
+            <mat-option value="Residential">Residential Area</mat-option>
+            <mat-option value="Mix">Mix use (Comment mandatory)</mat-option>
+            <mat-option value="Rural">Rural (Village) area</mat-option>
+            <mat-option value="Others">Others (Please specify)</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+        <mat-select placeholder="Approach to PD location" formControlName="pd_location">
+            <mat-option value="{{data.pd_location_approach_id}}"
+                        *ngFor="let data of locationdata">{{data.description}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+        <mat-select placeholder="Comment on locality" formControlName="comment_locality">
+            <mat-option value="{{data.comments_on_locality_id}}"
+                        *ngFor="let data of commentData">{{data.rating}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field>
+        <mat-select placeholder="Customer Behaviour"
+                    formControlName="customer_behaviour">
+            <mat-option value="{{data.customer_behaviour_id}}"
+                        *ngFor="let data of customerData">{{data.description}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-card>
+        <mat-card-header>
+            <p>Neighbour hood
+            <p>
+        </mat-card-header>
+        <div formArrayName="neighbourhood">
+            <div *ngFor="let item of addressForm.get('neighbourhood').controls; let i=index">
+                <mat-card-content class="matcard" [formGroup]="item">
+                    <mat-form-field>
+                        <input matInput placeholder="Neighbour name"
+                               formControlName="name">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select placeholder="Do you know"
+                                    formControlName="do_you_know">
+                            <mat-option value="yes">Yes</mat-option>
+                            <mat-option value="no">No</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="How long do you know the applicant"
+                               formControlName="how_long">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select placeholder="Is the applicant owner"
+                                    formControlName="is_owner">
+                            <mat-option value="yes">Yes</mat-option>
+                            <mat-option value="no">No</mat-option>
+                            <mat-option value="dont_know">Dont Know</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <button type="button" mat-raised-button mat-icon-button *ngIf="i==0"
+                            (click)="addNeighbour($event)"
+                            style="float: right;">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                    <button type="button" mat-raised-button mat-icon-button *ngIf="i>0"
+                            (click)="removeNeighbour(i)"
+                            style="float: right;">
+                        <mat-icon>close</mat-icon>
+                    </button>
+
+                </mat-card-content>
+            </div>
+        </div>
+    </mat-card>
+    <button mat-raised-button type="submit" class="button" (click)="onSubmit()">Submit
+    </button>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
new file mode 100644
index 000000000..db319b869
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.scss
@@ -0,0 +1,18 @@
+.address {
+  display: flex;
+  padding: 0 2%;
+  flex-direction: column;
+}
+
+.address > * {
+  width: 100%;
+}
+.matcard mat-form-field {
+  margin: 0 2%;
+}
+.address .button {
+  float: right;
+  width: 10px;
+  background: #62B013;
+  color: white;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
new file mode 100644
index 000000000..0e00cb7c7
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/address/address.component.ts
@@ -0,0 +1,184 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl, AbstractControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from "@angular/router";
+@Component({
+    selector: 'app-address',
+    templateUrl: './address.component.html',
+    styleUrls: ['./address.component.scss']
+})
+export class AddressComponent implements OnInit {
+    locationdata: any = [];
+    commentData: any = [];
+    customerData: any = [];
+    public currentLoanForm: FormGroup;
+    private notifier: NotifierService;
+    public addressForm: FormGroup;
+
+    public address: AbstractControl;
+    public addressType: AbstractControl;
+    public locality: AbstractControl;
+    public pdLocation: AbstractControl;
+    public commentlocality: AbstractControl;
+    public customerBehaviour: AbstractControl;
+
+
+    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+                private router: Router,
+                private _pd: PdTrigerService) {
+
+    }
+    ngOnInit() {
+        this.getLocation();
+        this.getComment();
+        this.getCustomer();
+        this.initAddressForm();
+        let params: any = {};
+        params.pd_id = '250';
+        params.pd_form_id = '250';
+        this._pd.retriveForm(params).subscribe(data => {
+            console.log('data', data);
+            var result = Object.keys(data.records.neighbourhood).map(function(key) {
+                return data.records.neighbourhood[key];
+            });
+            this.addressForm.controls.address.setValue(data.records.address);
+            this.addressForm.controls.pd_location.setValue(data.records.pd_location);
+            this.addressForm.controls.address_type.setValue(data.records.address_type);
+            this.addressForm.controls.comment_locality.setValue(data.records.comment_locality);
+            this.addressForm.controls.customer_behaviour.setValue(data.records.customer_behaviour);
+            this.addressForm.controls.locality.setValue(data.records.locality);
+            const control = <FormArray>this.addressForm.controls['neighbourhood'];
+            if(result.length == 0) {
+                control.push(this.createNeighbour());
+            } else {
+                result.forEach(datas => {
+                    control.push(this.createNeighbour());
+                });
+                this.addressForm.controls.neighbourhood.setValue(result);
+            }
+            console.log('result', result);
+        });
+    }
+    public initAddressForm(): void {
+        this.addressForm = this.fb.group({
+            address: ['', Validators.compose([Validators.required])],
+            address_type: ['', Validators.compose([Validators.required])],
+            locality: ['', Validators.compose([Validators.required])],
+            pd_location: ['', Validators.compose([Validators.required])],
+            comment_locality: ['', Validators.compose([Validators.required])],
+            customer_behaviour: ['', Validators.compose([Validators.required])],
+            neighbourhood: this.fb.array([])
+        });
+        this.address = this.addressForm.controls['address'];
+        this.addressType = this.addressForm.controls['address_type'];
+        this.locality = this.addressForm.controls['locality'];
+        this.pdLocation = this.addressForm.controls['pd_location'];
+        this.commentlocality = this.addressForm.controls['comment_locality'];
+        this.customerBehaviour = this.addressForm.controls['customer_behaviour'];
+    }
+    createNeighbour(): FormGroup {
+        return this.fb.group({
+            name: ['', Validators.compose([Validators.required])],
+            do_you_know: ['', Validators.compose([Validators.required])],
+            how_long: ['', Validators.compose([Validators.required])],
+            is_owner: ['', Validators.compose([Validators.required])],
+        });
+    }
+    getLocation() {
+        let master_name = 'PDLOCATIONAPPROACH';
+        this._pd.getAllMasterDatas(master_name).subscribe(data => {
+            console.log('data', data);
+            data.records.forEach(val => {
+                if (val.isactive == 1) {
+                    this.locationdata.push(val);
+                }
+            })
+        });
+    }
+    getComment() {
+        let master_name = 'COMMENTSONLOCALITY';
+        this._pd.getAllMasterDatas(master_name).subscribe(data => {
+            console.log('data', data);
+            data.records.forEach(val => {
+                if (val.isactive == 1) {
+                    this.commentData.push(val);
+                }
+            })
+        });
+    }
+    getCustomer() {
+        let master_name = 'CUSTOMERBEHAVIOUR';
+        this._pd.getAllMasterDatas(master_name).subscribe(data => {
+            console.log('data', data);
+            data.records.forEach(val => {
+                if (val.isactive == 1) {
+                    this.customerData.push(val);
+                }
+            })
+        });
+    }
+    addNeighbour() {
+        const control = <FormArray>this.addressForm.controls['neighbourhood'];
+        if (control.length <= 1) {
+            control.push(this.createNeighbour());
+        }
+    }
+    removeNeighbour(index) {
+        const control = <FormArray>this.addressForm.controls['neighbourhood'];
+        control.removeAt(index);
+    }
+    onSubmit() {
+        if (!this.addressForm.valid) {
+            this.validateAllFormFields(this.addressForm);
+            return;
+        }
+        console.log('form', this.addressForm.value);
+        let records: any = {};
+        records.address = this.address.value;
+        records.address_type = this.addressType.value;
+        records.locality = this.locality.value;
+        records.pd_location = this.pdLocation.value;
+        records.comment_locality = this.commentlocality.value;
+        records.customer_behaviour = this.commentlocality.value;
+        records.neighbourhood = this.addressForm.value.items;
+        records.pdid = '250';
+        records.formid = '250';
+        records.fk_createdby = '250';
+        console.log('params', records);
+        this._pd.saveForm(records).subscribe(data => {
+            console.log('data', data);
+            this.notifier.notify('success', 'Saved Successfully.');
+
+        });
+    }
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({onlySelf: true});
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
new file mode 100644
index 000000000..b55e5fa2d
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.html
@@ -0,0 +1,235 @@
+<!--<pre> {{ m_group | json}}</pre>-->
+<mat-card style="padding: 12px;">
+  <form *ngIf="apiLoadFinish && loadDetails" [formGroup]="_assetsQuesFrom" (submit)="onSubmit()" novalidate>
+    <div fxLayout="row" fxLayoutAlign="start none">
+      <div formArrayName="assets_details" fxFill>
+        <div *ngFor="let sup of _assetsQuesFrom.controls.assets_details['controls']; let i=index">
+          <mat-card>
+            <div [formGroupName]="i"> 
+              <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                <div>
+                  <mat-form-field>
+                    <mat-select (selectionChange)="selectedAssetsType($event, i)" placeholder="Select Assets Type" formControlName="assets_mode">
+                      <mat-option *ngFor="let asset of m_assets_type" [value]="asset.id">{{ asset.name }}</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              </div>
+              <!--Desction Dynamic details: START-->
+              <div formArrayName="details" class="example-full-width">
+                <!--Property-->
+                <div *ngIf="sup.get('assets_mode').value == 1 ">
+                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div>
+                          <mat-form-field>
+                            <mat-select placeholder="Select Property" formControlName="property_type">
+                              <mat-option *ngFor="let prop of m_propertyType" [value]="prop.id">{{ prop.name }}</mat-option>
+                            </mat-select>
+                          </mat-form-field>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--Four Wheeler-->
+                <div *ngIf="sup.get('assets_mode').value == 2">
+                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div>
+                          <mat-form-field class="ml-xs example-full-width">
+                            <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model">
+                          </mat-form-field>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--Two Wheeler-->
+                <div *ngIf="sup.get('assets_mode').value == 3">
+                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div>
+                          <mat-form-field class="ml-xs example-full-width">
+                            <input matInput placeholder="Manufacturer, Model" formControlName="manufacturer_model">
+                          </mat-form-field>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--jwell details-->
+                <div *ngIf="sup.get('assets_mode').value == 4">
+                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div>
+                          <mat-form-field class="ml-xs example-full-width">
+                            <input matInput placeholder="Description" formControlName="jwell_description">
+                          </mat-form-field>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--Consumer Durable-->
+                <div *ngIf="sup.get('assets_mode').value == 5">
+                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div>
+                          <mat-form-field class="ml-xs example-full-width">
+                            <input matInput placeholder="Description" formControlName="consumer_durable_description">
+                          </mat-form-field>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--Insurance-->
+                <div *ngIf="sup.get('assets_mode').value == 6">
+                  <div fxFill>
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                          <div fxFlex="33">
+                            <mat-form-field>
+                              <mat-select placeholder="Type" formControlName="insurance_type">
+                                <mat-option *ngFor="let ins_type of m_insuranceType" [value]="ins_type.id">{{ ins_type.name }}</mat-option>
+                              </mat-select>
+                            </mat-form-field>
+                          </div>
+                          <div fxFlex="33">
+                            <mat-form-field class="ml-xs example-full-width">
+                              <input matInput placeholder="Premium Paid" formControlName="premium_paid">
+                            </mat-form-field>
+                          </div>
+                          <div fxFlex="33">
+                            <mat-form-field>
+                              <mat-select placeholder="Frequency" formControlName="frequency_mode">
+                                <mat-option *ngFor="let freqn of m_freqOfPurchase" [value]="freqn.id">{{ freqn.name }}</mat-option>
+                              </mat-select>
+                            </mat-form-field>
+                          </div>
+                        </div>
+                        <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                          <div fxFlex="33">
+                            <mat-form-field class="ml-xs example-full-width">
+                              <input matInput placeholder="Sum Assured" formControlName="sum_assured">
+                            </mat-form-field>
+                          </div>
+                          <div fxFlex="33">
+                            <mat-form-field class="ml-xs example-full-width">
+                              <input matInput placeholder="Members Covered" formControlName="members_coverd">
+                            </mat-form-field>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--Investments-->
+                <div *ngIf="sup.get('assets_mode').value == 7">
+                  <div>
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                          <div fxFlex="33">
+                            <mat-form-field>
+                              <mat-select placeholder="Type" formControlName="investments_type">
+                                <mat-option *ngFor="let ins_type of m_investmentType" [value]="ins_type.id">{{ ins_type.name }}</mat-option>
+                              </mat-select>
+                            </mat-form-field>
+                          </div>
+                          <div fxFlex="33">
+                            <mat-form-field class="ml-xs example-full-width">
+                              <input matInput placeholder="Amount of Investment" formControlName="amount_of_invest">
+                            </mat-form-field>
+                          </div>
+                          <div fxFlex="33">
+                            <mat-form-field class="ml-xs example-full-width">
+                              <input matInput placeholder="Bank Name" formControlName="bank_name">
+                            </mat-form-field>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!--other assets-->
+                <div *ngIf="sup.get('assets_mode').value == 8">
+                  <div fxLayout="row" fxLayoutGap="2px" fxLayoutAlign="start none">
+                    <div *ngFor="let detail of sup['controls'].details['controls']; let s = index">
+                      <div [formGroupName]="s">
+                        <div>
+                          <mat-form-field class="ml-xs example-full-width">
+                            <input matInput placeholder="Description of the Assets" formControlName="any_other_assets">
+                          </mat-form-field>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!--Desction Dynamic details : END -->
+              <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                <div fxFlex="33">
+                  <mat-form-field class="ml-xs example-full-width">
+                    <input matInput placeholder="Approximate Market Value" formControlName="approximate_market_value">
+                  </mat-form-field>
+                </div>
+                <div fxFlex="33">
+                  <mat-form-field class="ml-xs example-full-width">
+                    <input matInput placeholder="Name of the Owner" formControlName="name_of_the_owner">
+                  </mat-form-field>
+                </div>
+                <div fxFlex="33">
+                  <mat-form-field class="ml-xs example-full-width">
+                    <input matInput placeholder="Year of Purchase and Approximate month" formControlName="year_of_purchase">
+                  </mat-form-field>
+                </div>
+              </div>
+              <div fxLayout="row wrap" fxLayoutGap="2px" fxLayoutAlign="start none">
+                <div fxFlex="33">
+                      <mat-checkbox formControlName="emi" [ngModel]="sup.get('emi').value === '1' ? true : false"
+                          (ngModelChange)="sup.get('emi').value = $event ? '1' : '0'">EMI</mat-checkbox>
+                </div>
+                <div *ngIf="sup.get('emi').value === '1'" fxFlex="33">
+                  <mat-form-field class="ml-xs example-full-width">
+                    <input matInput placeholder="EMI Paid" formControlName="emi_paid">
+                  </mat-form-field>
+                </div>
+                <div *ngIf="sup.get('emi').value === '1'"  fxFlex="33">
+                  <mat-form-field class="ml-xs example-full-width">
+                    <input matInput placeholder="Elapsed Tenure" formControlName="elapsed_tenure">
+                  </mat-form-field>
+                </div>
+                <div *ngIf="sup.get('emi').value === '1'"  fxFlex="33">
+                  <mat-form-field class="ml-xs example-full-width">
+                    <input matInput placeholder="Balance Tenure" formControlName="balance_tenure">
+                  </mat-form-field>
+                </div>
+              </div>
+              <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
+                <div fxFlex="20">
+                  <span *ngIf="_assetsQuesFrom.controls.assets_details.controls.length > 1" (click)="removeLanguage(i)">
+                     <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                   </span>
+                </div>
+              </div>
+            </div>
+          </mat-card>
+        </div>
+        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
+          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+      </div>
+    </div>
+    <div class="row" style="text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" (click)="onReset(); false"><mat-icon>settings_backup_restore</mat-icon></button>
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+    </div>
+  </form>
+</mat-card>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.spec.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.spec.ts
new file mode 100644
index 000000000..53a17db27
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AssetsInfoComponent } from './assets-info.component';
+
+describe('AssetsInfoComponent', () => {
+  let component: AssetsInfoComponent;
+  let fixture: ComponentFixture<AssetsInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AssetsInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AssetsInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts
new file mode 100644
index 000000000..204344fbb
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assets-info/assets-info.component.ts
@@ -0,0 +1,556 @@
+/** Common Imports */
+import {
+  Component,
+  OnInit,
+  Inject,
+  Input
+} from '@angular/core';
+
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  FormArray,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+@Component({
+  selector: 'app-assets-info',
+  templateUrl: './assets-info.component.html',
+  styleUrls: ['./assets-info.component.scss']
+})
+export class AssetsInfoComponent implements OnInit {
+
+  @Input() pdid: number;
+
+  public _assetsQuesFrom: FormGroup;
+  public submitted = false;
+
+  public m_assets_type = [
+    {
+      'id': "1",
+      'name': "Property"
+    },
+    {
+      'id': "2",
+      'name': "Four Wheeler"
+    },
+    {
+      'id': "3",
+      'name': "Two Wheeler"
+    },
+    {
+      'id': "4",
+      'name': "Jewellery"
+    },
+    {
+      'id': "5",
+      'name': "Consumer Durable"
+    },
+    {
+      'id': "6",
+      'name': "Insurance"
+    },
+    {
+      'id': "7",
+      'name': "Investments"
+    },
+    {
+      'id': "8",
+      'name': "Others"
+    }
+  ]
+
+  public m_propertyType = [
+    {
+      'id': "1",
+      'name': 'Residential'
+    },
+    {
+      'id': "2",
+      'name': 'Commercial'
+    },
+    {
+      'id': "3",
+      'name': 'Industrial'
+    },
+    {
+      'id': "4",
+      'name': 'Land'
+    }
+  ];
+
+  public m_insuranceType = [{
+    'id': "1",
+    'name': 'Life'
+  }, {
+    'id': "2",
+    'name': 'Health'
+  }]
+
+  public m_investmentType = [{
+    'id': "1",
+    'name': 'FD'
+  }, {
+    'id': "2",
+    'name': 'RD'
+  }, {
+    'id': "3",
+    'name': 'Mutual Funds'
+  }, {
+    'id': "4",
+    'name': 'PPF'
+  }, {
+    'id': "5",
+    'name': 'Shares'
+  }, {
+    'id': "6",
+    'name': 'Others'
+  }]
+
+  public m_freqOfPurchase = [
+    {
+      'id': "1",
+      'name': 'Daily'
+    },
+    {
+      'id': "2",
+      'name': 'Weekly'
+    },
+    {
+      'id': "3",
+      'name': 'Monthly'
+    },
+    {
+      'id': "4",
+      'name': 'Every 3 months'
+    },
+    {
+      'id': "5",
+      'name': 'Half yearly'
+    },
+    {
+      'id': "6",
+      'name': 'Yearly'
+    },
+    {
+      'id': "7",
+      'name': 'As and when required'
+    },
+    {
+      'id': "8",
+      'name': 'Others'
+    }
+  ]
+
+  private notifier: NotifierService;
+  constructor(
+    notifier: NotifierService,
+    private _formBuilder: FormBuilder,
+    private pdTrigerService: PdTrigerService) {
+    this.notifier = notifier;
+  }
+
+  ngOnInit() {
+
+    this.getPdSupplierFormDetails();
+  }
+  apiLoadFinish: boolean = false;
+  getPdSupplierFormDetails() {
+    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '4').subscribe(
+      data => {
+        if (data) {
+          if (data.dataStatus) {
+            this.formLoadData(data.records);
+          } else {
+            this.formLoadData(null);
+          }
+          this.apiLoadFinish = true;
+        } else {
+          // this.noRecordFound = true;
+        }
+      }
+    );
+  }
+
+  formLoadData(val) {
+    if (val !== null) {
+      let value = val;
+      this._assetsQuesFrom = this._formBuilder.group({
+        pdid: [this.pdid],
+        formid: ['4'],
+        assets_details: this._formBuilder.array([
+          // this.initDetails(),
+        ])
+      });
+      this.addAssetsDetailsWithData(value.assets_details);
+    } else {
+      this._assetsQuesFrom = this._formBuilder.group({
+        pdid: [this.pdid],
+        formid: ['4'],
+        assets_details: this._formBuilder.array([
+          this.initDetails(),
+        ])
+      });
+    }
+    this.loadDetails = true;
+  }
+
+  // convenience getter for easy access to form fields
+  get f() { return this._assetsQuesFrom.controls; }
+
+  get f_assets_details() {
+    return <FormArray>this._assetsQuesFrom.get('assets_details');
+  }
+
+  // Dynamic Form field creation Functionality : START ===>
+  initDetails() {
+    return this._formBuilder.group({
+      assets_mode: ['', Validators.compose([Validators.required])],
+      details: this._formBuilder.array([]),
+      approximate_market_value: ['', Validators.compose([Validators.required])],
+      name_of_the_owner: ['', Validators.compose([Validators.required])],
+      year_of_purchase: ['', Validators.compose([Validators.required])],
+      emi: [''],
+      emi_paid: [''],
+      elapsed_tenure: [''],
+      balance_tenure: ['']
+    });
+  }
+
+
+  show: boolean;
+  selectedAssetsType(e: any, i: any): void {
+    let val = i;
+    const arr = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+    arr.controls.splice(0);
+    switch (e.value) {
+      case '1': {
+        let val = i;
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadProperty());
+        break;
+      }
+      case '2': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.load_Two_Four_Weeler());
+        break;
+      }
+      case '3': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.load_Two_Four_Weeler());
+        break;
+      }
+      case '4': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadJwellDescription());
+        break;
+      }
+      case '5': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadConsumerDurableDescription());
+        break;
+      }
+      case '6': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadInsuranceDescription());
+        break;
+      }
+      case '7': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadInvestDescription());
+        break;
+      }
+      case '8': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.otherAssetsDescription());
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+
+  loadProperty() {
+    return this._formBuilder.group({
+      property_type: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  loadJwellDescription() {
+    return this._formBuilder.group({
+      jwell_description: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  loadConsumerDurableDescription() {
+    return this._formBuilder.group({
+      consumer_durable_description: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  otherAssetsDescription() {
+    return this._formBuilder.group({
+      any_other_assets: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  loadInsuranceDescription() {
+    return this._formBuilder.group({
+      insurance_type: ['', Validators.compose([Validators.required])],
+      premium_paid: ['', Validators.compose([Validators.required])],
+      frequency_mode: ['', Validators.compose([Validators.required])],
+      sum_assured: ['', Validators.compose([Validators.required])],
+      members_coverd: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  loadInvestDescription() {
+    return this._formBuilder.group({
+      investments_type: ['', Validators.compose([Validators.required])],
+      amount_of_invest: ['', Validators.compose([Validators.required])],
+      bank_name: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+  load_Two_Four_Weeler() {
+    return this._formBuilder.group({
+      manufacturer_model: ['', Validators.compose([Validators.required])]
+    });
+  }
+
+
+
+  loadPropertyWithData(data) {
+    return this._formBuilder.group({
+      property_type: [data.property_type, Validators.compose([Validators.required])]
+    });
+  }
+
+  loadJwellDescriptionWithData(data) {
+    return this._formBuilder.group({
+      jwell_description: [data.jwell_description, Validators.compose([Validators.required])]
+    });
+  }
+
+  loadConsumerDurableDescriptionWithData(data) {
+    return this._formBuilder.group({
+      consumer_durable_description: [data.consumer_durable_description, Validators.compose([Validators.required])]
+    });
+  }
+
+  otherAssetsDescriptionWithData(data) {
+    return this._formBuilder.group({
+      any_other_assets: [data.any_other_assets, Validators.compose([Validators.required])]
+    });
+  }
+
+  loadInsuranceDescriptionWithData(data) {
+    return this._formBuilder.group({
+      insurance_type: [data.insurance_type, Validators.compose([Validators.required])],
+      premium_paid: [data.premium_paid, Validators.compose([Validators.required])],
+      frequency_mode: [data.frequency_mode, Validators.compose([Validators.required])],
+      sum_assured: [data.sum_assured, Validators.compose([Validators.required])],
+      members_coverd: [data.members_coverd, Validators.compose([Validators.required])]
+    });
+  }
+
+  loadInvestDescriptionWithData(data) {
+    return this._formBuilder.group({
+      investments_type: [data.investments_type, Validators.compose([Validators.required])],
+      amount_of_invest: [data.amount_of_invest, Validators.compose([Validators.required])],
+      bank_name: [data.bank_name, Validators.compose([Validators.required])]
+    });
+  }
+
+  load_Two_Four_WeelerWithData(data) {
+    return this._formBuilder.group({
+      manufacturer_model: [data.manufacturer_model, Validators.compose([Validators.required])]
+    });
+  }
+
+
+  initDetailsWithdata(data) {
+    return this._formBuilder.group({
+      assets_mode: [data.assets_mode, Validators.compose([Validators.required])],
+      details: this._formBuilder.array([]),
+      approximate_market_value: [data.approximate_market_value, Validators.compose([Validators.required])],
+      name_of_the_owner: [data.name_of_the_owner, Validators.compose([Validators.required])],
+      year_of_purchase: [data.year_of_purchase, Validators.compose([Validators.required])],
+      emi: [data.emi || 0],
+      emi_paid: [data.emi_paid || ''],
+      elapsed_tenure: [data.elapsed_tenure || ''],
+      balance_tenure: [data.balance_tenure || '']
+    });
+  }
+  loadDetails: boolean;
+  addAssetsDetailsWithData(supp_data) {
+    var result = Object.keys(supp_data).map(function (key) {
+      return supp_data[key];
+    });
+    if (result.length > 0) {
+      for (let val of result) {
+        let vals = {
+          assets_mode: val.assets_mode,
+          approximate_market_value: val.approximate_market_value,
+          name_of_the_owner: val.name_of_the_owner,
+          year_of_purchase: val.year_of_purchase,
+          emi: val.emi,
+          emi_paid: val.emi_paid,
+          elapsed_tenure: val.elapsed_tenure,
+          balance_tenure: val.balance_tenure
+        };
+        const control = <FormArray>this._assetsQuesFrom.controls['assets_details'];
+        control.push(this.initDetailsWithdata(vals));
+        this.setAssetsDetailsWithData(vals.assets_mode, val.details, control.length - 1)
+      }
+    }
+    this.loadDetails = true;
+  }
+
+  setAssetsDetailsWithData(assets_details_mode: any, datas: any, i: any): void {
+    let val = i;
+    // var data = Object.keys(datas).map(function (key) {
+    //   return datas[key];
+    // });
+    // alert(JSON.stringify(datas));
+    let data = datas;
+    const arr = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+    arr.controls.splice(0);
+    switch (assets_details_mode) {
+      case '1': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadPropertyWithData(data));
+        break;
+      }
+      case '2': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.load_Two_Four_WeelerWithData(data));
+        break;
+      }
+      case '3': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.load_Two_Four_WeelerWithData(data));
+        break;
+      }
+      case '4': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadJwellDescriptionWithData(data));
+        break;
+      }
+      case '5': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadConsumerDurableDescriptionWithData(data));
+        break;
+      }
+      case '6': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadInsuranceDescriptionWithData(data));
+        break;
+      }
+      case '7': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.loadInvestDescriptionWithData(data));
+        break;
+      }
+      case '8': {
+        const control = (<FormArray>this._assetsQuesFrom.controls['assets_details']).at(val).get('details') as FormArray;
+        control.push(this.otherAssetsDescriptionWithData(data));
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+
+  addSupplierDetails(e) {
+    const control = <FormArray>this._assetsQuesFrom.controls['assets_details'];
+    control.push(this.initDetails());
+  }
+  removeLanguage(i: number) {
+    const control = <FormArray>this._assetsQuesFrom.controls['assets_details'];
+    control.removeAt(i);
+  }
+
+  public paymentModeTextBox: number;
+  selectedPM(e) {
+    this.paymentModeTextBox = e.value;
+    // this.f.supplier_details.controls.get('payment_mode_value');
+  }
+
+  public freqPurchaseTextBox: number;
+  selectedFreqPurchase(e) {
+    this.freqPurchaseTextBox = e.value;
+  }
+
+
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this._assetsQuesFrom.invalid) {
+      return;
+    } else {
+      var answerFormValues = this._assetsQuesFrom.value;
+
+      //To Remove The "Null" With Key also
+      Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
+      answerFormValues.assets_details.map(val => {
+        if (val.emi == '0') {
+          val.emi_paid = '';
+          val.elapsed_tenure = '';
+          val.balance_tenure = '';
+        }
+      });
+
+      // Add BRANCH data with help Service File
+      this.pdTrigerService.savePDFormDetailsWithID(answerFormValues).subscribe(
+        dataresult => {
+          if (dataresult.status == 200) {
+            // console.log(dataresult);
+            this.notifier.notify('success', 'Record Saved Successfully.!');
+            // this.dialogRef.close();
+            // alert("sample alert for Saving");
+          }
+          else {
+            this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+            // this.errorMessage = "Some Thing Wents Wrong Try Again !";
+          }
+        }, error => {
+          this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+          // this.errorMessage = "Something Wents Wrong Try Again !";
+          // this.dialogRef.close();
+        });
+      //After Saving the BRANCH data then popup close
+      // this.dialogRef.close();
+    }
+  }
+
+  /** To Reset Popup Data */
+  onReset() {
+    const arr = <FormArray>this._assetsQuesFrom.controls.assets_details;
+    arr.controls.splice(0);
+    this.getPdSupplierFormDetails();
+  }
+  // {
+  //   'main_raw_materials': 'sdkjfal',
+  //   'supplier_details' ; [
+  //     {
+  //       'supplier_name':'ldskjfalks',
+  //       'payment_mode': '1',
+  //       'payment_mode_value':''
+  //     }
+  //   ]
+  // }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
new file mode 100644
index 000000000..c7363fbe0
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.html
@@ -0,0 +1,65 @@
+<form [formGroup]="bankingForm" class="bankForm">
+    <div formArrayName="itemRows">
+        <mat-accordion
+                *ngFor="let itemrow of bankingForm.controls.itemRows.controls; let i=index"
+                [formGroupName]="i">
+            <mat-expansion-panel class="banlFields" [expanded]="step == i">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <h4>{{i+1}} Banking details<span *ngIf="i==0" style="float: right;">
+                                                    <mat-icon (click)="addBankdetails(i)">add</mat-icon>
+                                                     </span>
+                            <span *ngIf="i > 0">
+                                                    <mat-icon (click)="deleteBankdetails(i)">delete</mat-icon>
+                                                        </span></h4>
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <mat-form-field>
+                    <input matInput placeholder="Applicant Name"
+                           formControlName="applicant_name">
+                </mat-form-field>
+                <mat-form-field>
+                    <input matInput placeholder="Bank Name" formControlName="bank_name">
+                </mat-form-field>
+
+                <mat-form-field>
+                    <mat-select placeholder="Account Type"
+                                formControlName="account_type">
+                        <mat-option value="Savings">Savings</mat-option>
+                        <mat-option value="Current">Current</mat-option>
+                        <mat-option value="OD">OD</mat-option>
+                        <mat-option value="CC">CC</mat-option>
+
+                    </mat-select>
+                </mat-form-field>
+
+                <mat-form-field>
+                    <mat-select placeholder="Salary Credited in this account"
+                                formControlName="salary">
+                        <mat-option value="Yes">Yes</mat-option>
+                        <mat-option value="No">No</mat-option>
+                        <mat-option value="NA">NA</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field>
+                    <input matInput placeholder="Limit in case of OD / CC account"
+                           formControlName="limit">
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-select placeholder="Is this the main business account"
+                                formControlName="is_main">
+                        <mat-option value="Yes">Yes</mat-option>
+                        <mat-option value="No">No</mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field>
+                    <input matInput placeholder="Approximate Vintage"
+                           formControlName="vintage">
+                </mat-form-field>
+            </mat-expansion-panel>
+
+        </mat-accordion>
+    </div>
+    <button mat-raised-button class="button" (click)="bankSubmit()">Submit
+    </button>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
new file mode 100644
index 000000000..868e51eb9
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.scss
@@ -0,0 +1,10 @@
+.banlFields mat-form-field {
+  width: 100%;
+  margin: 0 2%;
+}
+.bankForm .button {
+  float: right;
+  width: 10px;
+  background: #62B013;
+  color: white;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts
new file mode 100644
index 000000000..755405c4b
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/banking-details/banking-details.component.ts
@@ -0,0 +1,114 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl, AbstractControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from "@angular/router";
+@Component({
+    selector: 'app-banking-details',
+    templateUrl: './banking-details.component.html',
+    styleUrls: ['./banking-details.component.scss']
+})
+export class BankingDetailsComponent implements OnInit {
+    public bankingForm: FormGroup;
+    step: any;
+    private notifier: NotifierService;
+
+    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+                private router: Router,
+                private _pd: PdTrigerService) {
+
+    }
+    ngOnInit() {
+        this.step = 0;
+        this.initBankingForm();
+        let params: any = {};
+        params.pd_id = '252';
+        params.pd_form_id = '252';
+        this._pd.retriveForm(params).subscribe(data => {
+            console.log('data', data);
+            var result = Object.keys(data.records.banking_details).map(function(key) {
+                return data.records.banking_details[key];
+            });
+            const control = <FormArray>this.bankingForm.controls['itemRows'];
+            if(result.length == 0) {
+                control.push(this.createBankarray());
+            } else {
+                result.forEach(datas => {
+                    control.push(this.createBankarray());
+                });
+                this.bankingForm.controls.itemRows.setValue(result);
+            }
+        });
+    }
+    public initBankingForm(): void {
+        this.bankingForm = this.fb.group({
+            itemRows: this.fb.array([])
+        });
+    }
+    createBankarray() {
+        return this.fb.group({
+            applicant_name: ['', Validators.compose([Validators.required])],
+            bank_name: ['', Validators.compose([Validators.required])],
+            account_type: ['', Validators.compose([Validators.required])],
+            salary: ['', Validators.compose([Validators.required])],
+            limit: ['', Validators.compose([Validators.required])],
+            is_main: ['', Validators.compose([Validators.required])],
+            vintage: ['', Validators.compose([Validators.required])],
+        });
+    }
+    addBankdetails(i) {
+        this.step = i++;
+        const control = <FormArray>this.bankingForm.controls['itemRows'];
+        control.push(this.createBankarray());
+    }
+    deleteBankdetails(index: number) {
+        const control = <FormArray>this.bankingForm.controls['itemRows'];
+        control.removeAt(index);
+    }
+
+    bankSubmit() {
+        if (!this.bankingForm.valid) {
+            this.validateAllFormFields(this.bankingForm);
+            return;
+        }
+        let records: any = {};
+        records.pdid = '252';
+        records.formid = '252';
+        records.fk_createdby = '252';
+        records.banking_details = this.bankingForm.controls['itemRows'].value;
+        console.log('data', records);
+        this._pd.saveForm(records).subscribe(data => {
+            console.log('data', data);
+            this.notifier.notify('success', 'Saved Successfully.');
+        })
+    }
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({onlySelf: true});
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
index 0c0a40381..2582904d1 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
@@ -1,3 +1,81 @@
-<p>
-  client-info works!
-</p>
+<!--<pre> {{ m_group | json}}</pre>-->
+<mat-card style="padding: 12px;">
+  <form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
+    <div fxLayout="row" fxLayoutAlign="start none">
+      <div formArrayName="supplier_details" fxFill>
+        <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index">
+          <div [formGroupName]="i">
+            <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+              <div>
+                <mat-form-field class="ml-xs example-full-width">
+                  <input matInput placeholder="Supplier Name" formControlName="supplier_name">
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                </mat-form-field>
+              </div>
+              <div>
+                <mat-form-field class="ml-xs example-full-width">
+                  <input matInput placeholder="Contact Person Name" formControlName="contact_person">
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                </mat-form-field>
+              </div>
+              <div>
+                <mat-form-field class="ml-xs example-full-width">
+                  <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number">
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                </mat-form-field>
+              </div>
+            </div>
+            <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+              <div>
+                <mat-form-field>
+                  <mat-select (selectionChange)="selectedPM($event)" placeholder="Select Payment Mode" formControlName="payment_mode">
+                    <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3">
+                <mat-form-field class="ml-xs example-full-width">
+                  <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment">
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                </mat-form-field>
+              </div>
+              <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3">
+                <mat-form-field class="ml-xs example-full-width">
+                  <input matInput placeholder="Credit Period" formControlName="credit_period">
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                </mat-form-field>
+              </div>
+            </div>
+            <div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
+              <div>
+                <mat-form-field>
+                  <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
+                    <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.id">{{ feq.name }}</mat-option>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+              <div *ngIf="sup.get('frequency_of_purchase').value == 8">
+                <mat-form-field class="ml-xs example-full-width">
+                  <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
+                  <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                </mat-form-field>
+              </div>
+
+              <div fxFlex="20">
+                <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                     <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                   </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
+          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+      </div>
+    </div>
+    <div class="row" style="text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+    </div>
+  </form>
+</mat-card>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
index 80ae7153a..5e373360f 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
@@ -1,5 +1,27 @@
-import { Component, OnInit } from '@angular/core';
+/** Common Imports */
+import {
+  Component,
+  OnInit,
+  Inject,
+  Input
+} from '@angular/core';
 
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  FormArray,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 @Component({
   selector: 'app-client-info',
   templateUrl: './client-info.component.html',
@@ -7,9 +29,233 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ClientInfoComponent implements OnInit {
 
-  constructor() { }
+  @Input() pdid: number;
+
+  public _supplierQuesFrom: FormGroup;
+  public submitted = false;
+  public m_paymentModeType= [
+    {
+      'id': "1",
+      'name': 'Immediate Or Advanced Payment'
+    },
+    {
+      'id': "2",
+      'name': 'Credit'
+    },
+    {
+      'id': "3",
+      'name': 'Combination of Both'
+    },
+  ];
+
+  public m_freqOfPurchase= [
+    {
+      'id': "1",
+      'name': 'Daily'
+    },
+    {
+      'id': "2",
+      'name': 'Weekly'
+    },
+    {
+      'id': "3",
+      'name': 'Monthly'
+    },
+    {
+      'id': "4",
+      'name': 'Every 3 months'
+    },
+    {
+      'id': "5",
+      'name': 'Half yearly'
+    },
+    {
+      'id': "6",
+      'name': 'Yearly'
+    },
+    {
+      'id': "7",
+      'name': 'As and when required'
+    },
+    {
+      'id': "8",
+      'name': 'Others'
+    }
+  ]
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private pdTrigerService: PdTrigerService) { }
 
   ngOnInit() {
+  
+    this.getPdSupplierFormDetails();
+  }
+apiLoadFinish: boolean = false;
+  getPdSupplierFormDetails() {
+    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '1').subscribe(
+          data => {
+            if (data) {
+                if(data.dataStatus){
+                  this.formLoadData(data.records)
+                } else {
+                  this.formLoadData(null)
+                }
+                this.apiLoadFinish = true;
+            } else {
+              // this.noRecordFound = true;
+            }
+      }
+    );
   }
 
+  formLoadData(val) {
+    if(val !== null) {
+      let value = val;
+       this._supplierQuesFrom = this._formBuilder.group({
+          pdid: [this.pdid],
+          formid: ['1'],
+          main_raw_materials: [value.main_raw_materials, Validators.compose([Validators.required])],
+          supplier_details: this._formBuilder.array([
+            // this.initDetails(),
+        ])
+      });
+      this.addSupplierDetailsWithData(value.supplier_details);
+    } else {
+      this._supplierQuesFrom = this._formBuilder.group({
+          pdid: [this.pdid],
+          formid: ['1'],
+          main_raw_materials: [null, Validators.compose([Validators.required])],
+          supplier_details: this._formBuilder.array([
+            this.initDetails(),
+        ])
+      });
+    }
+  }
+
+   // convenience getter for easy access to form fields
+  get f() { return this._supplierQuesFrom.controls; }
+
+  // Dynamic Form field creation Functionality : START ===>
+  initDetails() {
+    return this._formBuilder.group({
+      supplier_name: ['', Validators.compose([Validators.required])],
+      contact_person: ['', Validators.compose([Validators.required])],
+      mobile_number: ['', Validators.compose([Validators.required])],
+      payment_mode: ['',  Validators.compose([Validators.required])],
+      per_of_immediate_advance_payment:[''],
+      credit_period:[''],
+      frequency_of_purchase: ['', Validators.compose([Validators.required])],
+      freq_purchase_others_text_value: ['']
+    });
+  }
+
+  initDetailsWithdata(data) {
+    return this._formBuilder.group({
+      supplier_name: [data.supplier_name, Validators.compose([Validators.required])],
+      contact_person: [data.contact_person, Validators.compose([Validators.required])],
+      mobile_number: [data.mobile_number, Validators.compose([Validators.required])],
+      payment_mode: [data.payment_mode,  Validators.compose([Validators.required])],
+      per_of_immediate_advance_payment:[data.per_of_immediate_advance_payment || ''],
+      credit_period:[data.credit_period || ''],
+      frequency_of_purchase: [data.frequency_of_purchase, Validators.compose([Validators.required])],
+      freq_purchase_others_text_value: [data.freq_purchase_others_text_value || '']
+    });
+  } 
+
+  addSupplierDetailsWithData(supp_data) {
+
+var result = Object.keys(supp_data).map(function(key) {
+  return supp_data[key];
+});
+      if (result.length > 0) {
+      for (let val of result) {
+        let vals = {
+          supplier_name: val.supplier_name,
+          contact_person: val.contact_person,
+          mobile_number: val.mobile_number,
+          payment_mode: val.payment_mode,
+          per_of_immediate_advance_payment: val.per_of_immediate_advance_payment,
+          credit_period: val.credit_period,
+          frequency_of_purchase: val.frequency_of_purchase,
+          freq_purchase_others_text_value: val.freq_purchase_others_text_value
+        };
+        const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
+        control.push(this.initDetailsWithdata(vals));
+      }
+    }
+  }
+
+  addSupplierDetails(e) {
+    const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
+    control.push(this.initDetails());
+  }
+  removeLanguage(i: number) {
+    const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
+    control.removeAt(i);
+  }
+
+  public paymentModeTextBox: number;
+  selectedPM(e) {
+    this.paymentModeTextBox = e.value;
+    // this.f.supplier_details.controls.get('payment_mode_value');
+  }
+ 
+  public freqPurchaseTextBox: number;
+  selectedFreqPurchase(e){
+     this.freqPurchaseTextBox = e.value;
+  }
+
+  
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this._supplierQuesFrom.invalid) {
+      return;
+    } else {
+      var answerFormValues = this._supplierQuesFrom.value;
+
+      //To Remove The "Null" With Key also
+      Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
+      alert(JSON.stringify(answerFormValues));
+      //Add BRANCH data with help Service File
+      this.pdTrigerService.savePDFormDetailsWithID(answerFormValues).subscribe(
+        dataresult => {
+          if (dataresult.status == 200) {
+            // console.log(dataresult);
+            // this.notifier.notify('success', 'Record Saved Successfully.!');
+            // this.dialogRef.close();
+            // alert("sample alert for Saving");
+          }
+          else {
+            // this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+            // this.errorMessage = "Some Thing Wents Wrong Try Again !";
+          }
+        }, error => {
+          // this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+          // this.errorMessage = "Something Wents Wrong Try Again !";
+          // this.dialogRef.close();
+        });
+      //After Saving the BRANCH data then popup close
+      // this.dialogRef.close();
+    }
+  }
+
+  /** To Reset Popup Data */
+  onReset() {
+    // this._addQuesFrom.reset();
+  }
+
+  // {
+  //   'main_raw_materials': 'sdkjfal',
+  //   'supplier_details' ; [
+  //     {
+  //       'supplier_name':'ldskjfalks',
+  //       'payment_mode': '1',
+  //       'payment_mode_value':''
+  //     }
+  //   ]
+  // }
+
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
new file mode 100644
index 000000000..de8a53594
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.html
@@ -0,0 +1,48 @@
+<form [formGroup]="currentLoanForm" class="address">
+    <mat-form-field>
+        <mat-select placeholder="Do you have any other existing Loan"
+                    formControlName="existing_loan">
+            <mat-option value="Yes">Yes</mat-option>
+            <mat-option value="No">No</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
+        <mat-card-header>
+            <p>Loan Details<p>
+        </mat-card-header>
+        <div formArrayName="loan_details">
+            <div *ngFor="let details of currentLoanForm.get('loan_details').controls; let i=index"
+                 [formGroupName]="i">
+                <mat-card-content class="matcard">
+                    <mat-form-field>
+                        <input matInput placeholder="Loan Amount" formControlName="loan_amount">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="EMI" formControlName="emi">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Loan Type" formControlName="loan_type">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Lender" formControlName="lender">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Original Tenure" formControlName="original_tenure">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Current Balance Tenure" formControlName="current_balance_tenure">
+                    </mat-form-field>
+                    <button type="button" mat-raised-button mat-icon-button (click)="addLoanDetails()"
+                            *ngIf="i==0">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                    <button type="button" mat-raised-button mat-icon-button (click)="deleteLoanDetails(i)"
+                            *ngIf="i>0">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </mat-card-content>
+            </div>
+        </div>
+    </mat-card>
+    <button mat-raised-button type="submit" class="button" (click)="submitCurrentloan()"></button>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
new file mode 100644
index 000000000..db319b869
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.scss
@@ -0,0 +1,18 @@
+.address {
+  display: flex;
+  padding: 0 2%;
+  flex-direction: column;
+}
+
+.address > * {
+  width: 100%;
+}
+.matcard mat-form-field {
+  margin: 0 2%;
+}
+.address .button {
+  float: right;
+  width: 10px;
+  background: #62B013;
+  color: white;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts
new file mode 100644
index 000000000..2a4ad012e
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/current-loan/current-loan.component.ts
@@ -0,0 +1,93 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from "@angular/router";
+@Component({
+    selector: 'app-current-loan',
+    templateUrl: './current-loan.component.html',
+    styleUrls: ['./current-loan.component.scss']
+})
+export class CurrentLoanComponent implements OnInit {
+    public currentLoanForm: FormGroup;
+    private notifier: NotifierService;
+
+    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+                private router: Router,
+                private _pd: PdTrigerService) {
+
+    }
+    ngOnInit() {
+        this.initCurrentloanForm();
+    }
+    public initCurrentloanForm(): void {
+        this.currentLoanForm = this.fb.group({
+            existing_loan: ['', Validators.compose([Validators.required])],
+            loan_details: this.fb.array([this.createLoanDetail()])
+        });
+    }
+    createLoanDetail() {
+        return this.fb.group({
+            loan_amount: ['', Validators.compose([Validators.required])],
+            emi: ['', Validators.compose([Validators.required])],
+            loan_type: ['', Validators.compose([Validators.required])],
+            lender: ['', Validators.compose([Validators.required])],
+            original_tenure: ['', Validators.compose([Validators.required])],
+            current_balance_tenure: ['', Validators.compose([Validators.required])],
+        });
+    }
+    addLoanDetails() {
+        const control = <FormArray>this.currentLoanForm.controls['loan_details'];
+        control.push(this.createLoanDetail());
+    }
+    deleteLoanDetails(index) {
+        const control = <FormArray>this.currentLoanForm.controls['loan_details'];
+        control.removeAt(index);
+    }
+    submitCurrentloan() {
+        if (!this.currentLoanForm.valid) {
+            this.validateAllFormFields(this.currentLoanForm);
+            return;
+        }
+        let records: any = {};
+        records.pdid = '253';
+        records.formid = '253';
+        records.fk_createdby = '253';
+        records.existing_loan = this.currentLoanForm.controls['existing_loan'].value;
+        records.loan_details = this.currentLoanForm.controls['loan_details'].value;
+        console.log('data', records);
+        this._pd.saveForm(records).subscribe(data => {
+            console.log('data', data);
+            this.notifier.notify('success', 'Saved Successfully.');
+        })
+    }
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({onlySelf: true});
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
new file mode 100644
index 000000000..65b02ca59
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.html
@@ -0,0 +1,134 @@
+<p>Family</p>
+<form class="address" [formGroup]="familyForm">
+    <mat-form-field>
+        <mat-select placeholder="Person Met" formControlName="person">
+            <mat-option *ngFor="let state of filteredStates" [value]="state">
+                {{state}}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-form-field *ngIf="person.value =='Other'">
+        <input matInput placeholder="Enter the relationship" formControlName="personOther">
+    </mat-form-field>
+    <mat-form-field>
+        <input matInput placeholder="No. Of family members" formControlName="members">
+    </mat-form-field>
+    <mat-card>
+        <mat-card-header>
+            <p>Earning Members
+            <p>
+        </mat-card-header>
+        <div formArrayName="earningMembers">
+            <div *ngFor="let item of familyForm.get('earningMembers').controls; let i=index"
+                 [formGroupName]="i">
+                <mat-card-content class="matcard">
+                    <mat-form-field>
+                        <mat-select placeholder="Relation" formControlName="relation">
+                            <mat-option value="{{relation.relationship_id}}"
+                                        *ngFor="let relation of relationData">
+                                {{relation.name}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select placeholder="Segment" formControlName="segment">
+                            <mat-option value="Salaried">Salaried</mat-option>
+                            <mat-option value="SENP">SENP</mat-option>
+                            <mat-option value="SEP">SEP</mat-option>
+
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Income / Revenue"
+                               formControlName="income">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Name of Employer / Business"
+                               formControlName="employer_name">
+                    </mat-form-field>
+                    <button type="button" mat-raised-button mat-icon-button *ngIf="i==0"
+                            (click)="addearningMembers()">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                    <button type="button" mat-raised-button mat-icon-button
+                            (click)="deleteEarningMembers(i)" *ngIf="i>0">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </mat-card-content>
+            </div>
+        </div>
+    </mat-card>
+    <mat-card>
+        <mat-card-header>
+            <p>Non Earning Members
+            <p>
+        </mat-card-header>
+        <div formArrayName="nonEarningMembers">
+            <div *ngFor="let members of familyForm.get('nonEarningMembers').controls; let i=index"
+                 [formGroupName]="i">
+                <mat-card-content class="matcard">
+                    <mat-form-field>
+                        <mat-select placeholder="Relation"
+                                    formControlName="relationship">
+                            <mat-option value="{{relation.relationship_id}}"
+                                        *ngFor="let relation of relationData">
+                                {{relation.name}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <mat-select placeholder="Occupation"
+                                    formControlName="occupation">
+                            <mat-option value="{{occupation.occupation_non_earning_member_id}}"
+                                        *ngFor="let occupation of occupationData">{{occupation.name}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Retired From"
+                               formControlName="retired">
+                    </mat-form-field>
+                    <button type="button" mat-raised-button mat-icon-button (click)="addMembers()"
+                            *ngIf="i==0">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                    <button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)"
+                            *ngIf="i>0">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </mat-card-content>
+            </div>
+        </div>
+    </mat-card>
+    <mat-card>
+        <mat-card-header>
+            <p>Residence
+            <p>
+        </mat-card-header>
+        <mat-card-content class="matcard">
+            <mat-form-field>
+                <input matInput placeholder="Where is the residence"
+                       formControlName="residence">
+            </mat-form-field>
+            <mat-form-field>
+                <input matInput placeholder="No.of yrs" formControlName="years">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-select placeholder="Ownership" formControlName="ownership">
+                    <mat-option value="Self">Self Owned</mat-option>
+                    <mat-option value="Family">Family Owned</mat-option>
+                    <mat-option value="Rented">Rented</mat-option>
+                    <mat-option value="Others">Others</mat-option>
+                </mat-select>
+            </mat-form-field>
+            <mat-form-field *ngIf="ownership.value =='Others'">
+                <input matInput placeholder="Please specify" formControlName="ownershipOther">
+            </mat-form-field>
+            <mat-form-field *ngIf="ownership.value =='Rented'">
+                <input matInput placeholder="what rent"
+                       formControlName="rent">
+            </mat-form-field>
+        </mat-card-content>
+    </mat-card>
+    <button mat-raised-button class="button" (click)="submitFamily()">Submit</button>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
new file mode 100644
index 000000000..db319b869
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.scss
@@ -0,0 +1,18 @@
+.address {
+  display: flex;
+  padding: 0 2%;
+  flex-direction: column;
+}
+
+.address > * {
+  width: 100%;
+}
+.matcard mat-form-field {
+  margin: 0 2%;
+}
+.address .button {
+  float: right;
+  width: 10px;
+  background: #62B013;
+  color: white;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
new file mode 100644
index 000000000..ce812d914
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/family-details/family-details.component.ts
@@ -0,0 +1,216 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl, AbstractControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from "@angular/router";
+@Component({
+    selector: 'app-family-details',
+    templateUrl: './family-details.component.html',
+    styleUrls: ['./family-details.component.scss']
+})
+export class FamilyDetailsComponent implements OnInit {
+    public currentLoanForm: FormGroup;
+    private notifier: NotifierService;
+    public familyForm: FormGroup;
+
+    public person: AbstractControl;
+    public personOther: AbstractControl;
+    public members: AbstractControl;
+    public residence: AbstractControl;
+    public years: AbstractControl;
+    public ownership: AbstractControl;
+    public ownershipOther: AbstractControl;
+    public rent: AbstractControl;
+
+    relationData: any = [];
+    occupationData: any = [];
+    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+                private router: Router,
+                private _pd: PdTrigerService) {
+
+    }
+    ngOnInit() {
+        this.getRelation();
+        this.getOccupation();
+        this.initFamilyForm();
+        let params: any = {};
+        params.pd_id = '251';
+        params.pd_form_id = '251';
+        this._pd.retriveForm(params).subscribe(data => {
+            console.log('data', data);
+            var result = Object.keys(data.records.non_earning_members).map(function(key) {
+                return data.records.non_earning_members[key];
+            });
+            var earning = Object.keys(data.records.earning_members).map(function(key) {
+                return data.records.earning_members[key];
+            });
+            this.familyForm.controls.person.setValue(data.records.person_met);
+            this.familyForm.controls.members.setValue(data.records.family_members);
+            this.familyForm.controls.years.setValue(data.records.no_of_years);
+            this.familyForm.controls.ownership.setValue(data.records.ownership);
+            this.familyForm.controls.rent.setValue(data.records.what_rent);
+            const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
+            if (result.length == 0) {
+                control.push(this.createNonMembers());
+            } else {
+                result.forEach(datas => {
+                    control.push(this.createNonMembers());
+                });
+                this.familyForm.controls.nonEarningMembers.setValue(result);
+            }
+            const value = <FormArray>this.familyForm.controls['earningMembers'];
+            if(earning.length == 0) {
+                value.push(this.createMembers());
+            } else {
+                earning.forEach(datas => {
+                    value.push(this.createMembers());
+                });
+                this.familyForm.controls.earningMembers.setValue(earning);
+
+            }
+            this.familyForm.controls.residence.setValue(data.records.residence);
+
+        });
+    }
+    public initFamilyForm(): void {
+        this.familyForm = this.fb.group({
+            person: ['', Validators.compose([Validators.required])],
+            personOther: [''],
+            members: ['', Validators.compose([Validators.required])],
+            residence: ['', Validators.compose([Validators.required])],
+            years: ['', Validators.compose([Validators.required])],
+            ownership: ['', Validators.compose([Validators.required])],
+            ownershipOther: [''],
+            rent: [''],
+            earningMembers: this.fb.array([]),
+            nonEarningMembers: this.fb.array([])
+        });
+        this.person = this.familyForm.controls['person'];
+        this.personOther = this.familyForm.controls['personOther'];
+        this.members = this.familyForm.controls['members'];
+        this.residence = this.familyForm.controls['residence'];
+        this.years = this.familyForm.controls['years'];
+        this.ownership = this.familyForm.controls['ownership'];
+        this.ownershipOther = this.familyForm.controls['ownershipOther'];
+        this.rent = this.familyForm.controls['rent'];
+    }
+    createMembers(): FormGroup {
+        return this.fb.group({
+            relation: ['', Validators.compose([Validators.required])],
+            segment: ['', Validators.compose([Validators.required])],
+            income: ['', Validators.compose([Validators.required])],
+            employer_name: ['', Validators.compose([Validators.required])],
+        });
+    }
+    createNonMembers(): FormGroup {
+        return this.fb.group({
+            relationship: ['', Validators.compose([Validators.required])],
+            occupation: ['', Validators.compose([Validators.required])],
+            retired: ['', Validators.compose([Validators.required])],
+        });
+    }
+
+    addearningMembers() {
+        const control = <FormArray>this.familyForm.controls['earningMembers'];
+        control.push(this.createMembers());
+    }
+    addMembers() {
+        const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
+        control.push(this.createNonMembers());
+    }
+    deleteEarningMembers(index) {
+        const control = <FormArray>this.familyForm.controls['earningMembers'];
+        control.removeAt(index);
+    }
+    deleteMembers(index) {
+        const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
+        control.removeAt(index);
+    }
+
+
+    getRelation() {
+        let master_name = 'RELATIONSHIPS';
+        this._pd.getAllMasterDatas(master_name).subscribe(data => {
+            console.log('data', data);
+            data.records.forEach(val => {
+                if (val.isactive == 1) {
+                    this.relationData.push(val);
+                }
+            })
+        });
+    }
+    getOccupation() {
+        let master_name = 'OCCUPATIONMEMBERS';
+        this._pd.getAllMasterDatas(master_name).subscribe(data => {
+            console.log('data', data);
+            data.records.forEach(val => {
+                if (val.isactive == 1) {
+                    this.occupationData.push(val);
+                }
+            })
+        });
+    }
+    submitFamily() {
+        if (!this.familyForm.valid) {
+            this.validateAllFormFields(this.familyForm);
+            return;
+        }
+        console.log('data', this.familyForm.value);
+        let records: any = {};
+        records.no_of_years = this.years.value;
+        if (this.ownership.value == 'Others') {
+            records.ownership = this.ownershipOther.value;
+        } else {
+            records.ownership = this.ownership.value;
+        }
+        records.residence = this.residence.value;
+        if (this.ownership.value == 'Rented') {
+            records.what_rent = this.rent.value;
+        }
+        if (this.person.value == 'Other') {
+            records.person_met = this.personOther.value;
+        } else {
+            records.person_met = this.person.value;
+        }
+        records.family_members = this.members.value;
+        records.earning_members = this.familyForm.controls['earningMembers'].value;
+        records.non_earning_members = this.familyForm.controls['nonEarningMembers'].value;
+        records.pdid = '251';
+        records.formid = '251';
+        records.fk_createdby = '251';
+        console.log('params', records);
+        this._pd.saveForm(records).subscribe(data => {
+            console.log('data', data);
+            this.notifier.notify('success', 'Saved Successfully.');
+        })
+    }
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({onlySelf: true});
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
new file mode 100644
index 000000000..617e657ef
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.html
@@ -0,0 +1,48 @@
+<form [formGroup]="loanDetailsForm" class="address">
+    <mat-form-field>
+        <input matInput placeholder="Loan Amount applied" formControlName="loan_amount">
+    </mat-form-field>
+    <mat-form-field>
+        <mat-select placeholder="What is the end use"
+                    formControlName="other_income">
+            <mat-option value="Yes">Yes</mat-option>
+            <mat-option value="No">No</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
+        <mat-card-header>
+            <p>Loan Details<p>
+        </mat-card-header>
+        <div formArrayName="income_details">
+            <div *ngFor="let details of otherIncomeForm.get('income_details').controls; let i=index"
+                 [formGroupName]="i">
+                <mat-card-content class="matcard">
+                    <mat-form-field>
+                        <mat-select placeholder="Source"
+                                    formControlName="source">
+                            <mat-option value="rental_income">Rental Income</mat-option>
+                            <mat-option value="interest_income">Interest Income</mat-option>
+                            <mat-option value="agricultural_income">Agricultural Income</mat-option>
+                            <mat-option value="dividend_income">Dividend Income and Others</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Amount" formControlName="amount">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Frequency" formControlName="frequency">
+                    </mat-form-field>
+                    <button type="button" mat-raised-button mat-icon-button (click)="addIncomeDetails()"
+                            *ngIf="i==0">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                    <button type="button" mat-raised-button mat-icon-button (click)="deleteIncomeDetails(i)"
+                            *ngIf="i>0">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </mat-card-content>
+            </div>
+        </div>
+    </mat-card>
+    <button type="submit" (click)="submitCurrentDetails()"></button>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
new file mode 100644
index 000000000..db319b869
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.scss
@@ -0,0 +1,18 @@
+.address {
+  display: flex;
+  padding: 0 2%;
+  flex-direction: column;
+}
+
+.address > * {
+  width: 100%;
+}
+.matcard mat-form-field {
+  margin: 0 2%;
+}
+.address .button {
+  float: right;
+  width: 10px;
+  background: #62B013;
+  color: white;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
new file mode 100644
index 000000000..9bc956f27
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/loan-details/loan-details.component.ts
@@ -0,0 +1,103 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from '@angular/router';
+@Component({
+    selector: 'app-loan-details',
+    templateUrl: './loan-details.component.html',
+    styleUrls: ['./loan-details.component.scss']
+})
+export class LoanDetailsComponent implements OnInit {
+    public loanDetailsForm: FormGroup;
+    private notifier: NotifierService;
+    frequencyData: any;
+
+    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+                private router: Router,
+                private _pd: PdTrigerService) {
+
+    }
+    ngOnInit() {
+        this.initloanDetailsForm();
+        // this.getFrequency();
+    }
+    public initloanDetailsForm(): void {
+        this.loanDetailsForm = this.fb.group({
+            other_income: ['', Validators.compose([Validators.required])],
+            // income_details: this.fb.array([this.createDetail()])
+        });
+    }
+    // createDetail() {
+    //     return this.fb.group({
+    //         source: ['', Validators.compose([Validators.required])],
+    //         amount: ['', Validators.compose([Validators.required])],
+    //         frequency: ['', Validators.compose([Validators.required])],
+    //     });
+    // }
+    // getFrequency() {
+    //     let master_name = 'FREQUENCY';
+    //     this._pd.getAllMasterDatas(master_name).subscribe(data => {
+    //         console.log('data', data);
+    //         data.records.forEach(val => {
+    //             if (val.isactive == 1) {
+    //                 this.frequencyData.push(val);
+    //             }
+    //         })
+    //     });
+    // }
+    // addIncomeDetails() {
+    //     const control = <FormArray>this.otherIncomeForm.controls['income_details'];
+    //     control.push(this.createDetail());
+    // }
+    // deleteIncomeDetails(index) {
+    //     const control = <FormArray>this.otherIncomeForm.controls['income_details'];
+    //     control.removeAt(index);
+    // }
+    // submitCurrentDetails() {
+    //     if (!this.otherIncomeForm.valid) {
+    //         this.validateAllFormFields(this.otherIncomeForm);
+    //         return;
+    //     }
+    //     let records: any = {};
+    //     records.pdid = '25‎4';
+    //     records.formid = '25‎4';
+    //     records.fk_createdby = '25‎4';
+    //     records.other_income = this.otherIncomeForm.controls['other_income'].value;
+    //     records.income_details = this.otherIncomeForm.controls['income_details'].value;
+    //     console.log('data', records);
+    //     this._pd.saveForm(records).subscribe(data => {
+    //         console.log('data', data);
+    //         this.notifier.notify('success', 'Saved Successfully.');
+    //     })
+    // }
+    // validateAllFormFields(formGroup: FormGroup) {
+    //     Object.keys(formGroup.controls).forEach(field => {
+    //         const control = formGroup.get(field);
+    //         if (control instanceof FormControl) {
+    //             control.markAsTouched({onlySelf: true});
+    //         } else if (control instanceof FormGroup) {
+    //             this.validateAllFormFields(control);
+    //         }
+    //     });
+    // }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
new file mode 100644
index 000000000..25e8e81af
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.html
@@ -0,0 +1,45 @@
+<form [formGroup]="otherIncomeForm" class="address">
+    <mat-form-field>
+        <mat-select placeholder="Other Income"
+                    formControlName="other_income">
+            <mat-option value="Yes">Yes</mat-option>
+            <mat-option value="No">No</mat-option>
+        </mat-select>
+    </mat-form-field>
+    <mat-card *ngIf="currentLoanForm.controls.existing_loan.value == 'Yes'">
+        <mat-card-header>
+            <p>Loan Details<p>
+        </mat-card-header>
+        <div formArrayName="income_details">
+            <div *ngFor="let details of otherIncomeForm.get('income_details').controls; let i=index"
+                 [formGroupName]="i">
+                <mat-card-content class="matcard">
+                    <mat-form-field>
+                        <mat-select placeholder="Source"
+                                    formControlName="source">
+                            <mat-option value="rental_income">Rental Income</mat-option>
+                            <mat-option value="interest_income">Interest Income</mat-option>
+                            <mat-option value="agricultural_income">Agricultural Income</mat-option>
+                            <mat-option value="dividend_income">Dividend Income and Others</mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Amount" formControlName="amount">
+                    </mat-form-field>
+                    <mat-form-field>
+                        <input matInput placeholder="Frequency" formControlName="frequency">
+                    </mat-form-field>
+                    <button type="button" mat-raised-button mat-icon-button (click)="addIncomeDetails()"
+                            *ngIf="i==0">
+                        <mat-icon>add</mat-icon>
+                    </button>
+                    <button type="button" mat-raised-button mat-icon-button (click)="deleteIncomeDetails(i)"
+                            *ngIf="i>0">
+                        <mat-icon>close</mat-icon>
+                    </button>
+                </mat-card-content>
+            </div>
+        </div>
+    </mat-card>
+    <button type="submit" (click)="submitCurrentDetails()"></button>
+</form>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
new file mode 100644
index 000000000..db319b869
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.scss
@@ -0,0 +1,18 @@
+.address {
+  display: flex;
+  padding: 0 2%;
+  flex-direction: column;
+}
+
+.address > * {
+  width: 100%;
+}
+.matcard mat-form-field {
+  margin: 0 2%;
+}
+.address .button {
+  float: right;
+  width: 10px;
+  background: #62B013;
+  color: white;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts
new file mode 100644
index 000000000..72a564b11
--- /dev/null
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/other-income/other-income.component.ts
@@ -0,0 +1,103 @@
+import {
+    Component,
+    OnInit,
+    Inject,
+    Input
+} from '@angular/core';
+
+import {
+    FormBuilder,
+    FormGroup,
+    Validators,
+    FormArray, FormControl,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+    MatDialog,
+    MatDialogRef,
+    MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
+import {ActivatedRoute, Router} from '@angular/router';
+@Component({
+    selector: 'app-other-income',
+    templateUrl: './other-income.component.html',
+    styleUrls: ['./other-income.component.scss']
+})
+export class OtherIncomeComponent implements OnInit {
+    public otherIncomeForm: FormGroup;
+    private notifier: NotifierService;
+    frequencyData: any;
+
+    constructor(notifier: NotifierService, private fb: FormBuilder, private route: ActivatedRoute,
+                private router: Router,
+                private _pd: PdTrigerService) {
+
+    }
+    ngOnInit() {
+        this.initOtherincomeForm();
+        this.getFrequency();
+    }
+    public initOtherincomeForm(): void {
+        this.otherIncomeForm = this.fb.group({
+            other_income: ['', Validators.compose([Validators.required])],
+            income_details: this.fb.array([this.createDetail()])
+        });
+    }
+    createDetail() {
+        return this.fb.group({
+            source: ['', Validators.compose([Validators.required])],
+            amount: ['', Validators.compose([Validators.required])],
+            frequency: ['', Validators.compose([Validators.required])],
+        });
+    }
+    getFrequency() {
+        let master_name = 'FREQUENCY';
+        this._pd.getAllMasterDatas(master_name).subscribe(data => {
+            console.log('data', data);
+            data.records.forEach(val => {
+                if (val.isactive == 1) {
+                    this.frequencyData.push(val);
+                }
+            })
+        });
+    }
+    addIncomeDetails() {
+        const control = <FormArray>this.otherIncomeForm.controls['income_details'];
+        control.push(this.createDetail());
+    }
+    deleteIncomeDetails(index) {
+        const control = <FormArray>this.otherIncomeForm.controls['income_details'];
+        control.removeAt(index);
+    }
+    submitCurrentDetails() {
+        if (!this.otherIncomeForm.valid) {
+            this.validateAllFormFields(this.otherIncomeForm);
+            return;
+        }
+        let records: any = {};
+        records.pdid = '25‎4';
+        records.formid = '25‎4';
+        records.fk_createdby = '25‎4';
+        records.other_income = this.otherIncomeForm.controls['other_income'].value;
+        records.income_details = this.otherIncomeForm.controls['income_details'].value;
+        console.log('data', records);
+        this._pd.saveForm(records).subscribe(data => {
+            console.log('data', data);
+            this.notifier.notify('success', 'Saved Successfully.');
+        })
+    }
+    validateAllFormFields(formGroup: FormGroup) {
+        Object.keys(formGroup.controls).forEach(field => {
+            const control = formGroup.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({onlySelf: true});
+            } else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+}
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
index 3527ddf35..36b5e52f7 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.html
@@ -1,3 +1,124 @@
-<p>
-  personal-info works!
-</p>
+    <form *ngIf="loadDataStatus" [formGroup]="_personalForm" (submit)="submitPersonalForm(_personalForm.value)">
+
+        <mat-card-content> 
+             <!-- start main applicant details -->
+        
+      <div fxLayout="row wrap">
+		
+            <div fxFlex="50" class="text-xs-left">
+                 
+                  <mat-card>
+                      <mat-card-title>Main Applicant</mat-card-title>
+                    <mat-card-content>
+                     <div [formArrayName]="'mainItem'" *ngFor="let mainDetails of pdMainapplicant.controls; let i = index;">
+                        <div [formGroup]="mainDetails">
+  
+                              <mat-form-field style="width: 100%">
+                                      <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
+                                  </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+            
+                                          <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
+                                      </mat-form-field>
+                                      <mat-form-field style="width: 100%">
+            
+                                          <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
+                                      </mat-form-field>
+                                      <mat-form-field style="width: 100%">
+            
+                                          <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
+                                              <mat-option *ngFor="let education of qualifications" [value]="education" >
+                                              {{education}}
+                                              </mat-option>
+                                      </mat-select>
+                                      
+                                        </mat-form-field>
+                                      <mat-form-field style="width: 100%">
+                                          <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
+                                              <mat-option *ngFor="let earning of earningStatus" [value]="earning" >
+                                              {{earning}}
+                                              </mat-option>
+                                      </mat-select>
+                                        </mat-form-field>
+                          </div>   
+                    </div>
+                     
+                      </mat-card-content>
+                  </mat-card>
+                  
+  
+               </div>
+            
+          
+        <!-- end main applicant details -->
+  
+        <!-- start co applicant form details -->
+        <div fxFlex="50" class="text-xs-left" [formArrayName]="'coItem'" *ngFor="let coDetails of pdCoapplicant.controls; let i = index;">
+                 
+              <mat-card>
+                  <mat-card-title>Co Applicant</mat-card-title>
+                <mat-card-content>
+                 <div >
+                    <div [formGroup]="coDetails">
+                          <mat-form-field style="width: 100%">
+                                  <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                  <input matInput placeholder="Name" formControlName="name_ans" type="text" required>
+                              </mat-form-field>
+                              <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+        
+                                      <input matInput placeholder="Age" formControlName="age_ans" type="text" required>
+                                  </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+        
+                                      <input matInput placeholder="Entity" formControlName="entity_ans" type="text" required>
+                                  </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+        
+                                      <mat-select placeholder="Educational Qualification" formControlName="qualification_ans" required>
+                                          <mat-option *ngFor="let education of qualifications" [value]="education" >
+                                          {{education}}
+                                          </mat-option>
+                                  </mat-select>
+                                  
+                                    </mat-form-field>
+                                  <mat-form-field style="width: 100%">
+                                      <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                      <mat-select placeholder="Earning Status" formControlName="earning_ans" required>
+                                          <mat-option *ngFor="let earning of earningStatus" [value]="earning" >
+                                          {{earning}}
+                                          </mat-option>
+                                  </mat-select>
+                                    </mat-form-field>
+                                    <mat-form-field style="width: 100%">
+                                          <!-- <mat-label>{{coDetails.controls.pd_question.value}}</mat-label> -->
+                                          <mat-select placeholder="Relationship" formControlName="relation_ans" required>
+                                                  <mat-option *ngFor="let rel of relationShipList" [value]="rel.relationship_id" >
+                                                          {{rel.name}}
+                                                          </mat-option>
+                                      </mat-select>
+                                        </mat-form-field>
+                      </div>   
+                </div>
+                
+                 
+                  </mat-card-content>
+                  
+              </mat-card>
+              
+  
+           </div>
+  
+           </div>
+        <!-- end co applicant form details -->
+        </mat-card-content>
+     
+      <mat-card-actions>
+          <div  fxFlexOffset="90" fxFlex="10" style="text-align:left;">
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="submit" matTooltip="Save" matTooltipPosition="above" [disabled]="!_personalForm.valid "><mat-icon>save</mat-icon></button>
+        </div>
+    </mat-card-actions>
+
+      </form>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
index e69de29bb..776d000ca 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.scss
@@ -0,0 +1,6 @@
+.mat-card-content {
+    background-color: white;
+  }
+  .mat-card-actions {
+    background-color: white;
+  }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
index 75070f4db..9dad2e46c 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/personal-info/personal-info.component.ts
@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit , Input, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
+import { NotifierService } from 'angular-notifier';
+import { PdTrigerService } from './../../../../../pd-service/pd-triger.service';
+import { Key } from 'protractor';
 
 @Component({
   selector: 'app-personal-info',
@@ -7,9 +11,245 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PersonalInfoComponent implements OnInit {
 
-  constructor() { }
+  qualifications:any=["Graduate","Under Graduate","Post Graduate","Professional"];
+  earningStatus:any=["Earning Member","House Wife","Student","Retired","Pensioner","Other Non earning member"];
+  relationShipList:any=[];
+  @Input() pdid : string;
+  @Input() pd_all_details:any;
+  form_id:number;
+  private notifier: NotifierService;
+  public _personalForm: FormGroup;
+
+  public mainApplicantQuestions : any = ["Name","Age","Entity","Educational Qualification","Earning Status"];
+  public coApplicantQuestions : any = ["Name","Age","Entity","Educational Qualification","Earning Status","Relationship"];
+  
+  public mainApplicantDetails :any=[];
+  public coApplicantDetails :any=[];
+  
+  errorMessage:any;
+  //coItem:any;
+  //mainItem:any;
+
+  repeat:number=3;
+
+ constructor(notifier: NotifierService,private _fb: FormBuilder,private _pd: PdTrigerService) { 
+   this.notifier = notifier;
+   this.form_id = 3;
+ }
 
   ngOnInit() {
+  
+    this.loadPDDetails(this.pdid,this.form_id);
+    this.getRelationMaster();
+    this.mainApplicantDetails = this.pd_all_details.pdapplicants_detials.filter(item => item.applicant_type == 1);
+   // console.log(this.mainApplicantDetails)
+    this.coApplicantDetails = this.pd_all_details.pdapplicants_detials.filter(item => item.applicant_type == 0);
+     }
+
+  // load form pd details
+  loadPDDetails(pd:string,form:number){
+   
+    this._pd.getPDFormDetailsWithID(this.pdid,this.form_id).subscribe(
+      data => {
+        if (data.status == 200) {
+          this.loadFormWithIDData(data.records);
+        
+        }
+        else if(data.status == 204){
+          let defaultMainApp=[];
+          let defaultCoApp=[];
+          // generate  default main applicant form details
+          if(this.mainApplicantDetails.length>0){            
+            for(let j=0;j<this.mainApplicantQuestions.length; j++)
+          {
+            if(j==0){
+              let generateRow = {
+                "pd_question":"",
+                "pd_answer": this.mainApplicantDetails[0].applicant_name,
+              }
+              defaultMainApp.push(generateRow);
+            }
+            else{
+              let generateRow = {
+                "pd_question":"",
+                "pd_answer": "",
+              }
+              defaultMainApp.push(generateRow);
+            }
+           
+            
+          }
+          }
+          this.loadFormData(defaultMainApp,this.coApplicantDetails);
+
+
+        }
+  }, error => this.errorMessage = <any> error);
+}
+
+loadDataStatus: boolean;
+
+loadFormWithIDData(data) {
+  var main_result = Object.keys(data.main_applicant_details).map(function(key) {
+  return data.main_applicant_details[key];
+});
+var co_result = Object.keys(data.co_applicant_details).map(function(key) {
+  return data.co_applicant_details[key];
+});
+
+  // main applicant
+    let mainApplicantGroup = new FormArray(main_result.map((item,key) => new FormGroup({
+      name_ans:new FormControl(item.name_ans, Validators.required),
+      age_ans:new FormControl(item.age_ans, Validators.required),
+      entity_ans:new FormControl(item.entity_ans, Validators.required),
+      qualification_ans:new FormControl(item.qualification_ans, Validators.required),
+      earning_ans:new FormControl(item.earning_ans, Validators.required),
+    })));
+    // co applicant
+    let iterateCoApp=[];
+      
+      let coApplicantGroup = new FormArray(co_result.map((item,key) => new FormGroup({
+        name_ans:new FormControl(item.name_ans, Validators.required),
+        age_ans:new FormControl(item.age_ans, Validators.required),
+        entity_ans:new FormControl(item.entity_ans, Validators.required),
+        qualification_ans:new FormControl(item.qualification_ans, Validators.required),
+        earning_ans:new FormControl(item.earning_ans, Validators.required),
+        relation_ans:new FormControl(item.relation_ans, Validators.required),
+
+      })));
+    
+    this._personalForm = this._fb.group({
+      pdid:null,
+      form_id:null,
+      mainItem: mainApplicantGroup,
+      coItem: coApplicantGroup,
+    });
+    //console.log(this._personalForm);
+    this.loadDataStatus = true;
+}
+
+  loadFormData(mainApp,coApp){
+    // main applicant
+    let mainApplicantGroup = new FormArray(this.mainApplicantDetails.map((item,key) => new FormGroup({
+      name_ques:new FormControl(this.mainApplicantQuestions[0]),
+      name_ans:new FormControl(item.applicant_name, Validators.required),
+      name_id:new FormControl(0),
+      age_ques:new FormControl(this.mainApplicantQuestions[1]),
+      age_id:new FormControl(1),
+      age_ans:new FormControl(null, Validators.required),
+      entity_ques: new FormControl(this.mainApplicantQuestions[2]),
+      entity_id: new FormControl(2),
+      entity_ans:new FormControl(null, Validators.required),
+      qualification_ques: new FormControl(this.mainApplicantQuestions[3]),
+      qualification_id: new FormControl(3),
+      qualification_ans:new FormControl(null, Validators.required),
+      earningStatus_ques:new FormControl(this.mainApplicantQuestions[4]),
+      earning_id: new FormControl(4),
+      earning_ans:new FormControl(null, Validators.required),
+   
+    })));
+    // co applicant
+    let iterateCoApp=[];
+      
+      let coApplicantGroup = new FormArray(this.coApplicantDetails.map((item,key) => new FormGroup({
+        name_ques:new FormControl(this.coApplicantQuestions[0]),
+        name_ans:new FormControl(item.applicant_name, Validators.required),
+        name_id:new FormControl(0),
+        age_ques:new FormControl(this.coApplicantQuestions[1]),
+        age_id:new FormControl(1),
+        age_ans:new FormControl(null, Validators.required),
+        entity_ques: new FormControl(this.coApplicantQuestions[2]),
+        entity_id: new FormControl(2),
+        entity_ans:new FormControl(null, Validators.required),
+        qualification_ques: new FormControl(this.coApplicantQuestions[3]),
+        qualification_id: new FormControl(3),
+        qualification_ans:new FormControl(null, Validators.required),
+        earningStatus_ques:new FormControl(this.coApplicantQuestions[4]),
+        earning_id: new FormControl(4),
+        earning_ans:new FormControl(null, Validators.required),
+        relationShip_ques:new FormControl(this.coApplicantQuestions[5]),
+        relation_id:new FormControl(5),
+        relation_ans:new FormControl(null, Validators.required),
+
+      })));
+    
+    this._personalForm = this._fb.group({
+      pdid:null,
+      form_id:null,
+      mainItem: mainApplicantGroup,
+      coItem: coApplicantGroup,
+    });
+    //console.log(this._personalForm);
+this.loadDataStatus = true;
   }
 
+  //get pd main applicant array values 
+  get pdMainapplicant() { return this._personalForm.get('mainItem') as FormArray; }
+
+  // get pd co applicant array values
+  get pdCoapplicant() {return this._personalForm.get('coItem') as FormArray;}
+
+ // get relation master details
+ getRelationMaster(){
+  let relation ="RELATIONSHIPS";
+  this._pd.getAllMasterDatas(relation).subscribe(
+    data => {
+      if (data.status == 200) {
+       this.relationShipList=data.records;
+  
+      }
+}, error => this.errorMessage = <any> error);
+}
+
+// submit forms details
+submitPersonalForm(formData:any) {
+  if(this._personalForm.valid){
+      let main_applicantDetails:any=[];
+       let co_applicantDetails:any=[];
+
+      formData.mainItem.forEach((element,key) => {
+        if(key==0){
+          main_applicantDetails.push({
+            "name_ans":element.name_ans,
+            "age_ans":element.age_ans,
+            "entity_ans":element.entity_ans,
+            "qualification_ans":element.qualification_ans,
+            "earning_ans":element.earning_ans,  
+          })
+        }
+        
+      });
+      formData.coItem.forEach((Coelement,Cokey) => {
+        co_applicantDetails.push({
+
+          "name_ans":Coelement.name_ans,
+          "age_ans":Coelement.age_ans,
+          "qualification_ans":Coelement.qualification_ans,
+          "entity_ans":Coelement.entity_ans,
+          "earning_ans":Coelement.earning_ans, 
+          "relation_ans":Coelement.relation_ans, 
+        })
+        
+      });
+
+   let save_details:any={
+  "pdid": this.pdid,
+  "formid": this.form_id,
+  "main_applicant_details":main_applicantDetails,
+  "co_applicant_details":co_applicantDetails
+   };
+   this._pd.savePDFormDetailsWithID(save_details).subscribe(result => {
+    if (result.status == 200) {
+      this.notifier.notify('success', 'Success.');
+    }
+    else {
+      this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+    }
+  }, error => {
+    this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+  });
+  }
+}
+
+
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
index 7fbdf4049..b244be4e3 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.html
@@ -1,3 +1,96 @@
-<p>
-  supplier-info works!
-</p>
+<!--<pre> {{ m_group | json}}</pre>-->
+<mat-card style="padding: 12px;">
+  <p>Supplier Details</p>
+  <form *ngIf="apiLoadFinish" [formGroup]="_supplierQuesFrom" (submit)="onSubmit()" novalidate>
+    <div fxLayout="row" fxLayoutAlign="start none">
+      <div class="example-full-width">
+        <mat-form-field fxFill>
+          <textarea matInput placeholder="What are the main Raw materials?(MEG Only)" formControlName="main_raw_materials"></textarea>
+          <mat-error *ngIf="submitted && f.main_raw_materials.hasError('required')" class="mat-text-warn">You must Include Raw Material Details.</mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+    <div fxLayout="row" fxLayoutAlign="start none">
+      <div formArrayName="supplier_details" fxFill>
+        
+              <div *ngFor="let sup of _supplierQuesFrom.controls.supplier_details['controls']; let i=index">
+                  <mat-card>
+                      <mat-card-content> 
+                <div [formGroupName]="i">
+                    <div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
+                      <div fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Supplier Name" formControlName="supplier_name">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                      <div fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Contact Person Name" formControlName="contact_person">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                      <div fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Contact Mobile Number" formControlName="mobile_number">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                    </div>
+                    <div fxLayout="row wrap" fxLayoutGap="14px" fxLayoutAlign="start none">
+                      <div fxFlex="30">
+                        <mat-form-field style="width:260px !important;">
+                          <mat-select (selectionChange)="selectedPM($event)" placeholder="Select Payment Mode" formControlName="payment_mode">
+                            <mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                      </div>
+                      <div *ngIf="sup.get('payment_mode').value == 1 ||  sup.get('payment_mode').value == 3" fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width" >
+                          <input matInput placeholder="% of immediate / Advance Payment Purchase to Total Purchase?" formControlName="per_of_immediate_advance_payment">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                      <div *ngIf="sup.get('payment_mode').value == 2  || sup.get('payment_mode').value == 3" fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Credit Period" formControlName="credit_period">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+                    </div>
+                    <div fxLayout="row" fxLayoutGap="14px" fxLayoutAlign="start none">
+                      <div fxFlex="30">
+                        <mat-form-field style="width:260px !important;">
+                          <mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
+                            <mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.id">{{ feq.name }}</mat-option>
+                          </mat-select>
+                        </mat-form-field>
+                      </div>
+                      <div *ngIf="sup.get('frequency_of_purchase').value == 8" fxFlex="30">
+                        <mat-form-field class="ml-xs example-full-width">
+                          <input matInput placeholder="Others Details" formControlName="freq_purchase_others_text_value">
+                          <!--<mat-error *ngIf="submitted && f.supplier_name.hasError('required')" class="mat-text-warn">You must Include Supplier Name.</mat-error>-->
+                        </mat-form-field>
+                      </div>
+        
+                      <div fxFlex="30" style="text-align:center;">
+                        <span *ngIf="_supplierQuesFrom.controls.supplier_details.controls.length > 1" (click)="removeLanguage(i)">
+                             <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" color="primary" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
+                           </span>
+                      </div>
+                    </div>
+                  </div>
+               
+          </mat-card-content>
+        </mat-card>
+      </div>
+        <button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Supplier Details" matTooltipPosition="above"
+          class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
+      </div>
+    </div>
+    <div class="row" style="text-align:right;">
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
+      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
+    </div>
+  </form>
+</mat-card>
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
index e69de29bb..890847551 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.scss
@@ -0,0 +1,3 @@
+.example-full-width{
+    width : 100%;
+}
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
index 8f91281d8..3a2f64e99 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/supplier-info/supplier-info.component.ts
@@ -1,15 +1,261 @@
-import { Component, OnInit } from '@angular/core';
+/** Common Imports */
+import {
+  Component,
+  OnInit,
+  Inject,
+  Input
+} from '@angular/core';
 
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  FormArray,
+} from '@angular/forms';
+
+import { NotifierService } from 'angular-notifier';
+
+import {
+  MatDialog,
+  MatDialogRef,
+  MAT_DIALOG_DATA
+} from '@angular/material';
+/** Service */
+import { PdTrigerService } from '../../../../../pd-service/pd-triger.service';
 @Component({
   selector: 'app-supplier-info',
   templateUrl: './supplier-info.component.html',
   styleUrls: ['./supplier-info.component.scss']
 })
 export class SupplierInfoComponent implements OnInit {
+ 
+  @Input() pdid: number;
 
-  constructor() { }
+  public _supplierQuesFrom: FormGroup;
+  public submitted = false;
+  public m_paymentModeType= [
+    {
+      'id': "1",
+      'name': 'Immediate Or Advanced Payment'
+    },
+    {
+      'id': "2",
+      'name': 'Credit'
+    },
+    {
+      'id': "3",
+      'name': 'Combination of Both'
+    },
+  ];
+
+  public m_freqOfPurchase= [
+    {
+      'id': "1",
+      'name': 'Daily'
+    },
+    {
+      'id': "2",
+      'name': 'Weekly'
+    },
+    {
+      'id': "3",
+      'name': 'Monthly'
+    },
+    {
+      'id': "4",
+      'name': 'Every 3 months'
+    },
+    {
+      'id': "5",
+      'name': 'Half yearly'
+    },
+    {
+      'id': "6",
+      'name': 'Yearly'
+    },
+    {
+      'id': "7",
+      'name': 'As and when required'
+    },
+    {
+      'id': "8",
+      'name': 'Others'
+    }
+  ]
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private pdTrigerService: PdTrigerService) { }
 
   ngOnInit() {
+  
+    this.getPdSupplierFormDetails();
+  }
+apiLoadFinish: boolean = false;
+  getPdSupplierFormDetails() {
+    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '1').subscribe(
+          data => {
+            if (data) {
+                if(data.dataStatus){
+                  this.formLoadData(data.records)
+                } else {
+                  this.formLoadData(null)
+                }
+                this.apiLoadFinish = true;
+            } else {
+              // this.noRecordFound = true;
+            }
+      }
+    );
   }
 
+  formLoadData(val) {
+    if(val !== null) {
+      let value = val;
+       this._supplierQuesFrom = this._formBuilder.group({
+          pdid: [this.pdid],
+          formid: ['1'],
+          main_raw_materials: [value.main_raw_materials, Validators.compose([Validators.required])],
+          supplier_details: this._formBuilder.array([
+            // this.initDetails(),
+        ])
+      });
+      this.addSupplierDetailsWithData(value.supplier_details);
+    } else {
+      this._supplierQuesFrom = this._formBuilder.group({
+          pdid: [this.pdid],
+          formid: ['1'],
+          main_raw_materials: [null, Validators.compose([Validators.required])],
+          supplier_details: this._formBuilder.array([
+            this.initDetails(),
+        ])
+      });
+    }
+  }
+
+   // convenience getter for easy access to form fields
+  get f() { return this._supplierQuesFrom.controls; }
+
+  // Dynamic Form field creation Functionality : START ===>
+  initDetails() {
+    return this._formBuilder.group({
+      supplier_name: ['', Validators.compose([Validators.required])],
+      contact_person: ['', Validators.compose([Validators.required])],
+      mobile_number: ['', Validators.compose([Validators.required])],
+      payment_mode: ['',  Validators.compose([Validators.required])],
+      per_of_immediate_advance_payment:[''],
+      credit_period:[''],
+      frequency_of_purchase: ['', Validators.compose([Validators.required])],
+      freq_purchase_others_text_value: ['']
+    });
+  }
+
+  initDetailsWithdata(data) {
+    return this._formBuilder.group({
+      supplier_name: [data.supplier_name, Validators.compose([Validators.required])],
+      contact_person: [data.contact_person, Validators.compose([Validators.required])],
+      mobile_number: [data.mobile_number, Validators.compose([Validators.required])],
+      payment_mode: [data.payment_mode,  Validators.compose([Validators.required])],
+      per_of_immediate_advance_payment:[data.per_of_immediate_advance_payment || ''],
+      credit_period:[data.credit_period || ''],
+      frequency_of_purchase: [data.frequency_of_purchase, Validators.compose([Validators.required])],
+      freq_purchase_others_text_value: [data.freq_purchase_others_text_value || '']
+    });
+  }
+
+  addSupplierDetailsWithData(supp_data) {
+
+var result = Object.keys(supp_data).map(function(key) {
+  return supp_data[key];
+});
+      if (result.length > 0) {
+      for (let val of result) {
+        let vals = {
+          supplier_name: val.supplier_name,
+          contact_person: val.contact_person,
+          mobile_number: val.mobile_number,
+          payment_mode: val.payment_mode,
+          per_of_immediate_advance_payment: val.per_of_immediate_advance_payment,
+          credit_period: val.credit_period,
+          frequency_of_purchase: val.frequency_of_purchase,
+          freq_purchase_others_text_value: val.freq_purchase_others_text_value
+        };
+        const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
+        control.push(this.initDetailsWithdata(vals));
+      }
+    }
+  }
+
+  addSupplierDetails(e) {
+    const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
+    control.push(this.initDetails());
+  }
+  removeLanguage(i: number) {
+    const control = <FormArray>this._supplierQuesFrom.controls['supplier_details'];
+    control.removeAt(i);
+  }
+
+  public paymentModeTextBox: number;
+  selectedPM(e) {
+    this.paymentModeTextBox = e.value;
+    // this.f.supplier_details.controls.get('payment_mode_value');
+  }
+ 
+  public freqPurchaseTextBox: number;
+  selectedFreqPurchase(e){
+     this.freqPurchaseTextBox = e.value;
+  }
+
+  
+  /** To Save/Edited Popup Data */
+  onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this._supplierQuesFrom.invalid) {
+      return;
+    } else {
+      var answerFormValues = this._supplierQuesFrom.value;
+
+      //To Remove The "Null" With Key also
+      Object.keys(answerFormValues).forEach((key) => (answerFormValues[key] == null) && delete answerFormValues[key]);
+      alert(JSON.stringify(answerFormValues));
+      //Add BRANCH data with help Service File
+      this.pdTrigerService.savePDFormDetailsWithID(answerFormValues).subscribe(
+        dataresult => {
+          if (dataresult.status == 200) {
+            // console.log(dataresult);
+            // this.notifier.notify('success', 'Record Saved Successfully.!');
+            // this.dialogRef.close();
+            // alert("sample alert for Saving");
+          }
+          else {
+            // this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+            // this.errorMessage = "Some Thing Wents Wrong Try Again !";
+          }
+        }, error => {
+          // this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
+          // this.errorMessage = "Something Wents Wrong Try Again !";
+          // this.dialogRef.close();
+        });
+      //After Saving the BRANCH data then popup close
+      // this.dialogRef.close();
+    }
+  }
+
+  /** To Reset Popup Data */
+  onReset() {
+    // this._addQuesFrom.reset();
+  }
+
+  // {
+  //   'main_raw_materials': 'sdkjfal',
+  //   'supplier_details' ; [
+  //     {
+  //       'supplier_name':'ldskjfalks',
+  //       'payment_mode': '1',
+  //       'payment_mode_value':''
+  //     }
+  //   ]
+  // }
+
 }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
index 0c1e6db93..3f2e4fcec 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.html
@@ -1,13 +1,8 @@
 <mat-card style="min-height:540px;">
     <mat-card-content>
         <mat-sidenav-container class="app-inner background-none shadow-none mail-db">
-            <mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()"
-                         class="mail-sidebar pl-xs pr-xs">
-                <button _ngcontent-c21=""
-                        [disabled]="currentPDStatus !=pdStatusCheck.INPROGRESS || actualQuestions!=answeredQuestions"
-                        class="compose-btn mat-warn mat-raised-button mb-1"
-                        (click)="changePDStatus(pdStatusCheck.COMPLETED);"><span>{{currentPDStatus==pdStatusCheck.INPROGRESS ? 'COMPLETE':(currentPDStatus==pdStatusCheck.QC_COMPLETED ? 'QC COMPLETED' : currentPDStatus ) }}</span>
-                </button>
+            <mat-sidenav #mailnav [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" class="mail-sidebar pl-xs pr-xs">
+                <button _ngcontent-c21="" [disabled]="currentPDStatus !=pdStatusCheck.INPROGRESS || actualQuestions!=answeredQuestions" class="compose-btn mat-warn mat-raised-button mb-1" (click)="changePDStatus(pdStatusCheck.COMPLETED);"> <span>{{currentPDStatus==pdStatusCheck.INPROGRESS ? 'COMPLETE':(currentPDStatus==pdStatusCheck.QC_COMPLETED ? 'QC COMPLETED' : currentPDStatus ) }}</span></button>
 
                 <!-- {{ (currentPDStatus==pdStatusCheck.INPROGRESS)? 'COMPLETE':(currentPDStatus) }} -->
                 <mat-expansion-panel *ngFor="let category of categoryList;let catIndex = index; ">
@@ -19,13 +14,8 @@
                     </mat-expansion-panel-header>
 
                     <mat-list>
-                        <mat-list-item class="custm-list-item"
-                                       *ngFor="let questions of category.questions; let quesIndex=index"
-                                       [ngStyle]="{'color':quesIndex === selectedQuestionIndex &&  catIndex === selectedCategoryIndex ? 'red' : 'black' }"
-                                       (click)="OnSelectDirectQuestions(questions, catIndex,quesIndex)">
-                            <small>{{ (questions.question.length>15)? (questions.question |
-                                slice:0:15)+'..':(questions.question) }}
-                            </small>
+                        <mat-list-item class="custm-list-item" *ngFor="let questions of category.questions; let quesIndex=index" [ngStyle]="{'color':quesIndex === selectedQuestionIndex &&  catIndex === selectedCategoryIndex ? 'red' : 'black' }" (click)="OnSelectDirectQuestions(questions, catIndex,quesIndex)">
+                            <small>{{ (questions.question.length>15)? (questions.question | slice:0:15)+'..':(questions.question) }}</small>
                         </mat-list-item>
 
 
@@ -33,8 +23,8 @@
                 </mat-expansion-panel>
 
                 <mat-list *ngFor="let formButton of categoryFormButtons">
-                    <mat-list-item class="custm-list-item" (click)="OnSelectDirectForms(formButton)">
-                        <span class="mt-0">{{ (formButton.form_name.length>15)? (formButton.form_name | slice:0:15)+'..':(formButton.form_name) }}</span>
+                    <mat-list-item class="custm-list-item" (click)="OnSelectDirectForms(formButton)" style="background-color:#e0e0e0">
+                        <span class="mt-0">{{ (formButton.form_name.length>17)? (formButton.form_name | slice:0:17)+'..':(formButton.form_name) }}</span>
                     </mat-list-item>
 
 
@@ -51,12 +41,9 @@
                 <figure>
                     <mat-card-content>
 
-                        <div fxLayout="row">
-                            <button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button"
-                                    matTooltip="Close" matTooltipPosition="above"
-                                    (click)="loadPdViewCompoent()">
-                                <mat-icon>close</mat-icon>
-                            </button>
+                        <div fxLayout="row" >
+                            <button mat-raised-button mat-icon-button class="hover-icon start_close_btn" type="button" matTooltip="Close" matTooltipPosition="above"
+                                    (click)="loadPdViewCompoent()"><mat-icon>close</mat-icon></button>
                             <div fxFlex="33" class="text-xs-left">
                                 <h4 class="mt-0">{{mainApplicantName}}</h4>
                                 <small>{{pdMasterList.customer_segment_name}}</small>
@@ -71,8 +58,7 @@
                     </mat-card-content>
                     <hr>
                     <div *ngIf="!formsCategoryEnable">
-                        <mat-card-content style="min-height: 240px;" *ngIf="selectedCategory.length==0">
-                            <!-- <h6 class="mt-0">About</h6> -->
+                        <mat-card-content style="min-height: 500px;" *ngIf="selectedCategory.length==0">
                             <p>No Records Found..</p>
                         </mat-card-content>
 
@@ -80,135 +66,100 @@
 
                         <ng-container [ngSwitch]="selectedCategory.fk_question_answertype">
                             <!-- start options type questions section -->
-                            <ng-container *ngSwitchCase="1">
+                            <ng-container  *ngSwitchCase="1">
 
+                                <mat-card-content>
+                                    <form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;" style="min-height: 450px;">
+                                        <mat-card-content>
 
-                                <form [formGroup]="optionsForm" *ngIf="answerList.length>0 ; else noanswers;">
-                                    <mat-card-content>
+                                            <span class="mt-0">{{optionsForm.controls.pd_question.value}}</span>
+                                            <div fxLayout="row" >
+                                                <div fxFlex="60" class="text-xs-left">
 
-                                        <span class="mt-0">{{optionsForm.controls.pd_question.value}}</span>
-                                        <div fxLayout="row">
-                                            <div fxFlex="60" class="text-xs-left">
+                                                    <mat-list>
 
-                                                <mat-list>
+                                                        <mat-radio-group formControlName="modelValue">
 
-                                                    <mat-radio-group formControlName="modelValue">
+                                                            <mat-list-item *ngFor="let option of optionsForm.controls.items.value">
+                                                                <mat-radio-button [value]="option.pd_answer_id">{{option.pd_answer}}</mat-radio-button>
 
-                                                        <mat-list-item
-                                                                *ngFor="let option of optionsForm.controls.items.value">
-                                                            <mat-radio-button [value]="option.pd_answer_id">
-                                                                {{option.pd_answer}}
-                                                            </mat-radio-button>
+                                                            </mat-list-item>
 
-                                                        </mat-list-item>
+                                                        </mat-radio-group>
 
-                                                    </mat-radio-group>
+                                                    </mat-list>
 
-                                                </mat-list>
+                                                </div>
+                                                <div fxFlex="40" class="text-xs-right" *ngIf="optionsForm.controls.documents.length>0">
 
-                                            </div>
-                                            <div fxFlex="40" class="text-xs-right"
-                                                 *ngIf="optionsForm.controls.documents.length>0">
-
-                                                <mat-card>
-                                                    <mat-card-content style="display: flex;
+                                                    <mat-card >
+                                                        <mat-card-content style="display: flex;
                                                     overflow: auto;min-height: 200px; max-height: 240px;">
-                                                        <div fxLayout="row wrap">
-                                                            <div fxFlex="50" class="m-gap p-gap"
-                                                                 *ngFor="let docs of optionsForm.controls.documents.value; let docIndex=index">
-                                                                <div class="p-list-main mb-2">
-                                                                    <div class="p-list">
+                                                            <div fxLayout="row wrap">
+                                                                <div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of optionsForm.controls.documents.value; let docIndex=index">
+                                                                    <div class="p-list-main mb-2">
+                                                                        <div class="p-list">
 
-                                                                        <div class="top"><img
-                                                                                [src]="docs.pd_document_url" alt=""/>
-                                                                        </div>
-                                                                        <div class="bottom">
-                                                                            <div class="left">
-                                                                                <div class="details">
-                                                                                    <small>{{docs.pd_document_title}}
-                                                                                    </small>
-                                                                                    <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                            <div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
+                                                                            <div class="bottom">
+                                                                                <div class="left">
+                                                                                    <div class="details">
+                                                                                        <small>{{docs.pd_document_title}}</small>
+                                                                                        <!-- <p>{{docs.pd_document_name}}</p> -->
+                                                                                    </div>
+                                                                                    <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                                                 </div>
-                                                                                <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
                                                                             </div>
                                                                         </div>
                                                                     </div>
                                                                 </div>
+
                                                             </div>
+                                                        </mat-card-content>
 
-                                                        </div>
-                                                    </mat-card-content>
-
-                                                </mat-card>
-                                            </div>
-
-                                        </div>
-
-                                    </mat-card-content>
-                                    <mat-card-actions>
-                                        <div fxLayout="row">
-                                            <div fxFlex="60" class="pb-0 text-sm-left">
-                                                <mat-form-field appearance="outline" style="width: 100%">
-                                                    <mat-label>Remarks</mat-label>
-                                                    <textarea matInput placeholder="Remarks"
-                                                              formControlName="pd_answer_remark"></textarea>
-
-                                                </mat-form-field>
-                                            </div>
-                                            <!-- this section for questions type options button actions -->
-                                            <div fxFlex="40" class="pb-0 text-sm-right">
-                                                <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Save&Previous"
-                                                                       *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED"
-                                                                       (click)="saveNextPrevious(optionsForm.controls,previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>skip_previous</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous"
-                                                                       (click)="skipNextPrevious(previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_left</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"
-                                                                       (click)="skipNextPrevious(next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_right</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Save&Next"
-                                                                       (click)="saveNextPrevious(optionsForm.controls,next)"
-                                                                       *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>skip_next</mat-icon>
-                                                    </mat-button-toggle>
-                                                </mat-button-toggle-group>
+                                                    </mat-card>
+                                                </div>
 
                                             </div>
-                                            <!-- end questions type options -->
-                                        </div>
 
-                                    </mat-card-actions>
-                                </form>
+                                        </mat-card-content>
+                                        <mat-card-actions>
+                                            <div fxLayout="row" >
+                                                <div fxFlex="60" class="pb-0 text-sm-left">
+                                                    <mat-form-field appearance="outline" style="width: 100%">
+                                                        <mat-label>Remarks</mat-label>
+                                                        <textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
 
+                                                    </mat-form-field>
+                                                </div>
+                                                <!-- this section for questions type options button actions -->
+                                                <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
+                                                    <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+                                                        <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPrevious(optionsForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
+                                                        <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                        <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
+                                                        <mat-button-toggle value="bold" matTooltip="Save&Next"  (click)="saveNextPrevious(optionsForm.controls,next)" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
+                                                    </mat-button-toggle-group>
+
+                                                </div>
+                                                <!-- end questions type options -->
+                                            </div>
+
+                                        </mat-card-actions>
+                                    </form>
+                                </mat-card-content>
                                 <ng-template #noanswers>
                                     <mat-card-content>
                                         <span class="mt-0">{{selectedCategory.question}}</span>
 
                                     </mat-card-content>
                                     <mat-card-actions>
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
 
                                             <div fxFlex="100" class="pb-0 text-sm-right">
                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous"
-                                                                       (click)="skipNextPrevious(previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_left</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"
-                                                                       (click)="skipNextPrevious(next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_right</mat-icon>
-                                                    </mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
                                                 </mat-button-toggle-group>
 
                                             </div>
@@ -221,50 +172,42 @@
                             </ng-container>
                             <!-- end options type questions section -->
                             <!-- start text box questions section -->
-                            <ng-container *ngSwitchCase="2">
+                            <ng-container  *ngSwitchCase="2">
 
                                 <form [formGroup]="textBoxForm" *ngIf="answerList.length>0 ; else noanswers;">
                                     <mat-card-content>
                                         <span class="mt-0">{{textBoxForm.controls.pd_question.value}}</span>
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
                                             <div fxFlex="60" class="text-xs-left">
 
                                                 <mat-list [formArrayName]="'items'" style="padding-top:10%">
-                                                    <mat-list-item
-                                                            *ngFor="let control of textBoxForm.controls.items.controls; let i = index;"
-                                                            [formGroup]="control">
+                                                    <mat-list-item *ngFor="let control of textBoxForm.controls.items.controls; let i = index;" [formGroup]="control">
 
                                                         <mat-form-field appearance="outline" style="width: 100%">
                                                             <mat-label>Answers</mat-label>
-                                                            <textarea matInput placeholder="Answers"
-                                                                      formControlName="pd_answer"></textarea>
+                                                            <textarea matInput placeholder="Answers" formControlName="pd_answer"></textarea>
 
                                                         </mat-form-field>
                                                     </mat-list-item>
 
                                                 </mat-list>
                                             </div>
-                                            <div fxFlex="40" class="text-xs-right"
-                                                 *ngIf="textBoxForm.controls.documents.length>0">
+                                            <div fxFlex="40" class="text-xs-right" *ngIf="textBoxForm.controls.documents.length>0">
 
-                                                <mat-card>
+                                                <mat-card >
                                                     <mat-card-content style="display: flex;
                                                     overflow: auto;min-height: 200px; max-height: 240px;">
                                                         <div fxLayout="row wrap">
 
-                                                            <div fxFlex="50" class="m-gap p-gap"
-                                                                 *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
+                                                            <div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
                                                                 <div class="p-list-main mb-2">
                                                                     <div class="p-list">
 
-                                                                        <div class="top"><img
-                                                                                [src]="docs.pd_document_url" alt=""/>
-                                                                        </div>
+                                                                        <div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
                                                                         <div class="bottom">
                                                                             <div class="left">
                                                                                 <div class="details">
-                                                                                    <small>{{docs.pd_document_title}}
-                                                                                    </small>
+                                                                                    <small>{{docs.pd_document_title}}</small>
                                                                                     <!-- <p>{{docs.pd_document_name}}</p> -->
                                                                                 </div>
                                                                                 <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
@@ -284,41 +227,21 @@
 
                                     </mat-card-content>
                                     <mat-card-actions>
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
                                             <div fxFlex="60" class="pb-0 text-sm-left">
                                                 <mat-form-field appearance="outline" style="width: 100%">
                                                     <mat-label>Remarks</mat-label>
-                                                    <textarea matInput placeholder="Remarks"
-                                                              formControlName="pd_answer_remark"></textarea>
+                                                    <textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
 
                                                 </mat-form-field>
                                             </div>
                                             <!-- this section for questions type options button actions -->
-                                            <div fxFlex="40" class="pb-0 text-sm-right">
+                                            <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Save&Previous"
-                                                                       *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED"
-                                                                       (click)="saveNextPreviousText(textBoxForm.controls,previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>skip_previous</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous"
-                                                                       matTooltipPosition="below"
-                                                                       (click)="skipNextPrevious(previous)">
-                                                        <mat-icon>chevron_left</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"
-                                                                       (click)="skipNextPrevious(next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_right</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold"
-                                                                       *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED"
-                                                                       matTooltip="Save&Next"
-                                                                       (click)="saveNextPreviousText(textBoxForm.controls,next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>skip_next</mat-icon>
-                                                    </mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Save&Previous" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" (click)="saveNextPreviousText(textBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" matTooltipPosition="below" (click)="skipNextPrevious(previous)"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPreviousText(textBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
                                                 </mat-button-toggle-group>
 
                                             </div>
@@ -333,20 +256,12 @@
 
                                     </mat-card-content>
                                     <mat-card-actions>
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
 
                                             <div fxFlex="100" class="pb-0 text-sm-right">
                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous"
-                                                                       (click)="skipNextPrevious(previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_left</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"
-                                                                       (click)="skipNextPrevious(next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_right</mat-icon>
-                                                    </mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
                                                 </mat-button-toggle-group>
 
                                             </div>
@@ -357,51 +272,38 @@
                             </ng-container>
                             <!-- end text box questions section -->
                             <!-- start check box questions section -->
-                            <ng-container *ngSwitchCase="3">
+                            <ng-container  *ngSwitchCase="3">
 
                                 <form [formGroup]="checkBoxForm" *ngIf="answerList.length>0 ; else noanswers;">
                                     <mat-card-content>
                                         <span class="mt-0">{{checkBoxForm.controls.pd_question.value}}</span>
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
                                             <div fxFlex="60" class="text-xs-left">
 
                                                 <mat-list [formArrayName]="'items'">
-                                                    <mat-list-item
-                                                            *ngFor="let control of checkBoxForm.controls.items.controls; let i = index;"
-                                                            [formGroup]="control">
+                                                    <mat-list-item *ngFor="let control of checkBoxForm.controls.items.controls; let i = index;" [formGroup]="control">
 
-                                                        <small>
-                                                            <mat-checkbox class="example-margin"
-                                                                          formControlName="checkbox"
-                                                                          id="{{ control.controls.pd_answer_id.value }}">
-                                                                {{ control.controls.pd_answer.value }}
-                                                            </mat-checkbox>
-                                                        </small>
+                                                        <small><mat-checkbox class="example-margin" formControlName="checkbox" id="{{ control.controls.pd_answer_id.value }}"> {{ control.controls.pd_answer.value }}</mat-checkbox> </small>
 
                                                     </mat-list-item>
 
                                                 </mat-list>
                                             </div>
-                                            <div fxFlex="40" class="text-xs-right"
-                                                 *ngIf="checkBoxForm.controls.documents.length>0">
+                                            <div fxFlex="40" class="text-xs-right" *ngIf="checkBoxForm.controls.documents.length>0">
 
-                                                <mat-card>
+                                                <mat-card >
                                                     <mat-card-content style="display: flex;
                                                     overflow: auto;min-height: 200px; max-height: 240px;">
                                                         <div fxLayout="row wrap">
-                                                            <div fxFlex="50" class="m-gap p-gap"
-                                                                 *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
+                                                            <div fxFlex="50" class="m-gap p-gap" *ngFor="let docs of textBoxForm.controls.documents.value; let docIndex=index">
                                                                 <div class="p-list-main mb-2">
                                                                     <div class="p-list">
 
-                                                                        <div class="top"><img
-                                                                                [src]="docs.pd_document_url" alt=""/>
-                                                                        </div>
+                                                                        <div class="top"><img [src]="docs.pd_document_url" alt=""/></div>
                                                                         <div class="bottom">
                                                                             <div class="left">
                                                                                 <div class="details">
-                                                                                    <small>{{docs.pd_document_title}}
-                                                                                    </small>
+                                                                                    <small>{{docs.pd_document_title}}</small>
                                                                                     <!-- <p>{{docs.pd_document_name}}</p> -->
                                                                                 </div>
                                                                                 <!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
@@ -421,44 +323,21 @@
 
                                     </mat-card-content>
                                     <mat-card-actions *ngIf="checkBoxForm.controls.items.length > 0">
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
                                             <div fxFlex="60" class="pb-0 text-sm-left">
                                                 <mat-form-field appearance="outline" style="width: 100%">
                                                     <mat-label>Remarks</mat-label>
-                                                    <textarea matInput placeholder="Remarks"
-                                                              formControlName="pd_answer_remark"></textarea>
+                                                    <textarea matInput placeholder="Remarks" formControlName="pd_answer_remark"></textarea>
 
                                                 </mat-form-field>
                                             </div>
                                             <!-- this section for questions type options button actions -->
-                                            <div fxFlex="40" class="pb-0 text-sm-right">
+                                            <div fxFlex="40" class="text-sm-right" style="margin-top: 7%;">
                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold"
-                                                                       *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED"
-                                                                       matTooltip="Save&Previous"
-                                                                       (click)="saveNextPrevious(checkBoxForm.controls,previous)"
-                                                                       matTooltip="Save&Previous"
-                                                                       (click)="saveNextPrevious(checkBoxForm.controls,previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>skip_previous</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous"
-                                                                       (click)="skipNextPrevious(previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_left</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"
-                                                                       (click)="skipNextPrevious(next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_right</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold"
-                                                                       *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED"
-                                                                       matTooltip="Save&Next"
-                                                                       (click)="saveNextPrevious(checkBoxForm.controls,next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>skip_next</mat-icon>
-                                                    </mat-button-toggle>
+                                                    <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltip="Save&Previous" (click)="saveNextPrevious(checkBoxForm.controls,previous)" matTooltipPosition="below"><mat-icon>skip_previous</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next" (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" *ngIf="currentPDStatus !=pdStatusCheck.COMPLETED && currentPDStatus !=pdStatusCheck.QC_COMPLETED" matTooltip="Save&Next" (click)="saveNextPrevious(checkBoxForm.controls,next)" matTooltipPosition="below"><mat-icon>skip_next</mat-icon></mat-button-toggle>
                                                 </mat-button-toggle-group>
 
                                             </div>
@@ -473,20 +352,12 @@
 
                                     </mat-card-content>
                                     <mat-card-actions>
-                                        <div fxLayout="row">
+                                        <div fxLayout="row" >
 
                                             <div fxFlex="100" class="pb-0 text-sm-right">
                                                 <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous"
-                                                                       (click)="skipNextPrevious(previous)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_left</mat-icon>
-                                                    </mat-button-toggle>
-                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"
-                                                                       (click)="skipNextPrevious(next)"
-                                                                       matTooltipPosition="below">
-                                                        <mat-icon>chevron_right</mat-icon>
-                                                    </mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Previous" (click)="skipNextPrevious(previous)" matTooltipPosition="below"><mat-icon>chevron_left</mat-icon></mat-button-toggle>
+                                                    <mat-button-toggle value="bold" matTooltip="Skip&Next"  (click)="skipNextPrevious(next)" matTooltipPosition="below"><mat-icon>chevron_right</mat-icon></mat-button-toggle>
                                                 </mat-button-toggle-group>
 
                                             </div>
@@ -504,323 +375,43 @@
                     <div *ngIf="formsCategoryEnable">
                         <ng-container [ngSwitch]="selectedFormsCategory.form_id">
                             <!-- start supplier type questions section -->
-                            <ng-container *ngSwitchCase="1">
-                                <p>supplier</p>
+                            <ng-container  *ngSwitchCase="1">
+                                <app-supplier-info [pdid]="startPD"></app-supplier-info>
                             </ng-container>
                             <!-- end supplier type questions -->
 
                             <!-- start client type questions -->
-                            <ng-container *ngSwitchCase="2">
-                                <p>client</p>
+                            <ng-container  *ngSwitchCase="2">
+                                <app-client-info [pdid]="startPD"></app-client-info>
                             </ng-container>
                             <!-- end client type questions -->
 
                             <!-- start personal type questions -->
                             <ng-container *ngSwitchCase="3">
-                                <p>Personal</p>
+                                <app-personal-info [pdid]="startPD" [pd_all_details]="pdFullDetails"></app-personal-info>
                             </ng-container>
-                            <!-- end personal type questions -->
                             <ng-container *ngSwitchCase="4">
-                                <p>Address</p>
-                                <form class="address" [formGroup]="addressForm">
-                                    <mat-form-field>
-                                        <input matInput placeholder="Address" formControlName="address">
-                                    </mat-form-field>
-
-                                    <mat-form-field>
-                                        <mat-select placeholder="Address Type" formControlName="address_type">
-                                            <mat-option value="Office">Office</mat-option>
-                                            <mat-option value="Clinic">Clinic</mat-option>
-                                            <mat-option value="Factory">Factory</mat-option>
-                                            <mat-option value="Warehouse">Warehouse</mat-option>
-                                            <mat-option value="Shop">Shop</mat-option>
-                                            <mat-option value="ResidencecumOffice">Residence cum Office</mat-option>
-                                            <mat-option value="Residence">Residence</mat-option>
-                                            <mat-option value="Other">Other (PD officer to fill)</mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-
-                                    <mat-form-field>
-                                        <mat-select placeholder="Locality" formControlName="locality">
-                                            <mat-option value="CommercialOffice">Commercial (Office type) Area
-                                            </mat-option>
-                                            <mat-option value="CommercialShop">Commercial (shop type) Area</mat-option>
-                                            <mat-option value="Industrial">Industrial Area</mat-option>
-                                            <mat-option value="Residential">Residential Area</mat-option>
-                                            <mat-option value="Mix">Mix use (Comment mandatory)</mat-option>
-                                            <mat-option value="Rural">Rural (Village) area</mat-option>
-                                            <mat-option value="Others">Others (Please specify)</mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-                                    <mat-form-field>
-                                        <mat-select placeholder="Approach to PD location" formControlName="pd_location">
-                                            <mat-option value="{{data.pd_location_approach_id}}"
-                                                        *ngFor="let data of locationdata">{{data.description}}
-                                            </mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-                                    <mat-form-field>
-                                        <mat-select placeholder="Comment on locality" formControlName="comment_locality">
-                                            <mat-option value="{{data.comments_on_locality_id}}"
-                                                        *ngFor="let data of commentData">{{data.rating}}
-                                            </mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-                                    <mat-form-field>
-                                        <mat-select placeholder="Customer Behaviour"
-                                                    formControlName="customer_behaviour">
-                                            <mat-option value="{{data.customer_behaviour_id}}"
-                                                        *ngFor="let data of customerData">{{data.description}}
-                                            </mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-                                    <mat-card>
-                                        <mat-card-header>
-                                            <p>Neighbour hood
-                                            <p>
-                                        </mat-card-header>
-                                        <div formArrayName="neighbourhood">
-                                            <div *ngFor="let item of addressForm.get('neighbourhood').controls; let i=index">
-                                                <mat-card-content class="matcard" [formGroup]="item">
-                                                    <mat-form-field>
-                                                        <input matInput placeholder="Neighbour name"
-                                                               formControlName="name">
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Do you know"
-                                                                    formControlName="do_you_know">
-                                                            <mat-option value="yes">Yes</mat-option>
-                                                            <mat-option value="no">No</mat-option>
-                                                        </mat-select>
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <input matInput placeholder="How long do you know the applicant"
-                                                               formControlName="how_long">
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Is the applicant owner"
-                                                                    formControlName="is_owner">
-                                                            <mat-option value="yes">Yes</mat-option>
-                                                            <mat-option value="no">No</mat-option>
-                                                            <mat-option value="dont_know">Dont Know</mat-option>
-                                                        </mat-select>
-                                                    </mat-form-field>
-                                                    <button type="button" mat-raised-button mat-icon-button *ngIf="i==0" (click)="addNeighbour($event)"
-                                                            style="float: right;">
-                                                        <mat-icon>add</mat-icon>
-                                                    </button>
-                                                    <button type="button" mat-raised-button mat-icon-button *ngIf="i>0"
-                                                            (click)="removeNeighbour(i)"
-                                                            style="float: right;">
-                                                        <mat-icon>close</mat-icon>
-                                                    </button>
-
-                                                </mat-card-content>
-                                            </div>
-                                        </div>
-                                    </mat-card>
-                                    <button mat-raised-button type="submit" class="button" (click)="onSubmit()">Submit
-                                    </button>
-                                </form>
-                                <!-- end personal type questions -->
+                                <app-assets-info [pdid]="startPD"></app-assets-info>
                             </ng-container>
                             <ng-container *ngSwitchCase="5">
-                                <p>Family</p>
-                                <form class="address" [formGroup]="familyForm">
-                                    <mat-form-field>
-                                        <mat-select placeholder="Person Met" formControlName="person">
-                                            <mat-option *ngFor="let state of filteredStates" [value]="state">
-                                                {{state}}
-                                            </mat-option>
-                                        </mat-select>
-                                    </mat-form-field>
-                                   <mat-form-field  *ngIf="person.value =='Other'">
-                                        <input matInput placeholder="Enter the relationship" formControlName="personOther">
-                                  </mat-form-field>
-                                    <mat-form-field>
-                                        <input matInput placeholder="No. Of family members" formControlName="members">
-                                    </mat-form-field>
-                                    <mat-card>
-                                        <mat-card-header>
-                                            <p>Earning Members
-                                            <p>
-                                        </mat-card-header>
-                                        <div formArrayName="earningMembers">
-                                            <div *ngFor="let item of familyForm.get('earningMembers').controls; let i=index" [formGroupName]="i">
-                                                <mat-card-content class="matcard">
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Relation" formControlName="relation">
-                                                            <mat-option value="{{relation.relationship_id}}"
-                                                                        *ngFor="let relation of relationData">
-                                                                {{relation.name}}
-                                                            </mat-option>
-                                                        </mat-select>
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Segment" formControlName="segment">
-                                                            <mat-option value="Salaried">Salaried</mat-option>
-                                                            <mat-option value="SENP">SENP</mat-option>
-                                                            <mat-option value="SEP">SEP</mat-option>
-
-                                                        </mat-select>
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <input matInput placeholder="Income / Revenue"
-                                                               formControlName="income">
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <input matInput placeholder="Name of Employer / Business"
-                                                               formControlName="employerName">
-                                                    </mat-form-field>
-                                                    <button type="button" mat-raised-button mat-icon-button *ngIf="i==0" (click)="addearningMembers()">
-                                                        <mat-icon >add</mat-icon>
-                                                    </button>
-                                                    <button type="button" mat-raised-button mat-icon-button (click)="deleteEarningMembers(i)" *ngIf="i>0">
-                                                        <mat-icon>close</mat-icon>
-                                                    </button>
-                                                </mat-card-content>
-                                            </div>
-                                        </div>
-                                    </mat-card>
-                                    <mat-card>
-                                        <mat-card-header>
-                                            <p>Non Earning Members
-                                            <p>
-                                        </mat-card-header>
-                                        <div formArrayName="nonEarningMembers">
-                                            <div *ngFor="let members of familyForm.get('nonEarningMembers').controls; let i=index" [formGroupName]="i">
-                                                <mat-card-content class="matcard">
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Relation"
-                                                                    formControlName="relationship">
-                                                            <mat-option value="{{relation.relationship_id}}"
-                                                                        *ngFor="let relation of relationData">
-                                                                {{relation.name}}
-                                                            </mat-option>
-                                                        </mat-select>
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <mat-select placeholder="Occupation"
-                                                                    formControlName="occupation">
-                                                            <mat-option value="{{occupation.occupation_non_earning_member_id}}" *ngFor="let occupation of occupationData">{{occupation.name}}</mat-option>
-                                                        </mat-select>
-                                                    </mat-form-field>
-                                                    <mat-form-field>
-                                                        <input matInput placeholder="Retired From"
-                                                               formControlName="retired">
-                                                    </mat-form-field>
-                                                    <button type="button" mat-raised-button mat-icon-button (click)="addMembers()" *ngIf="i==0">
-                                                        <mat-icon>add</mat-icon>
-                                                    </button>
-                                                    <button type="button" mat-raised-button mat-icon-button (click)="deleteMembers(i)" *ngIf="i>0">
-                                                        <mat-icon>close</mat-icon>
-                                                    </button>
-                                                </mat-card-content>
-                                            </div>
-                                        </div>
-                                    </mat-card>
-                                    <mat-card>
-                                        <mat-card-header>
-                                            <p>Residence
-                                            <p>
-                                        </mat-card-header>
-                                        <mat-card-content class="matcard">
-                                            <mat-form-field>
-                                                <input matInput placeholder="Where is the residence"
-                                                       formControlName="residence">
-                                            </mat-form-field>
-                                            <mat-form-field>
-                                                <input matInput placeholder="No.of yrs" formControlName="years">
-                                            </mat-form-field>
-                                            <mat-form-field>
-                                                <mat-select placeholder="Ownership" formControlName="ownership">
-                                                    <mat-option value="Self">Self Owned</mat-option>
-                                                    <mat-option value="Family">Family Owned</mat-option>
-                                                    <mat-option value="Rented">Rented</mat-option>
-                                                    <mat-option value="Others">Others</mat-option>
-                                                </mat-select>
-                                            </mat-form-field>
-                                            <mat-form-field  *ngIf="ownership.value =='Others'">
-                                                <input matInput placeholder="Please specify" formControlName="ownershipOther">
-                                            </mat-form-field>
-                                            <mat-form-field *ngIf="ownership.value =='Rented'">
-                                                <input matInput placeholder="what rent"
-                                                       formControlName="rent">
-                                            </mat-form-field>
-                                        </mat-card-content>
-                                    </mat-card>
-                                    <button mat-raised-button class="button" (click)="submitFamily()">Submit</button>
-                                </form>
-                            </ng-container>
-                            <ng-container *ngSwitchCase="6">
-                                <!--<p>Banking details</p>-->
-                                <form  [formGroup]="bankingForm" class="bankForm">
-                                    <div formArrayName="itemRows">
-                                        <mat-accordion
-                                                *ngFor="let itemrow of bankingForm.controls.itemRows.controls; let i=index"
-                                                [formGroupName]="i">
-                                            <mat-expansion-panel class="banlFields" [expanded]="step == i">
-                                                <mat-expansion-panel-header>
-                                                    <mat-panel-title>
-                                                      <h4>{{i+1}} Banking details<span *ngIf="i==0" style="float: right;">
-                                                    <mat-icon (click)="addBankdetails(i)">add</mat-icon>
-                                                     </span>
-                                                        <span *ngIf="i > 0">
-                                                    <mat-icon (click)="deleteBankdetails(i)">delete</mat-icon>
-                                                        </span></h4>
-                                                    </mat-panel-title>
-                                                </mat-expansion-panel-header>
-                                                <mat-form-field>
-                                                    <input matInput placeholder="Applicant Name"
-                                                           formControlName="applicant_name">
-                                                </mat-form-field>
-                                                <mat-form-field>
-                                                    <input matInput placeholder="Bank Name" formControlName="bank_name">
-                                                </mat-form-field>
-
-                                                <mat-form-field>
-                                                    <mat-select placeholder="Account Type"
-                                                                formControlName="account_type">
-                                                        <mat-option value="Savings">Savings</mat-option>
-                                                        <mat-option value="Current">Current</mat-option>
-                                                        <mat-option value="OD">OD</mat-option>
-                                                        <mat-option value="CC">CC</mat-option>
-
-                                                    </mat-select>
-                                                </mat-form-field>
-
-                                                <mat-form-field>
-                                                    <mat-select placeholder="Salary Credited in this account"
-                                                                formControlName="salary">
-                                                        <mat-option value="Yes">Yes</mat-option>
-                                                        <mat-option value="No">No</mat-option>
-                                                        <mat-option value="NA">NA</mat-option>
-                                                    </mat-select>
-                                                </mat-form-field>
-                                                <mat-form-field>
-                                                    <input matInput placeholder="Limit in case of OD / CC account"
-                                                           formControlName="limit">
-                                                </mat-form-field>
-                                                <mat-form-field>
-                                                    <mat-select placeholder="Is this the main business account"
-                                                                formControlName="is_main">
-                                                        <mat-option value="Yes">Yes</mat-option>
-                                                        <mat-option value="No">No</mat-option>
-                                                    </mat-select>
-                                                </mat-form-field>
-                                                <mat-form-field>
-                                                    <input matInput placeholder="Approximate Vintage"
-                                                           formControlName="vintage">
-                                                </mat-form-field>
-                                            </mat-expansion-panel>
-
-                                        </mat-accordion>
-                                    </div>
-                                    <button mat-raised-button class="button" (click)="bankSubmit()">Submit
-                                    </button>
-                                </form>
+                                <app-address></app-address>
                                 <!-- end personal type questions -->
                             </ng-container>
+                            <ng-container *ngSwitchCase="6">
+                                <app-family-details></app-family-details>
+                            </ng-container>
+                            <ng-container *ngSwitchCase="7">
+                                <!--<p>Banking details</p>-->
+                             <app-banking-details></app-banking-details>
+                            </ng-container>
+                            <ng-container *ngSwitchCase="8">
+                                <app-current-loan></app-current-loan>
+                            </ng-container>
+                            <ng-container *ngSwitchCase="9">
+                                <app-other-income></app-other-income>
+                            </ng-container>
+                            <!-- end personal type questions
+                            -->
                         </ng-container>
                     </div>
                     <!-- end form based questions -->
@@ -834,5 +425,4 @@
 
 <notifier-container></notifier-container>
 
-    
- 
\ No newline at end of file
+
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
index 5f3eb7681..543149a8b 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.scss
@@ -139,16 +139,4 @@ mat-icon{
     background: #62B013;
     color: white;
 }
-.banlFields mat-form-field {
-    width: 100%;
-    margin: 0 2%;
-}
-.bankForm .button {
-    float: right;
-    width: 10px;
-    background: #62B013;
-    color: white;
-}
-.has-danger{
-    border: solid thin #f44336!important;
-}
\ No newline at end of file
+
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
index 47b979fbd..b89a4eff2 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/start-pd.component.ts
@@ -38,6 +38,22 @@ export class StartPdComponent implements OnInit, OnDestroy {
         'Other'
     ];
     relationDetails: any = [1];
+// errorMessage:any;
+// selectedCategory:any=[];
+// categoryList: any=[];
+// pdMasterList: any=[];
+// optionsForm: FormGroup;
+// checkBoxForm:FormGroup;
+// textBoxForm:FormGroup;
+// next:number;
+// previous:number;
+// selectedCategoryIndex:number;
+// selectedQuestionIndex:number;
+// getQuestionsLength:number;
+// answerList:any=[];
+// ansPDList:any=[];
+// pdFullDetails:any=[];
+
 // category static form buttons
     categoryFormButtons: any = [
         {
@@ -53,17 +69,33 @@ export class StartPdComponent implements OnInit, OnDestroy {
             "form_name": "Personal Details",
         },
         {
-            "form_id": 4,
-            "form_name": "Address"
+            "form_id":4,
+            "form_name":"Asset Details",
         },
         {
             "form_id": 5,
-            "form_name": "Family",
+            "form_name": "Address"
         },
         {
             "form_id": 6,
+            "form_name": "Family",
+        },
+        {
+            "form_id": 7,
             "form_name": "Banking",
         },
+        {
+            "form_id": 8,
+            "form_name": "Current Loan",
+        },
+        {
+            "form_id": 9,
+            "form_name": "Other Income",
+        },
+        {
+            "form_id": 10,
+            "form_name": "Loan Details",
+        },
 
     ];
     formsCategoryEnable: boolean = false;
@@ -81,33 +113,11 @@ export class StartPdComponent implements OnInit, OnDestroy {
     currentPDStatus: string;
     actualQuestions: number;
     answeredQuestions: number;
-    locationdata: any = [];
-    commentData: any = [];
-    customerData: any = [];
-    relationData: any = [];
-    occupationData: any = [];
-    public addressForm: FormGroup;
-    public familyForm: FormGroup;
-    public bankingForm: FormGroup;
 
-    public address: AbstractControl;
-    public addressType: AbstractControl;
-    public locality: AbstractControl;
-    public pdLocation: AbstractControl;
-    public commentlocality: AbstractControl;
-    public customerBehaviour: AbstractControl;
 
-    public person: AbstractControl;
-    public personOther: AbstractControl;
-
-    public members: AbstractControl;
-    public residence: AbstractControl;
-    public years: AbstractControl;
-    public ownership: AbstractControl;
-    public ownershipOther: AbstractControl;
-    public rent: AbstractControl;
-    step: any;
+    // start
 
+    // end
     private notifier: NotifierService;
 
 
@@ -120,16 +130,9 @@ export class StartPdComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.step = 0;
-        this.getLocation();
-        this.getComment();
-        this.getCustomer();
-        this.getRelation();
-        this.getOccupation();
+        // start
 
-        this.initAddressForm();
-        this.initFamilyForm();
-        this.initBankingForm();
+        // end
         this.listPDComponent.showListView(false);
         const elemSidebar = <HTMLElement>document.querySelector('.app-inner .mail-sidebar');
         const elemContent = <HTMLElement>document.querySelector('.app-inner .main-content');
@@ -143,85 +146,10 @@ export class StartPdComponent implements OnInit, OnDestroy {
         this.next = 1;
         this.previous = 2;
     }
-    public initAddressForm(): void {
-        this.addressForm = this.fb.group({
-            address: ['', Validators.compose([Validators.required])],
-            address_type: ['', Validators.compose([Validators.required])],
-            locality: ['', Validators.compose([Validators.required])],
-            pd_location: ['', Validators.compose([Validators.required])],
-            comment_locality: ['', Validators.compose([Validators.required])],
-            customer_behaviour: ['', Validators.compose([Validators.required])],
-            neighbourhood: this.fb.array([ this.createNeighbour() ])
-        });
-        this.address = this.addressForm.controls['address'];
-        this.addressType = this.addressForm.controls['address_type'];
-        this.locality = this.addressForm.controls['locality'];
-        this.pdLocation = this.addressForm.controls['pd_location'];
-        this.commentlocality = this.addressForm.controls['comment_locality'];
-        this.customerBehaviour = this.addressForm.controls['customer_behaviour'];
-    }
-    createNeighbour(): FormGroup {
-        return this.fb.group({
-            name: ['', Validators.compose([Validators.required])],
-            do_you_know: ['', Validators.compose([Validators.required])],
-            how_long: ['', Validators.compose([Validators.required])],
-            is_owner: ['', Validators.compose([Validators.required])],
-        });
-    }
-    public initFamilyForm(): void {
-        this.familyForm = this.fb.group({
-            person: ['', Validators.compose([Validators.required])],
-            personOther: [''],
-            members: ['', Validators.compose([Validators.required])],
-            residence: ['', Validators.compose([Validators.required])],
-            years: ['', Validators.compose([Validators.required])],
-            ownership: ['', Validators.compose([Validators.required])],
-            ownershipOther: [''],
-            rent: [''],
-            earningMembers: this.fb.array([ this.createMembers()]),
-            nonEarningMembers: this.fb.array([ this.createNonMembers()])
-        });
-        this.person = this.familyForm.controls['person'];
-        this.personOther = this.familyForm.controls['personOther'];
-        this.members = this.familyForm.controls['members'];
-        this.residence = this.familyForm.controls['residence'];
-        this.years = this.familyForm.controls['years'];
-        this.ownership = this.familyForm.controls['ownership'];
-        this.ownershipOther = this.familyForm.controls['ownershipOther'];
+    // start
 
-        this.rent = this.familyForm.controls['rent'];
-    }
-    public initBankingForm(): void {
-        this.bankingForm = this.fb.group({
-            itemRows: this.fb.array([this.createBankarray()])
-        });
-    }
-    createBankarray() {
-        return this.fb.group({
-            applicant_name: ['', Validators.compose([Validators.required])],
-            bank_name: ['', Validators.compose([Validators.required])],
-            account_type: ['', Validators.compose([Validators.required])],
-            salary: ['', Validators.compose([Validators.required])],
-            limit: ['', Validators.compose([Validators.required])],
-            is_main: ['', Validators.compose([Validators.required])],
-            vintage: ['', Validators.compose([Validators.required])],
-        });
-    }
-    createMembers(): FormGroup {
-        return this.fb.group({
-            relation: ['', Validators.compose([Validators.required])],
-            segment: ['', Validators.compose([Validators.required])],
-            income: ['', Validators.compose([Validators.required])],
-            employerName: ['', Validators.compose([Validators.required])],
-        });
-    }
-    createNonMembers(): FormGroup {
-        return this.fb.group({
-            relationship: ['', Validators.compose([Validators.required])],
-            occupation: ['', Validators.compose([Validators.required])],
-            retired: ['', Validators.compose([Validators.required])],
-        });
-    }
+
+    // end
 
     isMac(): boolean {
         let bool = false;
@@ -276,10 +204,35 @@ export class StartPdComponent implements OnInit, OnDestroy {
             "template_id": selectedQuestions.fk_template_id,
             "category_id": selectedQuestions.fk_template_question_category_id
         }
-        this.getAnswers(serachQuestions);
-
     }
 
+    // loadTemplates(startID:string){
+    // this._pd.loadPDTemplates(startID).subscribe(
+    //   data => {
+    //     if (data.status == 200) {
+    //         this.pdMasterList=data.records.pdmaster_details;
+    //         this.categoryList=data.records.question_answers;
+    //         let filterApplicantName= data.records.pdapplicants_detials.filter(item => item.applicant_type == 1);
+    //         this.mainApplicantName = filterApplicantName[0].applicant_name;
+    //         this.currentPDStatus = data.records.pdmaster_details.pd_status;
+    //
+    //           this.actualQuestions = data.records.counts.overall_question_count;
+    //           this.answeredQuestions = data.records.counts.overall_answered_count;
+    //
+    //           this.pdFullDetails = data.records
+    //
+    //       }
+    //     else{
+    //         this.pdMasterList="";
+    //         this.mainApplicantName="";
+    //         this.categoryList=[];
+    //         this.currentPDStatus="";
+    //     }
+    //     this.getAnswers(serachQuestions);
+    //
+    // });
+    // }
+
     // load question based answer list
     getAnswers(serachList: any) {
         this.answerList = [];
@@ -585,245 +538,20 @@ export class StartPdComponent implements OnInit, OnDestroy {
             this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
         });
     }
-
-    // direct form based questions
+    // start
+     // direct form based questions
     OnSelectDirectForms(details: any) {
         this.formsCategoryEnable = true;
         this.selectedFormsCategory = details;
-        if(details.form_id == '4') {
-            let params: any = {};
-            params.pd_id = '250';
-            params.pd_form_id = '250';
-            this._pd.retriveForm(params).subscribe(data => {
-                console.log('data', data);
-                var result = Object.keys(data.records.neighbourhood).map(function(key) {
-                    return data.records.neighbourhood[key];
-                });
-                this.addressForm.controls.address.setValue(data.records.address);
-                this.addressForm.controls.pd_location.setValue(data.records.pd_location);
-                this.addressForm.controls.address_type.setValue(data.records.address_type);
-                this.addressForm.controls.comment_locality.setValue(data.records.comment_locality);
-                this.addressForm.controls.customer_behaviour.setValue(data.records.customer_behaviour);
-                this.addressForm.controls.locality.setValue(data.records.locality);
-                this.addressForm.controls.neighbourhood.setValue(result);
-                console.log('result', result);
-            });
-        }
-        if(details.form_id == '5') {
-            let params: any = {};
-            params.pd_id = '251';
-            params.pd_form_id = '251';
-            this._pd.retriveForm(params).subscribe(data => {
-                console.log('data', data);
-                var result = Object.keys(data.records.non_earning_members).map(function(key) {
-                    return data.records.non_earning_members[key];
-                });
-                var earning = Object.keys(data.records.earning_members).map(function(key) {
-                    return data.records.earning_members[key];
-                });
-                this.familyForm.controls.person.setValue(data.records.person_met);
-                this.familyForm.controls.members.setValue(data.records.family_members);
-                this.familyForm.controls.years.setValue(data.records.no_of_years);
-                this.familyForm.controls.ownership.setValue(data.records.ownership);
-                this.familyForm.controls.rent.setValue(data.records.what_rent);
-                this.familyForm.controls.nonEarningMembers.setValue(result);
-                this.familyForm.controls.earningMembers.setValue(earning);
-                this.familyForm.controls.residence.setValue(residence);
 
-            });
-        }
-        if(details.form_id == '6') {
-            let params: any = {};
-            params.pd_id = '252';
-            params.pd_form_id = '252';
-            this._pd.retriveForm(params).subscribe(data => {
-                console.log('data', data);
-                var result = Object.keys(data.records.banking_details).map(function(key) {
-                    return data.records.banking_details[key];
-                });
-                this.bankingForm.controls.itemRows.setValue(result);
-            });
-        }
-    }
-    addNeighbour() {
-        const control = <FormArray>this.addressForm.controls['neighbourhood'];
-        if (control.length <= 1) {
-            control.push(this.createNeighbour());
-        }
-    }
-    removeNeighbour(index) {
-         const control = <FormArray>this.addressForm.controls['neighbourhood'];
-        control.removeAt(index);
-    }
-    addearningMembers() {
-        const control = <FormArray>this.familyForm.controls['earningMembers'];
-        control.push(this.createMembers());
-    }
-    addMembers() {
-        const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
-        control.push(this.createNonMembers());
-    }
-    deleteEarningMembers(index) {
-        const control = <FormArray>this.familyForm.controls['earningMembers'];
-        control.removeAt(index);
-    }
-    deleteMembers(index) {
-        const control = <FormArray>this.familyForm.controls['nonEarningMembers'];
-        control.removeAt(index);
     }
 
-    getLocation() {
-        let master_name = 'PDLOCATIONAPPROACH';
-        this._pd.getAllMasterDatas(master_name).subscribe(data => {
-            console.log('data', data);
-            data.records.forEach(val => {
-                if (val.isactive == 1) {
-                    this.locationdata.push(val);
-                }
-            })
-        });
-    }
-    getComment() {
-        let master_name = 'COMMENTSONLOCALITY';
-        this._pd.getAllMasterDatas(master_name).subscribe(data => {
-            console.log('data', data);
-            data.records.forEach(val => {
-                if (val.isactive == 1) {
-                    this.commentData.push(val);
-                }
-            })
-        });
-    }
-    getCustomer() {
-        let master_name = 'CUSTOMERBEHAVIOUR';
-        this._pd.getAllMasterDatas(master_name).subscribe(data => {
-            console.log('data', data);
-            data.records.forEach(val => {
-                if (val.isactive == 1) {
-                    this.customerData.push(val);
-                }
-            })
-        });
-    }
-    getRelation() {
-        let master_name = 'RELATIONSHIPS';
-        this._pd.getAllMasterDatas(master_name).subscribe(data => {
-            console.log('data', data);
-            data.records.forEach(val => {
-                if (val.isactive == 1) {
-                    this.relationData.push(val);
-                }
-            })
-        });
-    }
-   getOccupation() {
-        let master_name = 'OCCUPATIONMEMBERS';
-        this._pd.getAllMasterDatas(master_name).subscribe(data => {
-            console.log('data', data);
-            data.records.forEach(val => {
-                if (val.isactive == 1) {
-                    this.occupationData.push(val);
-                }
-            })
-        });
-    }
-    addBankdetails(i) {
-        this.step = i++;
-        const control = <FormArray>this.bankingForm.controls['itemRows'];
-        control.push(this.createBankarray());
-    }
-    deleteBankdetails(index: number) {
-        const control = <FormArray>this.bankingForm.controls['itemRows'];
-        control.removeAt(index);
-    }
+
     // load pd view component
     loadPdViewCompoent() {
         this.router.navigate(['../../viewpd', this.startPD], {relativeTo: this.route});
     }
-    onSubmit() {
-        if (!this.addressForm.valid) {
-            this.validateAllFormFields(this.addressForm);
-            return;
-        }
-        console.log('form', this.addressForm.value);
-        let records: any = {};
-        records.address = this.address.value;
-        records.address_type = this.addressType.value;
-        records.locality = this.locality.value;
-        records.pd_location = this.pdLocation.value;
-        records.comment_locality = this.commentlocality.value;
-        records.customer_behaviour = this.commentlocality.value;
-        records.neighbourhood = this.addressForm.value.items;
-        records.pdid = '250';
-        records.formid = '250';
-        records.fk_createdby = '250';
-        console.log('params', records);
-        this._pd.saveForm(records).subscribe(data => {
-            console.log('data', data);
-                let params: any = {};
-                params.pd_id = '250';
-                params.pd_form_id = '250';
-                console.log('param', params);
 
-        });
-    }
-    submitFamily() {
-        if (!this.familyForm.valid) {
-            this.validateAllFormFields(this.familyForm);
-            return;
-        }
-        console.log('data', this.familyForm.value);
-        let records: any = {};
-        records.no_of_years = this.years.value;
-        if (this.ownership.value == 'Others') {
-            records.ownership = this.ownershipOther.value;
-        } else {
-            records.ownership = this.ownership.value;
-        }
-        records.residence = this.residence.value;
-        if (this.ownership.value == 'Rented') {
-            records.what_rent = this.rent.value;
-        }
-        if (this.person.value == 'Other') {
-            records.person_met = this.personOther.value;
-        } else {
-            records.person_met = this.person.value;
-        }
-        records.family_members = this.members.value;
-        records.earning_members = this.familyForm.controls['earningMembers'].value;
-        records.non_earning_members = this.familyForm.controls['nonEarningMembers'].value;
-        records.pdid = '251';
-        records.formid = '251';
-        records.fk_createdby = '251';
-        console.log('params', records);
-        this._pd.saveForm(records).subscribe(data => {
-            console.log('data', data);
-        })
-    }
-    bankSubmit() {
-        if (!this.bankingForm.valid) {
-            this.validateAllFormFields(this.bankingForm);
-            return;
-        }
-        let records: any = {};
-        records.pdid = '252';
-        records.formid = '252';
-        records.fk_createdby = '252';
-        records.banking_details = this.bankingForm.controls['itemRows'].value;
-        console.log('data', records);
-        this._pd.saveForm(records).subscribe(data => {
-            console.log('data', data);
-        })
-    }
-    validateAllFormFields(formGroup: FormGroup) {
-        Object.keys(formGroup.controls).forEach(field => {
-            const control = formGroup.get(field);
-            if (control instanceof FormControl) {
-                control.markAsTouched({onlySelf: true});
-            } else if (control instanceof FormGroup) {
-                this.validateAllFormFields(control);
-            }
-        });
-    }
 
-}
+// end
+ }
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
index 00b3d4d69..a0dfcc36d 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html
@@ -45,9 +45,13 @@
                  
                </mat-card-header>
              <mat-card-content>
+               
+               <p *ngIf="master.pd_contact_person || master.pd_contact_mobileno "><span *ngIf="master.pd_contact_person"> <i class="fa-1x fa fa-user-o"></i> {{master.pd_contact_person}}</span>&nbsp;&nbsp; <span *ngIf="master.pd_contact_mobileno"> <i class="fa-1x fa fa-phone"></i> {{master.pd_contact_mobileno}}</span><span style="font-size:13px;"> (Lender Contact Details) </span> </p>
+              
                <p *ngIf="master.product_name">{{master.product_name}}<span *ngIf="master.subproduct_name"> / </span> {{master.subproduct_name}}</p>
                <p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span>  <span *ngIf="master.loan_amount" class="hover-icon"> / <i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
-               <p><span>{{master.addressline1}}<span *ngIf="master.addressline2"> , </span>{{master.addressline2}} <span *ngIf="master.addressline3"> , </span>{{master.addressline3}}</span></p>            
+               <p><span>{{master.addressline1}}<span *ngIf="master.addressline2"> , </span>{{master.addressline2}} <span *ngIf="master.addressline3"> , </span>{{master.addressline3}}</span></p>    
+               <p *ngIf="master.remarks"><span style="font-size:13px;"> Remarks : </span> <span style="color:red">{{master.remarks}}</span></p>        
              </mat-card-content>
            </mat-card>
                    
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts b/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts
index caf1cc177..4c582d98b 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts
@@ -48,6 +48,13 @@ import {QcCompletedPdComponent} from './list-pd/qc-completed-pd/qc-completed-pd.
 import {ClientInfoComponent} from './list-pd/start-pd/forms/client-info/client-info.component';
 import {SupplierInfoComponent} from './list-pd/start-pd/forms/supplier-info/supplier-info.component';
 import {PersonalInfoComponent} from './list-pd/start-pd/forms/personal-info/personal-info.component';
+import {CurrentLoanComponent} from "./list-pd/start-pd/forms/current-loan/current-loan.component";
+import {LoanDetailsComponent} from "./list-pd/start-pd/forms/loan-details/loan-details.component";
+import {OtherIncomeComponent} from "./list-pd/start-pd/forms/other-income/other-income.component";
+import { AssetsInfoComponent } from './list-pd/start-pd/forms/assets-info/assets-info.component';
+import {AddressComponent} from "./list-pd/start-pd/forms/address/address.component";
+import {FamilyDetailsComponent} from "./list-pd/start-pd/forms/family-details/family-details.component";
+import {BankingDetailsComponent} from "./list-pd/start-pd/forms/banking-details/banking-details.component";
 
 /**
  * Custom angular notifier options
@@ -121,7 +128,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
         AgmCoreModule.forRoot({apiKey: 'AIzaSyBtdO5k6CRntAMJCF-H5uZjTCoSGX95cdk'}), OwlDateTimeModule,
         OwlNativeDateTimeModule,
     ],
-    declarations: [ListPdComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent],
+    declarations: [BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent],
     exports: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, CompletedPdComponent, QcCompletedPdComponent],
     providers: [PdTrigerService, GetGeometricLocationService],
     entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent]
diff --git a/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts b/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
index 5923fb2ae..0ca33f2c0 100644
--- a/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
+++ b/ng6-seed/src/app/personal-discussion/pd-service/pd-triger.service.ts
@@ -221,21 +221,59 @@ export class PdTrigerService {
     }
 
     // save pd answers
-    savePDQuestions(saveData: any): Observable<any> {
-        saveData.createdby = this._aws.getlocale();
-        saveData.fk_createdon = currentdate;
-        // saveData[0].fk_updatedby = this._aws.getlocale();
-        // saveData[0].updatedon = currentdate;
-
-        return this._http.post<any>(this.apiUrl + "savePDQuestions", {"records": saveData})
-            .pipe(
-                catchError(this.handleError('operation', []))
-            )
-    }
+    // savePDQuestions(saveData: any): Observable<any> {
+    //     saveData.createdby = this._aws.getlocale();
+    //     saveData.fk_createdon = currentdate;
+    //     // saveData[0].fk_updatedby = this._aws.getlocale();
+    //     // saveData[0].updatedon = currentdate;
+    //
+    //     return this._http.post<any>(this.apiUrl + "savePDQuestions", {"records": saveData})
+    //         .pipe(
+    //             catchError(this.handleError('operation', []))
+    //         )
+    // }
 
     private handleError<T>(operation = 'operation', result?: T) {
         return (error: any): Observable<T> => {
             return of(result as T);
         };
     }
+// common Pd form details get for the Pd Process
+getPDFormDetailsWithID(pdID, formID ):Observable<any> {
+    return this._http.post<any>(this.apiUrl+"getPDFormDetails",{"pd_id":pdID,"pd_form_id" : formID})
+          .pipe(
+                  catchError(this.handleError('operation', []))
+          )
+  }
+
+   // save Pd form details
+  savePDFormDetailsWithID(saveData: any): Observable<any> {
+    saveData.fk_createdby = this._aws.getlocale();
+   // saveData[0].fk_updatedby = this._aws.getlocale();
+   // saveData[0].updatedon = currentdate;
+
+  return this._http.post<any>(this.apiUrl+"savePDFormDetails",{"records":saveData})
+  .pipe(
+      catchError(this.handleError('operation', []))
+    )
+  }
+
+  // save pd answers
+  savePDQuestions(saveData: any): Observable<any> {
+    saveData.createdby = this._aws.getlocale();
+    saveData.fk_createdon = currentdate;
+   // saveData[0].fk_updatedby = this._aws.getlocale();
+   // saveData[0].updatedon = currentdate;
+
+  return this._http.post<any>(this.apiUrl+"savePDQuestions",{"records":saveData})
+  .pipe(
+      catchError(this.handleError('operation', []))
+    )
+  }
+
+  // private handleError<T>(operation = 'operation', result?: T) {
+  //   return (error: any): Observable<T> => {
+  //     return of(result as T);
+  //   };
+  // }
 }
diff --git a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
index 943abcf9c..350c34216 100644
--- a/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
+++ b/ng6-seed/src/app/quality-check/qc-list/qc-view/qc-view.component.html
@@ -40,10 +40,14 @@
                    
                  </mat-card-header>
                <mat-card-content>
+                  <p *ngIf="master.pd_contact_person || master.pd_contact_mobileno "><span *ngIf="master.pd_contact_person"> <i class="fa-1x fa fa-user-o"></i> {{master.pd_contact_person}}</span>&nbsp;&nbsp; <span *ngIf="master.pd_contact_mobileno"> <i class="fa-1x fa fa-phone"></i> {{master.pd_contact_mobileno}}</span><span style="font-size:13px;"> (Lender Contact Details) </span> </p>
+              
                  <p *ngIf="master.product_name">{{master.product_name}} / {{master.subproduct_name}}</p>
                  <p *ngIf="master.pd_type_name"><span>{{master.pd_type_name}}</span> / <span *ngIf="master.loan_amount" class="hover-icon"><i class="fa-1x fa fa-rupee">&nbsp;</i>{{master.loan_amount}}</span></p>
                  <p><span>{{master.addressline1}},{{master.addressline2}} ,{{master.addressline3}}</span></p>            
-                  </mat-card-content>
+                 <p *ngIf="master.remarks"><span style="font-size:13px;"> Remarks : </span> <span style="color:red">{{master.remarks}}</span></p>        
+              
+                </mat-card-content>
              </mat-card>
                      
            
diff --git a/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.html b/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.html
index c6ce4f330..d1e73369d 100644
--- a/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.html
+++ b/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.html
@@ -34,54 +34,23 @@
                   <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editEntity(product)"><mat-icon>edit</mat-icon></button>
            
               </mat-cell>
-        </ng-container>
-           
+        </ng-container> 
            <mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
             </mat-row>
             </mat-table> 
         </ng-container>
-      </mat-card-content>
-    <!----<ng-container *ngIf="enityList.length > 0">
-      <div style="padding: 0 12px;">
-        <mat-card class="product-card" *ngFor="let product of dataSource.connect() | async">
-          <div fxLayout="row" fxLayoutAlign="start start">
-            <div fxFlex="90%" style="padding-top: 10px;">
-              <div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start">
-                <div fxFlex="0 1 auto" class="ml-xs" fxFlex="10%">
-                  {{ product.entity_name }}
-                </div>
-                <div fxFlex="0 1 auto" class="ml-xs" fxFlex="40%">
-                  <div> {{ product.full_name }} ({{product.short_name}})</div>
-                  <div> {{ product.branch_name }} </div>
-                  <div> {{product.city_name}}<span *ngIf="product.state_name">,</span> {{product.state_name}} </div>
-                </div>
-                <div fxFlex="0 1 auto" class="ml-xs" fxFlex="30%">
-                  <div> {{ product.phone_number }}</div>
-                  <div> {{ product.official_email }}</div>
-                </div>
-              </div>
-              <div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start">
-                <div fxFlex="0 1 auto" class="ml-xs">
-                </div>
-              </div>
-            </div> 
-            <div fxFlex="10%">
-              <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="editEntity(product)"><mat-icon>edit</mat-icon></button>
+        <div *ngIf="!noQuesMasterRecrdFound">
+            <mat-paginator  [length]="enityList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+              [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
+            </mat-paginator>
             </div>
-          </div>
-        </mat-card>
-      </div>
-    </ng-container>-->
+      </mat-card-content>
     <mat-card *ngIf="noQuesMasterRecrdFound">
       <mat-card-content>
       <div class="no-record-found">No Record Found ... </div>
     </mat-card-content>
     </mat-card>
-    <div *ngIf="enityList.length > 0">
-    <mat-paginator  [length]="enityList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
-      [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
-    </mat-paginator>
-    </div>
+    
   </mat-card>
 </div>
 
diff --git a/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.ts b/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.ts
index 5a2243c77..6e3aa81c9 100644
--- a/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.ts
+++ b/ng6-seed/src/app/settings/entity/entity-list/entity.list.component.ts
@@ -36,14 +36,14 @@ export class EntityListComponent implements OnInit {
   // pagination variable details
   length = 50;
   pageIndex = 0;
-  pageSize = 10;
+  pageSize = 10; 
   pageEvent: PageEvent;
 
   // data source variable details
   questionListData = null;
   public dataLength: number;
   public dataSource = new MatTableDataSource();
-  displayedColumns = ['categroy_name', 'question', 'actions'];
+  displayedColumns = ['entity_name', 'name','contact', 'actions'];
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
diff --git a/ng6-seed/src/app/template/questions/list/list.component.html b/ng6-seed/src/app/template/questions/list/list.component.html
index fd7fe1a92..ac0ed4c45 100644
--- a/ng6-seed/src/app/template/questions/list/list.component.html
+++ b/ng6-seed/src/app/template/questions/list/list.component.html
@@ -47,11 +47,10 @@
                 </mat-row>
                 </mat-table>
             </ng-container>
-                <div *ngIf="productList.length > 0">
-                <mat-paginator  [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+                
+                <mat-paginator #paginator [length]="productList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
                 [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
-              </mat-paginator>
-              </div>
+              </mat-paginator> 
    
   
      <!---- <ng-container *ngIf="productList.length > 0">
diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
index a78befcb0..5b9454794 100644
--- a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
+++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.html
@@ -21,9 +21,9 @@
                         <!--<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>-->
                     </div>
                 </div> 
-            <ng-container *ngIf="templateList.length > 0">
-                <div style="padding: 0 12px;">
-                        <mat-table [dataSource]="dataSource" >
+            <mat-card-content>
+                <ng-container  >
+                        <mat-table [dataSource]="dataSource" *ngIf="templateList.length > 0" >
     
                                 <ng-container matColumnDef="template_name">
                                       <mat-cell  fxFlex="25%" *matCellDef="let template;"> 
@@ -33,7 +33,7 @@
                                 <ng-container matColumnDef="lender_details">
                                   <mat-cell  fxFlex="65%" *matCellDef="let template;"> 
                                         <div *ngIf="template.lender_details.length > 0" class="text-line-limit">
-                                                <span *ngFor="let lender of template.lender_details ; let last = last" > {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <i *ngIf="!last">,<br></i></span>
+                                                <span *ngFor="let lender of template.lender_details ; let last = last" > {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <span *ngIf="!last">,<br><br></span></span>
                                             </div>
                                      </mat-cell>
                                </ng-container>
@@ -45,38 +45,18 @@
                                <mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
                                 </mat-row>
                                 </mat-table>
-                                 
-                    <!----<mat-card class="product-card" *ngFor="let template of dataSource.connect() | async">
-                        <div fxLayout="row" fxLayoutAlign="start start" style="padding: 6px 2px;">
+                       </ng-container>  
 
-                            <div fxFlex="90%" style="padding: 12px 8px;">
-
-                                <div fxLayout="row" fxLayoutWrap fxLayoutAlign="start center">
-                                    <div class="ml-xs" fxFlex="20%">
-                                       <span> {{ template.template_name }}</span> 
-                                    </div>
-                                    <div class="ml-xs" fxFlex="80%">
-                                        <div *ngIf="template.lender_details.length > 0">
-                                            <span *ngFor="let lender of template.lender_details ; let last = last"> {{lender.full_name}} - {{lender.product_name}} - {{lender.customer_segment_name}} <i *ngIf="!last">,<br></i></span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div fxFlex="10%">
-                                <button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Edit" matTooltipPosition="above" (click)="goToEdit(template.template_id)"><mat-icon>edit</mat-icon></button>
-                            </div>
-                        </div>
-                    </mat-card>-->
-                </div>
-            </ng-container>
-            <mat-card *ngIf="noQuesMasterRecrdFound">
+                        <mat-paginator    [length]="templateList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+                        [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
+                    </mat-paginator>
+        
+            <mat-card *ngIf="noTemplMasterRecrdFound">
+                <mat-card-content>
                 <div class="no-record-found">No Record Found ... </div>
-            </mat-card>
-            <div *ngIf="templateList.length > 0">
-            <mat-paginator #paginator class="mat-elevation-z1" [length]="templateList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
-                [pageSizeOptions]="[5, 10, 25, 50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
-            </mat-paginator>
-            </div>
+                 </mat-card-content>
+            </mat-card> 
+        </mat-card-content>
         </mat-card>
     </div>
 
diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss
index a0999becd..00579aa03 100644
--- a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss
+++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.scss
@@ -25,8 +25,8 @@
    overflow: hidden;
   //  white-space: nowrap;
    display: -webkit-box;
-   line-height: 16px;     /* fallback */
-   max-height: 32px;      /* fallback */
+   line-height: 15px;     /* fallback */
+   max-height: 44px;      /* fallback */
    -webkit-line-clamp: 2; /* number of lines to show */
    -webkit-box-orient: vertical;
    
diff --git a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts
index c72aaf2e2..34122c711 100644
--- a/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts
+++ b/ng6-seed/src/app/template/templates/templates-list/templates.list.component.ts
@@ -20,12 +20,13 @@ import { TemplatesAddComponent } from './templates-add/templates-add.component';
 })
 export class TemplateListComponent implements OnInit, OnDestroy {
 
-  public templateList = [];
+  public templateList: any[] = [];
   public listView: boolean;
   public names: string;
   public noTemplMasterRecrdFound: boolean = false;
   public search_cid : any;
 
+
   // pagination variable details
   length = 50;
   pageIndex = 0;
@@ -55,6 +56,10 @@ export class TemplateListComponent implements OnInit, OnDestroy {
     this.getTemplateMastersListDetails();
   }
  
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
 
  // get question master list details
   getTemplateMastersListDetails() {
@@ -123,7 +128,10 @@ export class TemplateListComponent implements OnInit, OnDestroy {
     //Called once, before the instance is destroyed.
     //Add 'implements OnDestroy' to the class.
   }
-
+  // padination page event call
+  pageChange(e) {
+    console.log(e);
+  }
 
   public m_templateList = {    
     "dataStatus": true,    
diff --git a/ng6-seed/src/index.html b/ng6-seed/src/index.html
index 84a9194ad..1703d3bd1 100644
--- a/ng6-seed/src/index.html
+++ b/ng6-seed/src/index.html
@@ -135,7 +135,7 @@
         .swal2-title, .swal2-header {
         text-align:left !important;   
         }     
-        .mat-card-subtitle{
+        .mat-card, .mat-card-content, .mat-card-subtitle{
             color:#000 !important;
         }  
     </style>