1
<div>
  <h3>All Templates</h3>
  <ul *ngFor="let number of numbers">
    <ng-container [ngTemplateOutlet]='number % 2 == 0 ? even_tpl : odd_tpl' [ngTemplateOutletContext]="{number:number}"></ng-container>
  </ul>
</div>

<ng-template #odd_tpl let-number='number'>
  <li>Odd: {{number}}</li>  
</ng-template>

<ng-template #even_tpl let-number='number'>
  <li>Even: {{number}}</li>  
</ng-template>

PS. sample code from Vivek Doshi's answer here.

but what I'm looking for is to only go-inside ng-template when a condition meets, something like this:

<ng-template #odd_tpl let-number='number' *ngIf="number > 10">
  <li>Odd: {{number}}</li>  
</ng-template>

but it is showing an error:

Identifier 'number' is not defined. The component declaration, template variable declarations, and element references do not contain such a member ng.

I want to access the passed argument number, is this possible?

Hemang
  • 26,840
  • 19
  • 119
  • 186
  • Try using ` – yurzui Jun 25 '20 at 04:05
  • Yeah, it worked that way but even if condition won't meet it will add a container in DOM. So that's why I don't want to use that. – Hemang Jun 25 '20 at 04:08
  • Oh, my bad, it is adding some element in DOM because of previous ngFor loop from where I'm calling this template. So the only solution is to use `ng-container` with `ngIf`. – Hemang Jun 25 '20 at 04:13

1 Answers1

1

So as per yurzui commented I've used ng-container, previously there was some element getting added to the DOM but it was a mistake which I fixed and now things are works just fine.

I can check for the condition like this -

<ng-template #odd_tpl let-number='number'>
   <ng-container *ngIf="number > 10">
     <li>Odd: {{number}}</li>  
   </ng-container>
</ng-template>
yurzui
  • 205,937
  • 32
  • 433
  • 399
Hemang
  • 26,840
  • 19
  • 119
  • 186