0

Here is the rub. I need to color cells in a html table.

The table is made by a ngFor and is 7 column wide. Each column is a component created by the ngFor.

<table>
    <app-day-display-schedule *ngFor="let day of daysOfWeek" [day]="day" [colorToPaint]="colorToPaint"
        [activityId]="activityId" #dataCellToPaint></app-day-display-schedule>
</table>

I tried with ViewChild but, obviously, I can only paint the first cell in each component.

I made a test with ViewChildren

@ViewChildren('dataCellToPaint') dataCellToPaint: QueryList<NgModel>;

ngAfterViewInit() {
    console.log(this.dataCellToPaint);
}

So I get the list with all 7 components inside, but how can I say from which cell I want to start painting ? Should I ForEach() each time I want to paint ?

I set up the methods in the child component for the painting but I am a bit at loss how I should make them work.

Any help appreciated. Cheers.

Specialka
  • 51
  • 1
  • 10
  • Have you tried painting it inside your child component instead? You could pass a @Input with a boolean to tell it if it should be painted or not. Inside the component use a ng-class. Or just use some propety inside the day object – Caio Oliveira Oct 15 '20 at 10:17
  • Yes, currently I even moved back the viewchildren inside the child component, and I get all the data cell in the QueryList but I can't manipulate the cell to change their color with Renderer2 for instance – Specialka Oct 15 '20 at 10:23

0 Answers0