How to pass lists$ from list.component to ng-template

im provided code you could see the pipeline of function calls and how the ng-template passes to modal.compoent.html.
………………………………………………………………………………………………………………………………..

List.component.html

<div class="list">
    <div class="header">
        <h3>{{list.name}}</h3>
        <span 
        style="
        display: flex; 
        width: 25%; 
        justify-content: space-between;">
            <h3>{{cards.length}}</h3>
            <button class="list-options-btn"></button>
        </span>
    </div>
    <div class="btn-container">
        <button class="card-add-btn" (click)="openModal(createCardTemplate)">Add new card</button>
    </div>
    <div class="cards-container" *ngIf="lists$ | async as lists">
        <app-card
        *ngFor="let card of cards" 
        [card]=card
        [lists]=lists
        ></app-card>
    </div>

    <ng-template #createCardTemplate>
        <div>
            <label for="name">Name</label><br>
            <input id="name" formControlName="name" type="text">
        </div>
        <div>
            <label for="description">Description</label><br>
            <input id="description" formControlName="description" type="text">
        </div>
        <div>
            <label for="dueDate">Due Date</label><br>
            <input id="dueDate" formControlName="dueDate" type="date">
        </div>
        <div>
            <label for="priority">Priority</label><br>
            <select id="priority" formControlName="priority">
                <option value="1">Low</option>
                <option value="2">Medium</option>
                <option value="3">High</option>
            </select>
        </div>
        <div>
            <label for="listId">List</label><br>
            <select id="listId" formControlName="listId">
                <option *ngFor="let list of lists$ | async" value={{ list.id }}>
                    {{ list.name }}
                 </option>
            </select>
        </div>
    </ng-template>
</div>

List.component.ts

import { Component, Input, TemplateRef } from '@angular/core';
import { CardDto, Priority } from 'src/Dtos/CardDto';
import { CardListDto } from 'src/Dtos/CardListDto';
import { Observable } from 'rxjs';
import { ListsService } from 'src/services/lists.service';
import { ModalService } from 'src/services/modal.service';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent {
  @Input()
  list: CardListDto = new CardListDto;
  @Input()
  cards: CardDto[] = [];
  lists$: Observable<CardListDto[]> | null = null;

  constructor(
    private listsService: ListsService, 
    private modalService: ModalService){}

  openModal(modalTemplate: TemplateRef<any>) {
    this.modalService
      .open(modalTemplate, { title: 'New Card', data: this.lists$ })
      .subscribe((action) => {
        console.log('modalAction', action);
      });
  }

  ngOnInit(){
    this.lists$ = this.listsService.getLists();
    this.lists$.subscribe(lists => console.log(lists));
  }
}

Modal.sevice.ts

import { DOCUMENT } from '@angular/common';
import {
  ComponentFactoryResolver,
  Inject,
  Injectable,
  Injector,
  TemplateRef,
} from '@angular/core';
import { Subject } from 'rxjs';
import { ModalComponent } from 'src/app/modal/modal.component';

@Injectable()
export class ModalService {
  private modalNotifier?: Subject<string>;
  constructor(
    private resolver: ComponentFactoryResolver,
    private injector: Injector,
    @Inject(DOCUMENT) private document: Document
  ) {}

  open(content: TemplateRef<any>, options?: { size?: string; title?: string; data?: any }) {
    const modalComponentFactory = this.resolver.resolveComponentFactory(ModalComponent);
    const contentViewRef = content.createEmbeddedView(null);
    const modalComponent = modalComponentFactory.create(this.injector, [contentViewRef.rootNodes]);

    modalComponent.instance.size = options?.size;
    modalComponent.instance.title = options?.title;
    modalComponent.instance.data = options?.data; // Pass lists$ as a property of the ModalComponent
    modalComponent.instance.closeEvent.subscribe(() => this.closeModal());
    modalComponent.instance.submitEvent.subscribe(() => this.submitModal());

    modalComponent.hostView.detectChanges();

    this.document.body.appendChild(modalComponent.location.nativeElement);
    this.modalNotifier = new Subject();
    return this.modalNotifier?.asObservable();
  }

  closeModal() {
    this.modalNotifier?.complete();
  }

  submitModal() {
    this.modalNotifier?.next('confirm');
    this.closeModal();
  }
}

Modal.component.ts

import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output,
} from '@angular/core';
import { Observable } from 'rxjs';
import { CardListDto } from 'src/Dtos/CardListDto';

@Component({
  selector: 'modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
})
export class ModalComponent{
  @Input() size? = 'md';
  @Input() title? = 'Modal title';
  @Input() data: any;
  

  @Output() closeEvent = new EventEmitter();
  @Output() submitEvent = new EventEmitter();

  constructor(private elementRef: ElementRef) {}

  ngOnInit(){
    (<Observable<CardListDto[]>>this.data).subscribe(
      data => {
        console.log(data)
      }
        
    )
  }

  close(): void {
    this.elementRef.nativeElement.remove();
    this.closeEvent.emit();
  }

  submit(): void {
    this.elementRef.nativeElement.remove();
    this.submitEvent.emit();
  }
}

**Modal.component.html
**

<div class="modal {{ size }}">
  <div class="modal-header">
    {{ title }}
    <span class="modal-close" (click)="close()">✕</span>
  </div>
  <div class="modal-content">
    <ng-content></ng-content>
  </div>
  <div class="modal-footer">
    <button (click)="submit()">Submit</button>
  </div>
</div>

<div class="modal-backdrop" (click)="close()"></div>