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..952ecbda0 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,89 @@
-<p>
-  supplier-info works!
-</p>
+<!--<pre> {{ m_group | json}}</pre>-->
+<mat-card style="padding: 12px;">
+  <form [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">
+          <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/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..9f52ed182 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,206 @@
-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._supplierQuesFrom = this._formBuilder.group({
+      main_raw_materials: [null, Validators.compose([Validators.required])],
+      supplier_details: this._formBuilder.array([
+        this.initDetails(),
+      ])
+    });
+    this.getPdSupplierFormDetails();
   }
 
+  getPdSupplierFormDetails() {
+    this.pdTrigerService.getPDFormDetailsWithID(this.pdid, '1').subscribe(
+          data => {
+            if (data) {
+              if (data.records) {
+                // this.noRecordFound = false;
+                // this.entityBillingInfoRecord = data.records;
+              } else {
+                // this.noRecordFound = true;
+              }
+            } else {
+              // this.noRecordFound = true;
+            }
+      }
+    );
+  }
+
+   // 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: ['']
+    });
+  }
+
+  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.questionsService.addQuestionMasterDetails(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 1d7761abf..16fcc96b5 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
@@ -377,7 +377,7 @@
                         <ng-container [ngSwitch]="selectedFormsCategory.form_id">
                         <!-- start supplier type questions section -->
                             <ng-container  *ngSwitchCase="1">
-                                <p>supplier</p>
+                                <app-supplier-info [pdid]="startPD"></app-supplier-info>
                                 </ng-container>
                                 <!-- end supplier type questions -->
 
@@ -388,8 +388,7 @@
                                 <!-- end client type questions -->
 
                                 <!-- start personal type questions -->
-                                <ng-container  *ngSwitchCase="3">
-                                        <p>Personal</p>
+                                <ng-container *ngSwitchCase="3">
                                         </ng-container>
                                 <!-- end personal type questions -->
                                 </ng-container>
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 33b989c0c..a9e41f2d6 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
@@ -189,6 +189,14 @@ export class PdTrigerService {
 )
 }
 
+// common Pd form details get for the Pd Process
+getPDFormDetailsWithID(pdID, formID ):Observable<any> {
+    return this._http.post<any>(this.apiUrl+"getPDFormDetails",{"pdid":pdID,"pd_form_id" : formID})
+          .pipe(
+                  catchError(this.handleError('operation', []))
+          )
+  }
+
   // save pd answers
   savePDQuestions(saveData: any): Observable<any> {
     saveData.createdby = this._aws.getlocale();