How do I insert an Angular Component in CSS grid

Question

I'm learning Angular, and I'm working on a project ,in which, I need to use a CSS grid layout. However, I'm trying to find a way to insert a component inside a grid with given grid-area.

I tried to do this, <app-slots></app-slots>, in app.component.html but the component <app-slots> was counted as one grid place only; even though, it's 42 places.

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>

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;
      }
    
    }

Note: If something is not clear please tell me to add more info

Answer 1

can you just insert the component between your tags (instead of {{in}}), then send whatever updating variables from the .ts file through that using angular's binding feature ?

two way binding