Base solution for your next web application

Activities of "sophoana"

Answer

I want to show like this.

Question

Hi Support

Can not show dropdow button when click on dropdow menu.

HTML code:

<td style="width: 130px" [hidden]="!isGrantedAny('Pages.Items.Edit', 'Pages.Items.Delete')">
       <div class="btn-group dropdown" dropdown container="body">
             <button dropdownToggle class="dropdown-toggle btn btn-sm btn-primary">
                  <i class="fa fa-cog"></i><span class="caret"></span> {{"Actions" | localize}} </button>
                        <ul class="dropdown-menu" *dropdownMenu>  <li>
                              <a href="javascript:;" *ngIf="'Pages.Items.Edit' | permission"
                                     (click)="updateItems(record)">{{'Edit' | localize}}</a>
                                     </li>
                                     <li>
                                          <a href="javascript:;" *ngIf="'Pages.Items.Delete' | permission"
                                           (click)="deleteItems(record)">{{'Delete' | localize}}</a>
                                      </li>
                               </ul>
                           </div>
                     </td>
                                    

TS file:


onSelectedUnitMeasurePrice(): void {
      let selectedUnitMeasurePrice = new Array<NameValueOfString>();
      selectedUnitMeasurePrice.push(this.unitMeasurePrice);
      this._unitMeasureServiceProxy.sendAndGetSelectedUnitMeasures(selectedUnitMeasurePrice)
          .subscribe((ChartAccount: NameValueOfString[]) => {              
              _.forEach(ChartAccount, item => {                  
                  this.itemPrice.push(new ItemPricesEditDto({price: this.priceValue, unitMeasureId: parseInt(item.value), unitMeasureName: item.name, id: 0}));
                  this.primengTableHelper.totalRecordsCount = this.itemPrice.length;                  
                  this.primengTableHelper.records = this.itemPrice;
                  this.priceValue = null;
                  this.unitMeasurePrice = null;
              });
          });
  }

Hi support

Cannot Display Data on P-Table

HTML file:

<p-table

                                                [value]=&quot;itemPrice&quot;
                                                [loading]=&quot;loading&quot;
                                                [responsive]=&quot;primengTableHelper.isResponsive&quot;&gt;
                                                &lt;ng-template pTemplate=&quot;header&quot;&gt;
                                                    &lt;tr&gt;                                                            
                                                        &lt;th style=&quot;width: 100px&quot;&gt;{{'Actions' | localize}}&lt;/th&gt;
                                                        &lt;th pSortableColumn=&quot;unitMeasureName&quot;&gt;
                                                            {{'UnitMeasure' | localize}}
                                                            &lt;p-sortIcon field=&quot;unitMeasureName&quot;&gt;&lt;/p-sortIcon&gt;
                                                        &lt;/th&gt;
                                                        &lt;th pSortableColumn=&quot;price&quot;&gt;
                                                            {{'Price' | localize}}
                                                            &lt;p-sortIcon field=&quot;price&quot;&gt;&lt;/p-sortIcon&gt;
                                                        &lt;/th&gt;
                                                    &lt;/tr&gt;
                                                &lt;/ng-template&gt;
                                                &lt;ng-template pTemplate=&quot;body&quot; let-record=&quot;$implicit&quot;&gt;
                                                    &lt;tr&gt;                                                            
                                                        &lt;td style=&quot;width: 130px&quot;
                                                            [hidden]=&quot;!isGrantedAny(&#39;Pages.Items.Edit&#39;, &#39;Pages.Items.Delete&#39;)&quot;&gt;
                                                            &lt;div class=&quot;btn-group dropdown&quot; dropdown container=&quot;body&quot;&gt;
                                                                &lt;button dropdownToggle class=&quot;dropdown-toggle btn btn-sm btn-primary&quot;&gt;
                                                                    &lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt; {{"Actions" | localize}}
                                                                &lt;/button&gt;
                                                                &lt;ul class=&quot;dropdown-menu&quot; *dropdownMenu&gt;                                                
                                                                    &lt;li&gt;
                                                                        &lt;a href=&quot;javascript:;&quot; *ngIf=&quot;&#39;Pages.Items.Edit&#39; | permission&quot;
                                                                        (click)=&quot;deleteItems(record)&quot;&gt;{{'Edit' | localize}}&lt;/a&gt;
                                                                    &lt;/li&gt;
                                                                    &lt;li&gt;
                                                                        &lt;a href=&quot;javascript:;&quot; *ngIf=&quot;&#39;Pages.Items.Delete&#39; | permission&quot;
                                                                        (click)=&quot;deleteItems(record)&quot;&gt;{{'Delete' | localize}}&lt;/a&gt;
                                                                    &lt;/li&gt;
                                                                &lt;/ul&gt;
                                                            &lt;/div&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;span class=&quot;ui-column-title&quot;&gt;{{'UnitMeasure' | localize}}&lt;/span&gt;
                                                            &lt;span title=&quot;{{record.unitMeasureName}}&quot;&gt;&lt;/span&gt;
                                                        &lt;/td&gt;
                                                        &lt;td&gt;
                                                            &lt;span class=&quot;ui-column-title&quot;&gt;{{'Price' | localize}}&lt;/span&gt;
                                                            &lt;span title=&quot;{{record.price}}&quot;&gt;&lt;/span&gt;
                                                        &lt;/td&gt;
                                                    &lt;/tr&gt;
                                                &lt;/ng-template&gt;
                                            &lt;/p-table&gt;

Hi support

Different between p-autocomplet border and input text. I want to show the same both border.

Hi support

How to apply p-autocomplete inside p-table

HTML file:

<span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"><</span>td</span> <span class="colour" style="color: rgb(47, 156, 10);">pEditableColumn</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"><</span>p-cellEditor</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"><</span>ng-template</span> <span class="colour" style="color: rgb(47, 156, 10);">pTemplate</span><span class="colour" style="color: rgb(25, 144, 184);"><span class="colour" style="color: rgb(95, 99, 100);">="</span>input<span class="colour" style="color: rgb(95, 99, 100);">"</span></span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"><</span>p-dropdown</span> <span class="colour" style="color: rgb(47, 156, 10);">[options]</span><span class="colour" style="color: rgb(25, 144, 184);"><span class="colour" style="color: rgb(95, 99, 100);">="</span>brands<span class="colour" style="color: rgb(95, 99, 100);">"</span></span> <span class="colour" style="color: rgb(47, 156, 10);">[(ngModel)]</span><span class="colour" style="color: rgb(25, 144, 184);"><span class="colour" style="color: rgb(95, 99, 100);">="</span>rowData.brand<span class="colour" style="color: rgb(95, 99, 100);">"</span></span> <span class="colour" style="color: rgb(47, 156, 10);">[style]</span><span class="colour" style="color: rgb(25, 144, 184);"><span class="colour" style="color: rgb(95, 99, 100);">="</span>{<span class="colour" style="color: rgb(95, 99, 100);">'</span>width<span class="colour" style="color: rgb(95, 99, 100);">'</span>:<span class="colour" style="color: rgb(95, 99, 100);">'</span>100%<span class="colour" style="color: rgb(95, 99, 100);">'</span>}<span class="colour" style="color: rgb(95, 99, 100);">"</span></span><span class="colour" style="color: rgb(95, 99, 100);">></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"></</span>p-dropdown</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"></</span>ng-template</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"><</span>ng-template</span> <span class="colour" style="color: rgb(47, 156, 10);">pTemplate</span><span class="colour" style="color: rgb(25, 144, 184);"><span class="colour" style="color: rgb(95, 99, 100);">="</span>output<span class="colour" style="color: rgb(95, 99, 100);">"</span></span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);">{{rowData.brand}}</span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"></</span>ng-template</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"></</span>p-cellEditor</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span><span class="colour" style="color: rgb(0, 0, 0);"></span><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(201, 44, 44);"><span class="colour" style="color: rgb(95, 99, 100);"></</span>td</span><span class="colour" style="color: rgb(95, 99, 100);">></span></span>

Question

Hi Support

I want to submit two module only time. but I used only function. And than it alert message on point "/** 2. function submit */".

My code:

save(): void {
      this.saving = true;
      /** 1. function submit */
      this._customerServiceProxy.createCustomers(this.customer)
          .pipe(finalize(() => this.saving = false))
          .subscribe(() => {
            /** 2. function submit */
              this._defaultSettingServiceProxy.createOrEditDefaultSettingByName(this.defaultSettingSaleCode)
              .pipe(finalize(() => this.saving = false))
              .subscribe(() => {this.modalSave.emit(null);})
              this.notify.info(this.l('SavedSuccessfully'));
              this.close();
              this.modalSave.emit(null);
          });
    }

-Errow message

Hi support

My task I want to show like this:

HTML File:

<span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"row mb-4"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                        </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"col-sm-12"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                            </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"clickable-item text-muted"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">*ngIf</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">(click)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSettingAreShown=!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(128, 128, 128);">><</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"fa fa-angle-down"</span><span class="colour" style="color: rgb(128, 128, 128);">></</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> {{"ShowCustomerSetting" | localize}}</span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                            </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"clickable-item text-muted"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">*ngIf</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSettingAreShown"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">(click)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSettingAreShown=!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(128, 128, 128);">><</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"fa fa-angle-up"</span><span class="colour" style="color: rgb(128, 128, 128);">></</span><span class="colour" style="color: rgb(86, 156, 214);">i</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> {{"HideCustomerSetting" | localize}}</span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">span</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                        </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                    </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);"> </span> <span class="colour" style="color: rgb(212, 212, 212);">                    </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"row mb-4"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">[hidden]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"!CustomerSettingAreShown"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                        </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">class</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"form-group col-md-6"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                            </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">label</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">for</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"CustomerSaleCode"</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);">{{"CustomerSaleCode" | localize}}</span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">label</span><span class="colour" style="color: rgb(128, 128, 128);">></span><span class="colour" style="color: rgb(212, 212, 212);">                            </span> <span class="colour" style="color: rgb(212, 212, 212);">                            </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">p-autoComplete</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">id</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">name</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">field</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"name"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">[(ngModel)]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"chartOfAccountSaleCode"</span><span class="colour" style="color: rgb(212, 212, 212);"> </span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">[suggestions]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"filteredChartOfAccountSaleCode"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">(completeMethod)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"filterChartOfAccountSaleCode($event)"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">(onSelect)</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"onSelectedChartOfAccountsSaleCode($event)"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">[minLength]</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"1"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">inputStyleClass</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"form-control"</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(156, 220, 254);">styleClass</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"width-percent-100"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(128, 128, 128);"><</span><span class="colour" style="color: rgb(86, 156, 214);">ng-template</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">let-chartOfAccount</span><span class="colour" style="color: rgb(212, 212, 212);"> </span><span class="colour" style="color: rgb(156, 220, 254);">pTemplate</span><span class="colour" style="color: rgb(212, 212, 212);">=</span><span class="colour" style="color: rgb(206, 145, 120);">"item"</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                                    {{chartOfAccount.name}}</span> <span class="colour" style="color: rgb(212, 212, 212);">                                </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">ng-template</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                            </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">p-autoComplete</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                        </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span> <span class="colour" style="color: rgb(212, 212, 212);">                    </span><span class="colour" style="color: rgb(128, 128, 128);"></</span><span class="colour" style="color: rgb(86, 156, 214);">div</span><span class="colour" style="color: rgb(128, 128, 128);">></span>

html file: <label><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">class</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"row mb-4"</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">[hidden]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"!CustomerSettingAreShown"</span><span class="colour" style="color:rgb(128, 128, 128)">></span></label><span class="colour" style="color:rgb(212, 212, 212)">                        </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">class</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"form-group col-md-6"</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)">                            </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">label</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">for</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"CustomerSaleCode"</span><span class="colour" style="color:rgb(128, 128, 128)">></span><span class="colour" style="color:rgb(212, 212, 212)">{{"CustomerSaleCode" | localize}}</span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">label</span><span class="colour" style="color:rgb(128, 128, 128)">></span><span class="colour" style="color:rgb(212, 212, 212)">                            </span>

<span class="colour" style="color:rgb(212, 212, 212)">                            </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">p-autoComplete</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">id</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">name</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"SingleSelectSaleCodeInput"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">field</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"name"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">[(ngModel)]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"chartOfAccountSaleCode"</span><span class="colour" style="color:rgb(212, 212, 212)"> </span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">[suggestions]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"filteredChartOfAccountSaleCode"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">(completeMethod)</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"filterChartOfAccountSaleCode($event)"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">(onSelect)</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"onSelectedChartOfAccountsSaleCode($event)"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">[minLength]</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"1"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">inputStyleClass</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"form-control"</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(156, 220, 254)">styleClass</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"width-percent-100"</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(128, 128, 128)"><</span><span class="colour" style="color:rgb(86, 156, 214)">ng-template</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">let-chartOfAccount</span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(156, 220, 254)">pTemplate</span><span class="colour" style="color:rgb(212, 212, 212)">=</span><span class="colour" style="color:rgb(206, 145, 120)">"item"</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)">                                    {{chartOfAccount.name}}</span> <span class="colour" style="color:rgb(212, 212, 212)">                                </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">ng-template</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)">                            </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">p-autoComplete</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(212, 212, 212)">                        </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(128, 128, 128)">></span> <span class="colour" style="color:rgb(128, 128, 128)"></span><span class="colour" style="color:rgb(212, 212, 212)"> </span><span class="colour" style="color:rgb(128, 128, 128)"></</span><span class="colour" style="color:rgb(86, 156, 214)">div</span><span class="colour" style="color:rgb(128, 128, 128)">></span>

Hi support

Cannot show p-autocomplete in [hidden].

I'm use: -angular 7 -asp.net core

.html file <div class="row mb-4" [hidden]="!CustomerSettingAreShown"> <div class="form-group col-md-6"> <label for="CustomerSaleCode">{{"CustomerSaleCode" | localize}}</label>
<p-autoComplete id="SingleSelectSaleCodeInput" name="SingleSelectSaleCodeInput" field="name" [(ngModel)]="chartOfAccountSaleCode" [suggestions]="filteredChartOfAccountSaleCode" (completeMethod)="filterChartOfAccountSaleCode($event)" (onSelect)="onSelectedChartOfAccountsSaleCode($event)" [minLength]="1" inputStyleClass="form-control" styleClass="width-percent-100"> <ng-template let-chartOfAccount pTemplate="item"> {{chartOfAccount.name}} </ng-template> </p-autoComplete> </div> </div>

Showing 11 to 20 of 33 entries