Create class using *ngFor

Asked
Active3 hr before
Viewed126 times

7 Answers

classusingcreatengfor
90%

In this post you’re going to learn how to access the index of the current array element using Angular’s NgFor directive! , In this post you’re going to learn how to reference an element inside an Angular template, ,In this post you’re going to learn how to use Angular’s NgFor directive to loop over data to render data or components

Example_snippet/controller/utility/_class.js/ // ... import { ContactCardCom. . .
// ...
import {
   ContactCardComponent
} from './contact-card.component';

@NgModule({
   declarations: [AppComponent, ContactCardComponent],
   // ...
})
export class AppModule {}
load more v
88%

Eventually you'll get them from a remote data server, For now, you'll create some mock heroes and pretend they came from the server

Example_snippet/controller/utility/_class.js/ content_copy . . .
      content_copy

      import {
         Hero
      } from './hero';

      export const HEROES: Hero[] = [{
            id: 11,
            name: 'Dr Nice'
         },
         {
            id: 12,
            name: 'Narco'
         },
         {
            id: 13,
            name: 'Bombasto'
         },
         {
            id: 14,
            name: 'Celeritas'
         },
         {
            id: 15,
            name: 'Magneta'
         },
         {
            id: 16,
            name: 'RubberMan'
         },
         {
            id: 17,
            name: 'Dynama'
         },
         {
            id: 18,
            name: 'Dr IQ'
         },
         {
            id: 19,
            name: 'Magma'
         },
         {
            id: 20,
            name: 'Tornado'
         }
      ];
load more v
72%

We use the NgFor directive to loop over an array of items and create multiple elements dynamically from a template element,,The template element is the element the directive is attached to

Example_snippet/controller/utility/_class.js/ @Component({ selector: 'ngfo. . .
@Component({
  selector: 'ngfor-example',
  template: `
 <ul>
  <li *ngFor="let person of people"> (1)
    {{ person.name }}
  </li>
 </ul>
 `
})
class NgForExampleComponent {
  people: any[] = [
    {
      "name": "Douglas  Pace"
    },
    {
      "name": "Mcleod  Mueller"
    },
    {
      "name": "Day  Meyers"
    },
    {
      "name": "Aguirre  Ellis"
    },
    {
      "name": "Cook  Tyson"
    }
  ];
}
load more v
65%

Format the odd & even rows of a table by assigning different classes to them,,Find the index of each element in the collection,index: number: The zero-based index of the current element in the collection

Example_snippet/controller/utility/_class.js/ ngFor. . .
ngFor
Step 2 continued with ngFor. . .
ngFor
Step 3 continued with Index. . .
Index
Step 4 continued with First. . .
First
Step 5 continued with Last. . .
Last
Step 6 continued with odd. . .
odd
Step 7 continued with even. . .
even
Step 8 continued with trackby. . .
trackby
load more v
75%

I don't really understand your problem ;-),There are two ways to set classes for a specific element:,The way you do with curly brackets:,In case anyone is looking to add a specific class based on the index, you can do something like this, I personally prefer the syntax here too

Example_snippet/controller/utility/_class.js/ @Component({ selector: 'my-a. . .
@Component({
  selector: 'my-app',
  template: `
    <div class="product-detail__variants">
      <template ngFor #variant [ngForOf]="variants" #index="index">
        <div *ngIf="currentVariant == index">
          <div class="product-detail-carousel-{{index}}">
            Test
          </div>
        </div>
      </template>
    </div>
  `,
  styles: [
    '.product-detail-carousel-2 { color: red }'
  ]
})
load more v
40%

Example_snippet/controller/utility/_using.js/ <!-- notice expression1 used t. . .
<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>
22%

ngFor by default tracks list items using object identity, This means that if you build a list of new objects from scratch with the exact same values as the previous list and pass this newly built list to ngFor, Angular will not be able to tell that a given list item is already present or not

Example_snippet/controller/utility/_using.js/ Can't bind to 'ngFor' since it. . .
Can 't bind to '
ngFor ' since it isn'
t a known property of 'tr'
load more v