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
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};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With