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

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

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

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

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

import {NgFor} from "@angular/common";

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

@Component({
	.....
	imports: [....., NgFor],
	....
})

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

<ul>
	
</ul>

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

<ul>
	<li *ngFor="let el of arr">
		{{ el }}
	</li>
</ul>

एक सरणी दी गई है:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

इस सरणी के प्रत्येक तत्व को एक अलग पैराग्राफ में आउटपुट करें।

पिछले कार्य को इस तरह संशोधित करें कि पैराग्राफ में हमारी सरणी के तत्वों के वर्ग आउटपुट हों।