add-product.component.html

<app-page-header title="Add Product" title1="Add Product" activeitem="Pages"></app-page-header>

        <!-- Start::row-1 -->
        <div class="grid grid-cols-12 gap-x-6">
          <div class="col-span-12">
            <div class="box !bg-transparent border-0 shadow-none">
              <div class="box-body p-0">
                <div class="grid grid-cols-12 gap-x-6">
                  <div class="col-span-12 xl:col-span-6">
                    <div class="box ">
                      <div class="box-body">
                        <div class="space-y-3">
                          <div class="space-y-2">
                            <label class="ti-form-label mb-0">Product Title</label>
                            <input type="text" class="my-auto ti-form-input"
                              placeholder="Dolar Leather Handbag For Women">
                          </div>
                          <div class="space-y-2">
                            <label class="ti-form-label mb-0">Product Id</label>
                            <input type="text" class="my-auto ti-form-input" placeholder="#2515445145">
                          </div>
                          <div class="">
                            <label class="ti-form-label">Product Description</label>
                            <div id="product-editor" class="productive-description">
                              <angular-editor [config]="config"></angular-editor>
                          </div>
                          </div>
                          <div class="space-y-2">
                            <label class="ti-form-label">Product Features</label>

                            <textarea class="ti-form-input" rows="2"></textarea>
                            <label
                              class="ti-form-label mt-1 text-sm font-normal opacity-70 text-gray-500 dark:text-white/70 mb-0">*Description
                              should not exceed 500 letters</label>
                          </div>
                          <div class="grid grid-cols-12 gap-4">
                            <div class="col-span-12 lg:col-span-6">
                              <div class="space-y-2 product-1">
                                <label class="ti-form-label mb-0">Product Status</label>
                                <ng-select class="ti-form-select product-search" placeholder="Status">
                                  <ng-option value="">Status</ng-option>
                                  <ng-option value="Clothing">Publish</ng-option>
                                  <ng-option value="Footwear">Unpublish</ng-option>
                                  <ng-option value="Accesories">Schedule</ng-option>
                                </ng-select>
                              </div>
                            </div>
                            <div class="col-span-12 lg:col-span-6">
                              <div class="space-y-2  product-1">
                                <label class="ti-form-label mb-0">Product Visibility</label>
                                <ng-select class="ti-form-select product-search"  placeholder="Visibility">
                                  <ng-option value="">Visibility</ng-option>
                                  <ng-option value="1">Private</ng-option>
                                  <ng-option value="2">Public</ng-option>
                                </ng-select>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-span-12 xl:col-span-6">
                    <div class="box">
                      <div class="box-body space-y-3">
                        <div class="grid grid-cols-12 gap-4">
                          <div class="col-span-12 lg:col-span-4">
                            <div class="space-y-2 product-1">
                              <label class="ti-form-label mb-0">Product Category</label>
                              <ng-select class="ti-form-select product-search"  placeholder="Category">
                                <ng-option value="">Category</ng-option>
                                <ng-option value="Clothing">Clothing</ng-option>
                                <ng-option value="Footwear">Footwear</ng-option>
                                <ng-option value="Accesories">Accesories</ng-option>
                                <ng-option value="Grooming">Grooming</ng-option>
                                <ng-option value="Ethnic &amp; Festive">Ethnic &amp; Festive</ng-option>
                                <ng-option value="Jewellery">Jewellery</ng-option>
                                <ng-option value="Toys &amp; Babycare">Toys &amp; Babycare</ng-option>
                                <ng-option value="Festive Gifts">Festive Gifts</ng-option>
                                <ng-option value="Kitchen">Kitchen</ng-option>
                                <ng-option value="Dining">Dining</ng-option>
                                <ng-option value="Home Decors">Home Decors</ng-option>
                                <ng-option value="Stationery">Stationery</ng-option>
                              </ng-select>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-4">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Gender</label>
                              <ng-select class="ti-form-select product-search"  placeholder="Gender">
                                <ng-option value="">Gender</ng-option>
                                <ng-option value="1">Male</ng-option>
                                <ng-option value="2">Female</ng-option>
                                <ng-option value="3">Others</ng-option>
                              </ng-select>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-4">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Brand</label>
                              <ng-select class="ti-form-select product-search"  placeholder="Select">
                                <ng-option value="">Select</ng-option>
                                <ng-option value="Armani">Armani</ng-option>
                                <ng-option value="Lacoste">Lacoste</ng-option>
                                <ng-option value="Puma">Puma</ng-option>
                                <ng-option value="Spykar">Spykar</ng-option>
                                <ng-option value="Mufti">Mufti</ng-option>
                                <ng-option value="Home Town">Home Town</ng-option>
                                <ng-option value="Arrabi">Arrabi</ng-option>
                              </ng-select>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-6">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Published Date and Time</label>
                                   <dp-date-picker
                      class="ti-form-input joining-date flatpickr-input date active"
                      placeholder="Choose date"
                      [config]="datePickerConfig"
                      required="true"
                    >
                    </dp-date-picker>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-6">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Product Size</label>
                              <ng-select class="ti-form-select product-search"  placeholder="Size">
                                <ng-option value="Extra Small">Extra Small</ng-option>
                                <ng-option value="Small">Small</ng-option>
                                <ng-option value="Medium">Medium</ng-option>
                                <ng-option value="Large">Large</ng-option>
                                <ng-option value="XL">XL</ng-option>
                                <ng-option value="xxl">xxl</ng-option>
                              </ng-select>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-4">
                            <div class="space-y-2">
                              <label class="ti-form-label mb-0">Actual Price </label>
                              <input type="text" class="my-auto ti-form-input" placeholder="$550">
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-4">
                            <div class="space-y-2">
                              <label class="ti-form-label mb-0">Dealer Price </label>
                              <input type="text" class="my-auto ti-form-input" placeholder="$400">
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-4">
                            <div class="space-y-2">
                              <label class="ti-form-label mb-0">Discount</label>
                              <input type="text" class="my-auto ti-form-input" placeholder="10%">
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-6">
                            <div class="space-y-2">
                              <label class="ti-form-label">Available Colors</label>
                              <ng-select class="ti-form-select product-search"  placeholder="Colors">
                                <ng-option value="">Colors</ng-option>
                                <ng-option value="1">blue</ng-option>
                                <ng-option value="2">pink</ng-option>
                                <ng-option value="3">yellow</ng-option>
                                <ng-option value="4">orange</ng-option>
                                <ng-option value="5">lemon-green</ng-option>
                                <ng-option value="6">green</ng-option>
                              </ng-select>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-6">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Availabilty</label>
                              <ng-select class="ti-form-select product-search"  placeholder="Availabilty">
                                <ng-option value="">Availabilty</ng-option>
                                <ng-option value="1">Instock</ng-option>
                                <ng-option value="2">Out Of Stock</ng-option>
                              </ng-select>
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-6">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Type</label>
                              <input type="text" class="my-auto ti-form-input" placeholder="Hand Bag">
                            </div>
                          </div>
                          <div class="col-span-12 lg:col-span-6">
                            <div class="space-y-2  product-1">
                              <label class="ti-form-label mb-0">Item Weight</label>
                              <input type="text" class="my-auto ti-form-input" placeholder="250grams">
                            </div>
                          </div>
                        </div>
                        <div class="space-y-2">
                          <label class="flex justify-between ti-form-label">
                            <span class="my-auto">Product Images</span></label>
                            <ngx-dropzone (change)="onSelect($event)">
                              <ngx-dropzone-label>Drop Files here to upload</ngx-dropzone-label>
                              <ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
                                <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
                              </ngx-dropzone-preview>
                            </ngx-dropzone>

                        </div>
                        <div class="space-y-2">
                          <label class="ti-form-label">Product Tags</label>
                          <ng-select
                          [items]="multiSelect"
                          bindLabel="name"
                          bindValue="name"

                          [multiple]="true"
                          [(ngModel)]="multiSelectSelected"
                          name="multiSelectSelected"
                        >
                        </ng-select>

                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="box-footer text-end border-t-0 px-0">
                <a class="ti-btn ti-btn-primary"><i class="ri-add-line"></i>Add Product</a>
                <a class="ti-btn ti-btn-secondary"><i class="ri-file-download-line"></i>Save Product</a>
                <a class="ti-btn ti-btn-danger"><i class="ri-delete-bin-line"></i>Discard Product</a>
              </div>
            </div>
          </div>
        </div>
        <!-- End::row-1 -->