اية هي ميزة Standalone الجديدة في Angular وامتي وازاي نستخدمها؟

علشان نعرف اية اللي الميزة الجديدة دي بتقدمهولنا خلونا ندي بصة الاول الدنيا كانت ماشية ازاي قبل الـ standalone

قبل كدة كان في حاجة اسمها NgModule ودة عبارة عن Angular module بنجمع فيه الاجزاء كلها سواء components, directives, pipes, services واي حاجة لها علاقة بانجولار

كل جزء بيكون مرتبط بـ NgModule معين, ولازم يكون مرتبط بـ NgModule واحد بس

طب اية المشكلة في الـ pattern دة؟

أولا لو انت محتاج function بسيطة بس كان لازم تـ import الـ module كله بكل اجزاؤه عشان تعرف تستخدم الفنكشن الصغيرة دي, ودة طبعا كان بيسبب بطئ في الابليكيشن بتاعنا

ثانيا بما ان كل جزء مرتبط بـ module معين فدة معناه انه مش reusable يعني ماتقدرش تستهدمه مثلا في موديول تاني .. الطريقة الوحيدة انك تـ هةحخقف الموديول كله حتي لو محتاج منه فنكشن واحدة

Standalone components in Angular

تيجي بأة ميزة standalone عشان تسهل علينا حياتنا, بالطريقة دي مش محتاجين نسجل أي جزء في أي أي موديول

بمعني اخر كل جزء مستقل بذاته ومش مربوط بأي موديول ومالوش اي علاقة بأي جزء تاني .. ودة سبب تسميته standalone

بالطريقة دي نقدر نستغني عن NgModule

بما ان الـ standalone مستقل بذاته فنقدر نعيد استخدامه جوة اي جزء تاني براحتنا .. ومش مضطرين نحمل الموديول كله عشان فنكشن واحدة

اي حاجة في Angular نقدر نحولها لـ standalone سواء component, directive, pipe, service او اي حاجة لها علاقة بانجولار

طريقة تحويل اي جزء لـ standalone سهلة جدا, مش محتاجة مننا غير سطر واحد بس

كل اللي علينا نعمله نزود `standalone: true` في الـ component metadata .. بس كدةّ

importing standalone component to another component

لو حبيت استخدم اي standalone component كل اللي محتاج اعمله اني ازوده في `imports` بس

خد بالك قبل كدة كنت بحط ال components في ال declarations دلوقت الكلام دة اتلغي وبقيت اي حاجة محتاجها بحطها في imports علي طول

@component({
 imports: [AnotherStandAloneComonent],
 standalone: true;
})