Angular में for डायरेक्टिव

मान लीजिए हमारे पास एक सरणी है:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

आइए टेम्पलेट फ़ाइल में एक लूप के साथ इस सरणी को पुनरावृत्त करें। इसके लिए *ngFor डायरेक्टिव है। यह एक सरणी को पुनरावृत्त कर सकती है और उसके प्रत्येक तत्व को एक अलग टैग में आउटपुट कर सकती है।

शुरुआत में इस डायरेक्टिव को आयात करना होगा:

app/app.component.tsimport {NgFor} from "@angular/common";

और डेकोरेटर में आयात अनुभाग में इसे जोड़ें:

app/app.component.ts@Component({
  .....
  imports: [....., NgFor],
  ....
})

अब इसका उपयोग किया जा सकता है। आइए देखें कि यह कैसे किया जाता है। मान लीजिए हमारे पास एक ul सूची है:

app/app.component.html<ul>
  
</ul>

आइए ऐसा करें कि हमारी सरणी एक लूप में पुनरावृत्त हो और उसका प्रत्येक तत्व li टैग्स में आउटपुट हो। यह निम्नलिखित तरीके से किया जाता है:

app/app.component.html<ul>
  <li *ngFor="let el of arr">
    {{ el }}
  </li>
</ul>

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}