jQuery UI Widgets Forums Angular ngFor problem in jqxTabs

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  ilywanzi 2 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • ngFor problem in jqxTabs #111824

    ilywanzi
    Participant

    Hi, I want to render a list of string to tab component, but I found if I use ngFor, will cause error: TypeError: Cannot read property 'setAttribute' of undefined, or “Invalid structure!”, “TypeError: Cannot read property ‘getAttribute’ of undefined”.

    The code that will not cause error:

    <div *ngIf='tabNameList.length > 0'>
      <jqxTabs [theme]="'material'" #jqxTabs [height]="560" [initTabContent]="initWidgets">
        <ul>
          <li style="margin-left: 30px;">
            <div style="height: 20px; margin-top: 5px;">
              <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                US Indexes
              </div>
            </div>
          </li>
          <li>
            <div style="height: 20px; margin-top: 5px;">
              <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                NASDAQ compared to S&P 500
              </div>
            </div>
          </li>
        </ul>
        <div>
          one
        </div>
        <div>
          two
        </div>
      </jqxTabs>
    </div>

    The code that cause error:

    <div *ngIf='tabNameList.length > 0'>
      <jqxTabs [theme]="'material'" #jqxTabs [height]="560" [initTabContent]="initWidgets">
        <ul>
          <li style="margin-left: 30px;" *ngFor='let i of tabNameList'>
            <div style="height: 20px; margin-top: 5px;">
              <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                {{i}}
              </div>
            </div>
          </li>
        </ul>
        <div *ngFor='let i of tabNameList'>
          {{i}}
        </div>
      </jqxTabs>
    </div>

    Both of these two samples’ TS code are same.

    • This topic was modified 2 months, 2 weeks ago by  ilywanzi.
    ngFor problem in jqxTabs #111830

    Hristo
    Participant

    Hello ilywanzi,

    It is better to use the auto-create option for this scenario with the ngFor directive.
    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    ngFor problem in jqxTabs #111835

    ilywanzi
    Participant

    Hi, Hristo,
    That works! [auto-create]='false'save my life, thanks!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.