myHotTake

How Does ngFor Work in Angular? A Simple Guide

Written by

Tyler

in

,
Tweet
Share
Pin
Share

If you find this explanation helpful, feel free to like or share it with others who might enjoy it too!

I’m a designer, and I’m in charge of creating custom T-shirts for a group of friends. Each friend has a unique style, so I need to make sure the T-shirts I create for them reflect their personality—whether that’s a specific color, design, or text.

ngFor is like my special tool that lets me quickly replicate the T-shirt designs for each friend. Instead of manually designing each one, I give ngFor a list of friends, and it automatically creates a T-shirt for each person on the list. It’s efficient, like if I handed ngFor a list with 10 names, and ngFor would make 10 T-shirts—one for each friend—no extra work for me!

Now, there’s also ngClass. Think of ngClass like a set of customizable stickers I can put on the T-shirts based on the friend’s personality. If one friend loves skateboarding, I might give them a “cool” sticker. If another friend is really into space, I might put a “starry” sticker on theirs. ngClass lets me decide, based on the person, which stickers to add. It’s like a conditional rule: if the friend’s favorite hobby matches my preset options, I stick on the corresponding design.

So, when I combine ngFor and ngClass, I’m not only creating the T-shirts quickly (with ngFor), but I’m also customizing them with different designs (using ngClass) for each individual’s personality.

In the end, thanks to these two tools, I can efficiently create personalized T-shirts that are as unique as each of my friends.

Part 2: Bringing It Back to Code

Imagine I’m using ngFor to loop through a list of friends and automatically generate T-shirts for each. This would look something like this in Angular:

<div *ngFor="let friend of friends">
  <p>{{ friend.name }}'s T-shirt</p>
</div>

In this case, *ngFor acts as the magical T-shirt-making machine I talked about earlier. The directive loops over the friends array in the component, and for each friend, it creates a new <div> element with their name.

Here’s the JavaScript behind the scenes that makes it work:

export class TShirtComponent {
  friends = [
    { name: 'Alice', hobby: 'skateboarding' },
    { name: 'Bob', hobby: 'space' },
    { name: 'Charlie', hobby: 'music' }
  ];
}

In this example, friends is an array in the component. Each friend has a name and a hobby. The ngFor loop goes through this list and creates a new element for each friend, displaying their name.

Adding Style with ngClass

Now, let’s say we want to personalize each friend’s T-shirt further. For example, we want to add a special “cool” sticker to friends who are into skateboarding, or a “starry” sticker for those who love space. This is where ngClass comes into play.

Here’s how we can add ngClass to the code:

<div *ngFor="let friend of friends" [ngClass]="getStickerClass(friend)">
  <p>{{ friend.name }}'s T-shirt</p>
</div>

Now, inside our component, we can write the logic to determine which class (or “sticker”) to apply:

export class TShirtComponent {
  friends = [
    { name: 'Alice', hobby: 'skateboarding' },
    { name: 'Bob', hobby: 'space' },
    { name: 'Charlie', hobby: 'music' }
  ];

  getStickerClass(friend: { hobby: string }) {
    if (friend.hobby === 'skateboarding') {
      return 'cool-sticker';
    } else if (friend.hobby === 'space') {
      return 'starry-sticker';
    } else {
      return 'default-sticker';
    }
  }
}

In this example, the getStickerClass() method checks the hobby of each friend and returns a class name based on that hobby. ngClass then applies the corresponding class to the <div> element, effectively adding a sticker (or style) to the T-shirt.

Final Thoughts / Key Takeaways

  1. ngFor: This is used to loop through an array (like our list of friends) and generate multiple elements based on the array’s data. It’s like the T-shirt machine that automatically creates items for each friend.
  2. ngClass: This directive allows us to dynamically assign CSS classes to elements based on conditions or logic. It’s like adding custom stickers to the T-shirts depending on the hobby of each friend.

Together, ngFor and ngClass allow us to efficiently generate and customize elements in Angular, helping us avoid repetitive code and making our apps more dynamic and interactive.

By thinking of Angular’s directives in terms of T-shirt design and personalizing them with stickers, we can see how these concepts make our code cleaner and more efficient.

Post Views: 4

More posts