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

Suresh
April 19, 2023
644 views
0 votes
2 Answers

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

Select dropdown not working

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.

Answers

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'
    },
]

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.

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers