Angular6 pass data to ng-template

user_8346472 0
Viewed 11160

im newbie in angular6 and i have question. How can I pass data to ng-template from ngFor?

component.html

 <tr *ngFor="let user of data">
      <td>{{user.id}}</td>
      <td>{{user.username}}</td>
      <td>{{user.surname}}</td>
      <td>{{user.name}}</td>
      <td>{{user.email}}</td>
      <td>{{user.joinedAt | date:'dd-MM-yyyy HH:mm'}}</td>
      <td *ngFor="let roles of user.roles">{{roles.name}}</td>
      <td><button class="btn-dark" (click)="open(content)">EDIT</button></td>
    </tr>

<ng-template #content let-c="close" let-d="dismiss">
  //cant pass data there
</ng-template>

component.ts

export class Component implements OnInit {

  public data: any;

  constructor(private userService: UserService, private modalService: NgbModal) {
  }

  ngOnInit() {
    this.getListUsers();
  }

  getListUsers() {
    this.userService.getAll().subscribe(
      restItems => {
        this.data = restItems;
      }
    );
  }

  open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
  }

}

I consider use ng-container but when i paste <ng-container *ngTemplateOutlet="content"></ng-container>in ngFor i have errors. I was looking tutorial with ngtemplate/ng-container/ng-template-outlet on the internet but there is little information about that.

UPDATED!!! I find solution: https://stackblitz.com/edit/angular-bootstrap-modal?file=app%2Fapp.module.ts

angular6 angular
1 Answers

you can pass input data to ng-template using context:

@Component({
  selector: 'app-root',
  template: `      
          <ng-template #estimateTemplate let-lessonsCounter="estimate">
              <div> Approximately {{lessonsCounter}} lessons ...</div>
          </ng-template>

          <ng-container *ngTemplateOutlet="estimateTemplate;context:ctx">
          </ng-container>
`})
export class AppComponent {

    totalEstimate = 10;
    ctx = {estimate: this.totalEstimate};

}
user_27002390
Related