Question 49882 in Javascript Question posted in
A very good W3school tutorial can be found here.

Tailwind Elements Select component not working with Angular *ngFor – Javascript

Here is my codes for basic angular component where I’m using Tailwind Elemets CSS framework.

app.componenets.ts

import { Component, OnInit } from '@angular/core';
import { Select, Datepicker, Input, initTE } from "tw-elements";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'test-tailwind-elements';

ngOnInit(): void {
    initTE({ Datepicker, Input, Select });
}

fruitsList: { name: string[] }[] = [
    {
    name: ['Mango', 'Papaya', 'Banana']
    },
    {
    name: ['Mango', 'Papaya', 'Banana']
    },
    {
    name: ['Mango', 'Papaya', 'Banana']
    }
]
}

app.component.html

<table>
    <tr>
        <th>Fruits</th>
    </tr>
    <!-- <tr *ngFor="let item of fruitsList;"> -->
    <tr>
        <td>
            <select data-te-select-init>
                <option value="1">Mango</option>
                <option value="2">Papaya</option>
                <option value="3">Banana</option>
            </select>
        </td>
    </tr>
</table>

The issue I’m facing at here is, if we don’t use *ngFor with <tr> html tag then it render the output properly. But, the moment we use that along with *ngFor it don’t render properly.

Here are some screenshots for reference

Select dropdown working
enter image description here

Select dropdown not working
enter image description here

I feel like with *ngFor when inside a loop it’s creating the dropdown list somehow it’s can’t able to register the components with DOM. But, I can’t able to understand how to fix this.

Need some help.

Tags:

2

Answers


  1. 0

    It seems you’re applying the ngFor in the wrong place. Apply it to the option (the thing that needs repeating for each item) and you should get the results that you’re looking for.

    Something like…

    <table>
    <tr>
        <th>Fruits</th>
    </tr>
    <tr>
        <td>
            <select data-te-select-init>
                <option *ngFor="let item of fruitsList;" value="{{item.value}}">{{item.name}}</option>
            </select>
        </td>
    </tr>
</table>

    And in the component:

    fruitsList: { value: string, name: string }[] = [
    {
        value: '1',
        name: 'Mango'
    },
    {
        value: '2',
        name: 'Papaya'
    },
    {
        value: '3',
        name: 'Banana'
    },
]
    Login or Signup to reply.
  2. 0

    It’s due to initialising the components in ngOnInit, before the selects are ready with data-te-select-init, so they never get initialised. Change to using AfterViewInit and it works fine.

    import { Component, AfterViewInit } from '@angular/core';
import { Select, Datepicker, Input, initTE } from "tw-elements";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'test-tailwind-elements';

  ngAfterViewInit() {
    initTE({ Datepicker, Input, Select });
  }

  fruitsList: { name: string[] }[] = [
    {
      name: ['Mango', 'Papaya', 'Banana']
    },
    {
      name: ['Mango', 'Papaya', 'Banana']
    },
    {
      name: ['Mango', 'Papaya', 'Banana']
    }
  ]
}

    Here’s a working version in a repo.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search