0

is there any way to this like we do in php $x = 1 then if($a == $b) { $x++; } echo $x; how we can do this in angular i do not have any idea about this can someone help to solve out this problem

 <ul *ngIf="contractMilestone" class="nav nav-tabs">
                      <li *ngFor="let mile of contractMilestone;let i=index;">
                        <a  class="milstone-version {{i ==0 ? 'active':''}}" data-toggle="tab" href="#home{{i}}">{{i+1}}. New Milestone</a>
                        <div *ngFor="let deliver of contractDlieverable; let d=index;">
                        <a class="deliver-version"  data-toggle="tab" *ngIf="mile.contract_milestone_id === deliver.milestone_id" href="#home{{i}}">{{i+1}}.{{d+1}} New Deliverable</a>
                        </div>
                        <a (click)="adddeliverable(mile.contract_milestone_id)" class="addDeliverable">Add New Deliverable</a>
                      </li>

this give me some thing like thisenter image description here

but i want the output like this

  1. new milestone
  1.1 new deliverable
  1.2 new deliverable
  2. new milesone
  2.1 new deliverable
  2.2 new deliverable
abubakkar tahir
  • 737
  • 1
  • 11
  • 13
  • Could you elaborate on what this $x = 1 then if($a == $b) { $x++; } echo $x; is supposed to achieve ? – Delwyn Pinto Feb 04 '20 at 12:22
  • i want to declear varible x = 0 then *ngFor inside *ngFor i want to increment x++ and then show {{x}} – abubakkar tahir Feb 04 '20 at 12:24
  • BTW, those are clearly not _unordered_ lists, so it should be the `
      ` element, not the `
      `. This problem has a pure HTML+CSS solution. https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1
     – mbojko Feb 04 '20 at 12:33
  • every thing working perfect change arrangment of number is give me problem – abubakkar tahir Feb 04 '20 at 12:34

2 Answers2

1

You could create a custom pipe to filter the collection in the template:

@Pipe({
  name: 'contractMilestone',
})
export class ContractMilestonePipe implements PipeTransform {
  transform(items: any[], contract_milestone_id): any {
    return items.filter(item => item.milestone_id === contract_milestone_id);
  }
}

<li *ngFor="let mile of contractMilestone;let i=index;">
    <a class="milstone-version {{i ==0 ? 'active':''}}" data-toggle="tab" href="#home{{i}}">{{i+1}}. New Milestone</a>
    <div *ngFor="let deliver of (contractDlieverable | contractMilestone: mile.contract_milestone_id); let d=index;">
        <a class="deliver-version" data-toggle="tab" href="#home{{i}}">{{i+1}}.{{d+1}} New Deliverable</a>
    </div>
    <a (click)="adddeliverable(mile.contract_milestone_id)" class="addDeliverable">Add New Deliverable</a>
</li>
mbojko
  • 13,503
  • 1
  • 16
  • 26
  • can i directoly put condition in *ngfor like if contractDlieverable.id == milestone.id if condition is true then loop will be executed – abubakkar tahir Feb 04 '20 at 12:31
  • I don't think so. – mbojko Feb 04 '20 at 12:34
  • where i put this create new file for this @Pipe({ name: 'contractMilestone', }) export class ContractMilestonePipe implements PipeTransform { transform(items: any[], contract_milestone_id): any { return items.filter(item => item.milestone_id === contract_milestone_id); } } – abubakkar tahir Feb 04 '20 at 12:35
  • 1
    Use Angular CLI. Start with `ng generate pipe contractMilestone`, and edit the created file. – mbojko Feb 04 '20 at 12:37
0

I created a stackblitz for you:

https://stackblitz.com/edit/angular-wubyss

export class AppComponent  {
  foos = [
    "new milestone",
    "new milestone"
  ];

  bars = [
    "new deliverable",
    "new deliverable"
  ];
}

<ul>
  <li *ngFor="let foo of foos;let main = index">
    <a href="#" [class.active]="main == 0" class="milstone-version">{{main +1 }}. {{foo}}</a>
    <div *ngFor="let bar of bars;let sec = index">
      <a href="#" >{{main +1 }}.{{sec + 1}} {{bar}}</a>
    </div>
    <a href (click)="adddeliverable()" class="addDeliverable">Add New Deliverable</a>
  </li>
</ul>

My output is:

1. new milestone
1.1 new deliverable
1.2 new deliverable
2. new milestone
2.1 new deliverable
2.2 new deliverable
Seryoga
  • 793
  • 6
  • 15