I am calling a component like

  <tbody>
          <tr app-UtilityInformationDynamicColumnRow [questions]='questions' [startFrom]=47 qkey='PQ005NITR'
            keylen='12' [Columns]="Columns">
            <td>N2</td>
            <td>Vol</td>
          </tr>

and component looks like

@Component({
selector: '[app-UtilityInformationDynamicColumnRow]',
template: `<ng-content></ng-content>
          <td *ngFor="let item of ' '.repeat(Columns).split('');let i=index;" [@enterAnimation]
          class="control"  >
              <app-answer-block [controlOptions]="questions[getQuestionKey(i)]" 
              (valueChange)="valueChange($event, getQuestionKey(i))"></app-answer-block>
        </td> 
`
 })

and in UI it looks like enter image description here

but once I close and open the panel, controls get hidden enter image description here

It is happening only for components which have to attribute selector. others are fine. working perfectly. One more thing I found, If we add display:contents to td, controls getting visible. but why? and what is the proper way to solve this ?

0 Answers