تعالوا نتكلم شوية عنن مميزات جديدة في #Angular - the new control flow… — قعدة مبرمجين

قعدة مبرمجين@developers_talks · 2.1K subscribers Open in TelegramOpen

تعالوا نتكلم شوية عنن مميزات جديدة في #Angular

- the new control flow

- deffered loading

اشترك في قناة التليجرام عشان تتعلم كل حاجة ببلاش

@its_dibo

عارف ال structural directives في Angular?

لو مش فاكرها افكرك, اللي هي *ngIf و *ngFor وكدة

دي بنسميها control flow لانها بتتحكم في ال flow بتاع ال DOM بتاعك التيمبليت dynamically

فملا لو عاوزين نظهر element معين في حالة معينة ممكن نعمل كدة

<div *ngIf="user.role==='admin'">I'm Admin</div>

الحوار دة بأة اتغير وبأة كدة

{#if user.role === 'Admin'} I'm Admin {/if}

بيفكرني ب Svelte

الطريقة القديمة كان فيها شوية مشاكل كدة منها

- بتضظر تعمل import ل CommonModule عشان تقدر تستخدمها

- ساعات بتضطر تستخدم ng-container لو مش عاوز تضيف element مالوش لازمة

- بتضطر تستخدم directive بدون اي داعي

بس الاهم من دة انه مش متوافق مع ال Signal components الجديدة

الصيغة العامة لل control flow الجديد كالتالي

{#xyz} {:abc} {/xyz}

{#xyz} -> start a new scope block group

{:abc} -> start a new scope block within the current block group

{/xyz} -> end the block group

example:

{#if} ... {:else} .... {/if}

بالمرة بأة تعالوا نتكلم عن ميزة جديدة اللي هي Deffered loading

{#defer on viewport}

<calendar-cmp />

{/defer}

ودة معناه باختصار اننا نقدر نأجل نحميل جزء من الصفحة

ودة مثال تاني

{#defer when sheduleLoaded}

<calendar-cmp />

{/defer}

t.me/developers_talks/105 Translate