Angular 20’de Kontrol Ak\u0131\u015f\u0131: @for Yeni *ngFor mu?<\/p>\n
Angular 20 ile birlikte gelen en heyecan verici yeniliklerden biri de Uzun s\u00fcredir Angular geli\u015ftiricileri olarak, listeleri ve koleksiyonlar\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, Peki, @for<\/code> direktifi. Peki, bu yeni \u00f6zellik ger\u00e7ekten de eski ve tan\u0131d\u0131k *ngFor<\/code>‘un yerini alacak kadar g\u00fc\u00e7l\u00fc m\u00fc? Bu makalede, @for<\/code> ve *ngFor<\/code>‘u detayl\u0131 olarak kar\u015f\u0131la\u015ft\u0131rarak, kullan\u0131m senaryolar\u0131n\u0131 ve performans farklar\u0131n\u0131 ele alaca\u011f\u0131z. \u00d6ncelikle, *ngFor<\/code>‘un ne kadar etkili oldu\u011funu hat\u0131rlayal\u0131m. Zira @for<\/code>, bir\u00e7ok durumda *ngFor<\/code>‘dan daha h\u0131zl\u0131 ve temiz kod yazmam\u0131z\u0131 sa\u011fl\u0131yor.<\/p>\n*ngFor<\/code> direktifine a\u015finay\u0131z. Ancak, b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken *ngFor<\/code>‘un performans sorunu yaratabilece\u011fini biliyoruz. \u0130\u015fte tam bu noktada @for<\/code> devreye giriyor. Yeni gelen bu yap\u0131, \u00f6zellikle b\u00fcy\u00fck listelerle \u00e7al\u0131\u015f\u0131rken \u00f6nemli performans avantajlar\u0131 sunuyor. Ayr\u0131ca, daha temiz ve okunabilir kod yazmam\u0131za da yard\u0131mc\u0131 oluyor.<\/p>\n@for Direktifi: Kullan\u0131m \u00d6rnekleri<\/h2>\n
@for<\/code> direktifi, dizi veya nesneleri yinelemek i\u00e7in kullan\u0131lan bir yap\u0131d\u0131r. Kullan\u0131m\u0131 olduk\u00e7a basittir. A\u015fa\u011f\u0131daki \u00f6rnekte, bir diziyi yineleyerek her bir \u00f6\u011feyi ekrana yazd\u0131r\u0131yoruz:<\/p>\n\n<ul>\n <li *ngFor=\"let item of items\">{{ item }}<\/li>\n<\/ul>\n\n<ul>\n <li @for=\"let item of items\">{{ item }}<\/li>\n<\/ul>\n<\/code><\/pre>\n@for<\/code>‘un kullan\u0131m\u0131 *ngFor<\/code>‘a olduk\u00e7a benzer. Ancak, @for<\/code>‘un alt\u0131nda yatan performans optimizasyonlar\u0131 onu b\u00fcy\u00fck veri k\u00fcmeleri i\u00e7in \u00e7ok daha uygun hale getiriyor.<\/p>\n@for ve *ngFor Kar\u015f\u0131la\u015ft\u0131rmas\u0131<\/h2>\n
@for<\/code> ile *ngFor<\/code> aras\u0131nda tam olarak ne gibi farklar var? As\u0131l fark, performans ve optimizasyonlarda yat\u0131yor. @for<\/code>, \u00f6zellikle b\u00fcy\u00fck veri k\u00fcmeleri i\u00e7in daha optimize edilmi\u015f bir yakla\u015f\u0131m sunuyor. Bu, daha h\u0131zl\u0131 render s\u00fcreleri ve daha iyi performans anlam\u0131na geliyor. Bunun yan\u0131 s\u0131ra, baz\u0131 durumlarda kodun daha temiz ve okunabilir olmas\u0131n\u0131 da sa\u011flayabilir. Ancak, @for<\/code> her zaman *ngFor<\/code>‘dan daha iyi bir \u00e7\u00f6z\u00fcm olmayabilir. K\u00fc\u00e7\u00fck veri k\u00fcmeleri i\u00e7in *ngFor<\/code> kullan\u0131m\u0131 daha pratik ve anla\u015f\u0131l\u0131r olabilir.<\/p>\n