I recently started learning Angular and am currently working on a project that requires the use of a CSS grid layout. However, I'm facing an issue with inserting a component inside a grid area specified by grid-area.
My attempt to achieve this in app.component.html using
<app-slots></app-slots><app-slots> occupying only one grid place, despite needing 42 places.
Here is the code snippet from slots.component.html:
<div class="abc" *ngFor="let in of getArrayOfNumbers(42) ;let i = index" [style.grid-row] = "i+1" style = "height:20px" > {{in}} </div> And here is the relevant code snippet from slots.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-slots',
templateUrl: './slots.component.html',
styleUrls: ['../../app.component.css']
})
export class SlotsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getArrayOfNumbers(x: number){
var slots:number[] = [];
var a: number = x;
while(x != 0){
slots.push(x);
x--;
}
return slots;
}
}
If you need more clarification or additional information, please feel free to let me know!