Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mohamedelshahat55/angular-interview-questions-by-arabic

List of Angular Interview Questions and answers By Arabic
https://github.com/mohamedelshahat55/angular-interview-questions-by-arabic

angular angular-components angular-forms angular-signals angular17 angularjs interview-questions javascript-framework ngrx rxjs typescript

Last synced: about 1 year ago
JSON representation

List of Angular Interview Questions and answers By Arabic

Awesome Lists containing this project

README 

          



# Angular Interview Questions



> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



## Sources



This Repo is inspired by the following sources:



1. [angular.dev](https://angular.dev/)

2. [TekTutorialsHub-Logo](https://www.tektutorialshub.com/angular-tutorial/)

3. [Logo ConcretePage.com](https://www.concretepage.com/angular/)

4. [List of 300 Angular Interview Questions and answers](https://github.com/sudheerj/angular-interview-questions)



| No. | Questions                                                                                                                                                                             |

| --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| 1   | [What is Angular Framework?](#what-is-angular-framework)                                                                                                                              |

| 3   | [What is TypeScript?](#what-is-typescript)                                                                                                                                            |

| 4   | [Write a pictorial diagram of Angular architecture?](#write-a-pictorial-diagram-of-angular-architecture)                                                                              |

| 5   | [What are the key components of Angular?](#what-are-the-key-components-of-angular)                                                                                                    |

| 6   | [What are directives?](#what-are-directives)                                                                                                                                          |

| 7   | [What are components?](#what-are-components)                                                                                                                                          |

| 9   | [What is a template?](#what-is-a-template)                                                                                                                                            |

| 10  | [What is a module?](#what-is-a-module)                                                                                                                                                |

| 11  | [What are lifecycle hooks available?](#what-are-lifecycle-hooks-available)                                                                                                            |

| 12  | [What is a data binding?](#what-is-a-data-binding)                                                                                                                                    |

| 13  | [What is metadata?](#what-is-metadata)                                                                                                                                                |

| 14  | [What is Angular CLI?](#what-is-angular-cli)                                                                                                                                          |

| 15  | [What is the difference between constructor and ngOnInit?](#what-is-the-difference-between-constructor-and-ngoninit)                                                                  |

| 16  | [What is a service?](#what-is-a-service)                                                                                                                                              |

| 17  | [What is dependency injection in Angular?](#what-is-dependency-injection-in-angular)                                                                                                  |

| 18  | [What is the purpose of async pipe?](#what-is-the-purpose-of-async-pipe)                                                                                                              |

| 19  | [What is the purpose of \*ngFor directive?](#what-is-the-purpose-of-ngfor-directive)                                                                                                  |

| 20  | [What are pipes?](#what-are-pipes)                                                                                                                                                    |

| 21  | [What is a parameterized pipe?](#what-is-a-parameterized-pipe)                                                                                                                        |

| 22  | [How do you chain pipes?](#how-do-you-chain-pipes)                                                                                                                                    |

| 23  | [What is a custom pipe?](#what-is-a-custom-pipe)                                                                                                                                      |

| 24  | [What is the difference between pure and impure pipe?](#what-is-the-difference-between-pure-and-impure-pipe)                                                                          |

| 25  | [What is HttpClient and its benefits?](#what-is-httpclient-and-its-benefits)                                                                                                          |

| 26  | [What are dynamic components?](#what-are-dynamic-components)                                                                                                                          |

| 27  | [What are router events?](#what-are-router-events)                                                                                                                                    |

| 28  | [What is activated route?](#what-is-activated-route)                                                                                                                                  |

| 29  | [How do you define routes?](#how-do-you-define-routes)                                                                                                                                |

| 30  | [What is the purpose of Wildcard route?](#what-is-the-purpose-of-wildcard-route)                                                                                                      |

| 31  | [What is Angular Universal?](#what-is-angular-universal)                                                                                                                              |

| 32  | [What is ng-content?](#what-is-ng-content)                                                                                                                                            |

| 33  | [What is Angular Input and Output and EventEmitter?](#what-is-angular-input-and-output-and-eventemitter)                                                                              |

| 34  | [Template Reference Variable in Angular](#template-reference-variable-in-angular)                                                                                                     |

| 35  | [What is ng-container in Angular?](#what-is-ng-container-in-angular)                                                                                                                  |

| 36  | [How to use ng-template and TemplateRef in Angular?](#how-to-use-ng-template-and-templateref-in-angular)                                                                              |

| 37  | [How to Use ngTemplateOutlet in Angular?](#how-to-use-ngtemplateoutlet-in-angular)                                                                                                    |

| 38  | [What are Signals?](#what-are-signals)                                                                                                                                                |

| 39  | [Why Signal?](#why-signal)                                                                                                                                                            |

| 40  | [Angular Signals and Observables: How and When to Use Each](#angular-signals-and-observables-how-and-when-to-use-each)                                                                |

| 41  | [What is Effect in Signal?](#what-is-effect-in-signal)                                                                                                                                |

| 42  | [ElementRef in Angular](#elementref-in-angular)                                                                                                                                       |

| 43  | [What is Renderer2?](#what-is-renderer2)                                                                                                                                              |

| 44  | [How to Use @ViewChild and @ViewChildren](#how-to-use-viewchild-and-viewchildren)                                                                                                     |

| 45  | [ContentChild and ContentChildren in Angular](#contentchild-and-contentchildren-in-angular)                                                                                           |

| 46  | [What are decorators in angular?](#what-are-decorators-in-angular)                                                                                                                    |

| 47  | [AfterViewInit, AfterViewChecked, AfterContentInit and AfterContentChecked in Angular](#afterviewinit-afterviewchecked-aftercontentinit-and-aftercontentchecked-in-angular)           |

| 48  | [What is View Encapsulation in Angular?](#what-is-view-encapsulation-in-angular)                                                                                                      |

| 49  | [What are Host and hostContext in Angular?](#what-are-host-and-hostcontext-in-angular)                                                                                                |

| 50  | [Angular Change Detection How Does It Really Work?](#angular-change-detection-how-does-it-really-work)                                                                                |

| 51  | [A Change Detection and Zone.js and Zoneless and Local Change Detection and Signals Story](#a-change-detection-and-zone-js-and-zoneless-and-local-change-detection-and-signals-story) |

| 52  | [Angular Signals Component API input and output and model](#angular-signals-component-api-input-and-output-and-model)                                                                 |

| 53  | [What is Resource API?](#what-is-resource-api)                                                                                                                                        |



# Angular Service Interview Questions






> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



| No. | Questions                                                                                                                                    |

| --- | -------------------------------------------------------------------------------------------------------------------------------------------- |

| 1   | [What is an Angular Service?](#what-is-an-angular-service)                                                                                   |

| 2   | [What Angular Services are used for?](#what-angular-services-are-used-for)                                                                   |

| 3   | [Advantages of Angular Service](#advantages-of-angular-service)                                                                              |

| 4   | [Benefits of Dependency Injection](#benefits-of-dependency-injection)                                                                        |

| 5   | [The five main players in the Angular Dependency Injection Framework?](#the-five-main-players-in-the-angular-dependency-injection-framework) |

| 6   | [Service Scope in Angular](#service-scope-in-angular)                                                                                        |

| 7   | [What is Angular Injector?](#what-is-angular-injector)                                                                                       |

| 8   | [When is Angular Injector created?](#when-is-angular-injector-created)                                                                       |

| 9   | [Registering the service with an injector](#registering-the-service-with-an-injector)                                                        |

| 10  | [What are Angular Providers?](#what-are-angular-providers)                                                                                   |

| 11  | [Types of Providers in Angular?](#types-of-providers-in-angular)                                                                             |

| 12  | [How Dependency Injection and Resolution Work in Angular?](#how-dependency-injection-and-resolution-work-in-angular)                         |

| 13  | [Element Injector Tree in Angular](#element-injector-tree-in-angular)                                                                        |

| 14  | [ProvidedIn root, any, and platform in Angular](#providedin-root-any-and-platform-in-angular)                                                |

| 15  | [@Self, @SkipSelf, and @Optional Decorators in Angular?](#@self-@skipself-@and-optional-decorators-in-angular)                               |






# Angular RxJS Interview Questions



> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



### Table of Contents



| No. | Questions                                                                                                                                                                                                                                                                                                        |

| --- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| 1   | [Explain RxJS Observable?](#explain-rxjs-observable)                                                                                                                                                                                                                                                             |

| 2   | [What are RxJS operators?](#what-are-rxjs-operators)                                                                                                                                                                                                                                                             |

| 3   | [What is Observable.pipe() and how to use it?](#what-is-observablepipe-and-how-to-use-it)                                                                                                                                                                                                                        |

| 4   | [What is the difference between RxJS of and from?](#what-is-the-difference-between-rxjs-of-and-from)                                                                                                                                                                                                             |

| 5   | [Explain RxJS map operator?](#explain-rxjs-map-operator)                                                                                                                                                                                                                                                         |

| 6   | [Explain RxJS switchMap operator?](#explain-rxjs-switchmap-operator)                                                                                                                                                                                                                                             |

| 7   | [Explain RxJS mergeMap operator?](#explain-rxjs-mergemap-operator)                                                                                                                                                                                                                                               |

| 8   | [Explain RxJS concatMap operator?](#explain-rxjs-concatmap-operator)                                                                                                                                                                                                                                             |

| 9   | [Explain RxJS exhaustMap operator?](#explain-rxjs-exhaustmap-operator)                                                                                                                                                                                                                                           |

| 10  | [How will you handle errors on observable using RxJS throwError?](#how-will-you-handle-errors-on-observable-using-rxjs-throwerror)                                                                                                                                                                               |

| 11  | [How will you handle errors on observable using RxJS catchError?](#how-will-you-handle-errors-on-observable-using-rxjs-catcherror)                                                                                                                                                                               |

| 12  | [Explain RxJS retry operator?](#explain-rxjs-retry-operator)                                                                                                                                                                                                                                                     |

| 13  | [Explain RxJS filter operator?](#explain-rxjs-filter-operator)                                                                                                                                                                                                                                                   |

| 14  | [Explain RxJS tap operator?](#explain-rxjs-tap-operator)                                                                                                                                                                                                                                                         |

| 15  | [Explain RxJS takeUntil operator?](#explain-rxjs-takeuntil-operator)                                                                                                                                                                                                                                             |

| 16  | [Explain RxJS debounceTime operator?](#explain-rxjs-debouncetime-operator)                                                                                                                                                                                                                                       |

| 17  | [Explain RxJS combineLatestWith operator?](#explain-rxjs-combinelatestwith-operator)                                                                                                                                                                                                                             |

| 18  | [Explain RxJS fromEvent operator?](#explain-rxjs-fromevent-operator)                                                                                                                                                                                                                                             |

| 19  | [What is the difference between Subject, BehaviorSubject, ReplaySubject, and AsyncSubject in RxJS? How do they differ in terms of behavior and use cases?](#what-is-the-difference-between-subject-behaviorsubject-replaysubject-and-asyncsubject-in-rxjs-how-do-they-differ-in-terms-of-behavior-and-use-cases) |

| 20  | [What are the best practices for managing Observable subscriptions in Angular and ensuring there are no memory leaks?](#what-are-the-best-practices-for-managing-observable-subscriptions-in-angular-and-ensuring-there-are-no-memory-leaks)                                                                     |

| 21  | [What are the differences between cold observable and hot observable?](#what-are-the-differences-between-cold-observable-and-hot-observable)                                                                                                                                                                     |

| 22  | [What are the differences between Observables and Promises?](#what-are-the-differences-between-observables-and-promises)                                                                                                                                                                                         |

| 23  | [What is a higher-order Observable?](#what-is-a-higher-order-observable)                                                                                                                                                                                                                                         |

| 24  | [How can you share a single Observable among multiple subscribers?](#how-can-you-share-a-single-observable-among-multiple-subscribers)                                                                                                                                                                           |






# Angular Form Interview Questions



> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



### Table of Contents



| No. | Questions                                                                                                                        |

| --- | -------------------------------------------------------------------------------------------------------------------------------- |

| 1   | [Describe the types of forms created in Angular application?](#describe-the-types-of-forms-created-in-angular-application)       |

| 2   | [How will you create reactive form in Angular?](#how-will-you-create-reactive-form-in-angular)                                   |

| 3   | [How will you create template-driven form in Angular?](#how-will-you-create-template-driven-form-in-angular)                     |

| 4   | [Explain FormControl?](#explain-formcontrol)                                                                                     |

| 5   | [Explain FormGroup?](#explain-formgroup)                                                                                         |

| 6   | [Explain FormArray?](#explain-formarray)                                                                                         |

| 7   | [Explain FormBuilder?](#explain-formbuilder)                                                                                     |

| 8   | [Explain FormRecord?](#explain-formrecord)                                                                                       |

| 9   | [How will you use valueChanges?](#how-will-you-use-valuechanges)                                                                 |

| 10  | [How will you use statusChanges?](#how-will-you-use-statuschanges)                                                               |

| 11  | [What is difference between setValue() and patchValue()?](#what-is-difference-between-setvalue-and-patchvalue)                   |

| 12  | [How will you add and remove controls on FormGroup dynamically?](#how-will-you-add-and-remove-controls-on-formgroup-dynamically) |

| 13  | [What is difference between (ngModelChange) and (change)?](#what-is-difference-between-ngmodelchange-and-change)                 |

| 14  | [How to add async validation in FormControl?](#how-to-add-async-validation-in-formcontrol)                                       |

| 15  | [How will you validate template-driven form?](#how-will-you-validate-template-driven-form)                                       |

| 16  | [How will you perform two-way binding using ngModel?](#how-will-you-perform-two-way-binding-using-ngmodel)                       |






# Angular Route Guards



> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



| No. | Questions                                                         |

| --- | ----------------------------------------------------------------- |

| 1   | [Uses of Angular Route Guards](#uses-of-angular-route-guards)     |

| 2   | [Types of Route Guards](#types-of-route-guards)                   |

| 3   | [What is CanActivate Guard](#what-is-canactivate-guard)           |

| 4   | [What is CanActivateChild Guard](#what-is-canactivatechild-guard) |

| 5   | [What is CanDeactivate Guard](#what-is-candeactivate-guard)       |

| 6   | [How to Use Resolve Guard](#how-to-use-resolve-guard)             |

| 7   | [How to Use CanLoad Guard](#how-to-use-canload-guard)             |






# HTTP



> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



| No. | Questions                                                             |

| --- | --------------------------------------------------------------------- |

| 1   | [What is Angular Http Interceptor](#what-is-angular-http-interceptor) |






# Error Handling in Angular Applications



> connect with me on [LinkedIn](https://www.linkedin.com/in/mohamed-elshahat-4017a1303) for more technical updates and content.



| No. | Questions                                                                            |

| --- | ------------------------------------------------------------------------------------ |

| 1   | [Why Handle Errors?](#why-handle-errors)                                             |

| 2   | [What is HttpErrorResponse?](#what-is-httperrorresponse)                             |

| 3   | [How Can Catching Errors in HTTP Request?](#how-can-catching-errors-in-http-request) |



## What is Angular Framework?



[⬆️ Back to Top](#top)



 

الـ Angular Framework هو منصة مفتوحة المصدر معتمدة على TypeScript، وبيستخدموها عشان يبنوا تطبيقات ويب، موبايل، وديسكتوب بكل سهولة. من أهم المميزات اللي بيوفرها الفريم وورك ده هي الـ declarative templates، ودي بتسهل الكتابة والتصميم. كمان فيه الـ dependency injection اللي بيخلي إعادة استخدام الكود والمرونة في الشغل أسهل. بالإضافة لكده، عندك أدوات شاملة من البداية للنهاية end to end tooling اللي بتسهل تطوير التطبيقات بشكل كبير.






## What is TypeScript?



[⬆️ Back to Top](#top)



 

ال TypeScript هو نسخة محسنة من JavaScript عملتها مايكروسوفت، والمميز فيه إنه بيضيف أنواع متغيرة (types) إلزامية زي الـ string و number، وكمان بيدعم حاجات زي الـ classes، والـ async/await، وميزات تانية كتير. وبعدين بيتحول الكود المكتوب بـ TypeScript إلى كود عادي مكتوب بـ JavaScript اللي كل المتصفحات بتفهمه.

الـ Angular كله متبني الـ TypeScript كلغة رئيسية.



### مثال بسيط لاستخدام TypeScript






```typescript

function greeter(person: string) {

  return "Hello, " + person;

}



let user = "mohamed";



document.body.innerHTML = greeter(user);

```






في المثال ده، الـ greeter function مش بتقبل غير المتغيرات اللي نوعها string بس كـ argument، وده مثال على قوة TypeScript في تحديد نوع المتغيرات.








## Write a pictorial diagram of Angular architecture?



[⬆️ Back to Top](#top)



The main building blocks of an Angular application are shown in the diagram below:-



![alt text](./images/architecture.png)






## What are the key components of Angular?



[⬆️ Back to Top](#top)






### المكونات الأساسية في Angular بتشمل الحاجات دي:



#### Component



ال(Components) في Angular زي الطوب اللي بتبني بيه التطبيق بتاعك، كل Component مسؤول عن جزء معين من الصفحة اللي بتظهر للمستخدم. يعني هو اللي بيقول الـ HTML يتعرض إزاي ويشتغل إزاي. زي مثلاً لو عندك صفحة تسجيل دخول، الComponent هو اللي هيتحكم في الشكل والأزرار وكل حاجة بتظهر في الجزء ده.



#### Modules



في Angular هي عبارة عن مجموعة من Components Angular الأساسية زي الـ Components، والـ Directives، والـ Services وغيرها. التطبيق بيتقسم لقطع منطقية، وكل قطعة بتتسمى "Module" وبتقوم بمهمة واحدة محددة.



#### Templates



ال(Templates) في Angular زي الرسمة اللي بتقول Component يعرض إيه بالظبط. يعني هي اللي بتحدد الشكل اللي المستخدم هيشوفه، زي الأزرار، النصوص، والصور. Template ده بيبقى مليان كود HTML، بس ممكن كمان يكون فيه حاجات ديناميكية بتتغير حسب اللي بيحصل في التطبيق. يعني باختصار، Template هو اللي بيرسم شكل الواجهة اللي هتشوفها قدامك.



#### Services



دي زي حاجات بتعملها مرة واحدة وتقدر تستخدمها في أي حتة في التطبيق بتاعك. يعني لو عندك شغلانة معينة وعايز تعملها في كذا مكان، مش هتعيد الكود كل مرة، بتعملها كـ "Service" وتستخدمها في أي حتة.



#### Metadata



دي زي شوية معلومات إضافية بتضيفها على الكلاس عشان تخليه يشتغل بشكل معين في Angular. يعني زي ما تكون بتدي توجيهات زيادة للكلاس ده، عشان Angular يفهمه بطريقة أحسن.









## What are directives?



[⬆️ Back to Top](#top)





الDirectives في Angular هي زي تعليمات بتضيف تصرفات أو سلوكيات جديدة لعناصر الـ DOM اللي موجودة في الصفحة، أو حتى لComponent موجود بالفعل.




```typescript

import { Directive, ElementRef } from "@angular/core";



@Directive({ selector: "[myHighlight]" })

export class HighlightDirective {

  constructor(el: ElementRef) {

    el.nativeElement.style.backgroundColor = "yellow";

  }

}

```





الكود ده بيعمل Directive اسمه myHighlight، وكل اللي بيعمله إنه بيغير لون الخلفية لأي عنصر HTML للون الأصفر. يعني مثلاً لو عندك فقرة (paragraph) وعايز تديها خلفية صفراء، هتكتب كود بالشكل ده:






```HTML

Highlight me!


```











## What are components?



[⬆️ Back to Top](#top)





في Angular، الـ Components تعتبر الوحدة الأساسية اللي بتستخدم عشان تبني واجهة المستخدم (UI). كل Component بيكون مسؤول عن جزء معين من الصفحة أو الواجهة. يعني مثلاً ممكن يكون عندك Component مسؤول عن عرض الـ header  وComponent تاني مسؤول عن عرض قائمة المنتجات، وهكذا.



الـ Components دي بتشتغل مع بعض وبتتجمع عشان تبني التطبيق كله، وعشان كده بنقول إنها بتكون شجرة من الـ Components، يعني كل Component ممكن يكون جواه Components تانية أصغر. زي ما يكون عندك صفحة فيها أجزاء مختلفة وكل جزء فيه تفاصيله الخاصة.



#### نيجي بقى للفرق بين الـ Component والـ Directive:



الComponent هو نوع من الـ Directives، بس الفرق الأساسي هو إن الـ Component لازم يكون ليه template، يعني لازم يعرض حاجة للمستخدم زي نصوص، صور، أزرار... إلخ.



في المقابل، الـ Directive العادي مش لازم يكون ليه template، وممكن يستخدم بس عشان يضيف أو يعدل سلوك عنصر HTML موجود. يعني بيغير في العنصر من غير ما يعرض محتوى جديد.



#### باختصار



الComponent بيكون ليه template وبيعرض حاجة للمستخدم.

كل تطبيق Angular بيتكون من مجموعة Components بتشتغل مع بعض زي شجرة.

الفرق الأساسي بين Component و Directive هو إن الأول بيعرض واجهة (UI) والثاني بس بيغير أو يضيف سلوك للعناصر اللي موجودة.








## What is a template?



[⬆️ Back to Top](#top)





الـ template في Angular هو ببساطة العرض اللي بيتشوف للمستخدم على هيئة HTML، وبتقدر تعرض فيه بيانات عن طريق ربط العناصر اللي في الـ HTML بالبيانات اللي جوا الـ Component. بمعنى تاني، الـ template هو المكان اللي بتعرض فيه البيانات اللي بيكون جوا الـ Component.



#### الـ template ممكن تخزنه في مكانين



##### Inline Template



يعني إنك تكتب كود الـ HTML مباشرة جوا الـ Component باستخدام الخاصية template. ده مناسب لو عندك HTML بسيط.



##### External Template



يعني إنك تخزن الـ template في ملف HTML منفصل وتربطه بالـ Component باستخدام templateUrl. ده بيكون مناسب لما يكون عندك HTML كبير أو معقد.



##### مثال على Inline Template



 



```typescript

import { Component } from "@angular/core";



@Component({

  selector: "my-app",

  template: `

    


      
{{ title }}


      
Learn Angular


    


  `,

})

export class AppComponent {

  title: string = "Hello World";

}

```





في المثال ده، كل كود الـ HTML مكتوب مباشرة جوه الـ Component عن طريق الخاصية template. وهنا بيتم ربط المتغير title اللي جوا الـ Component بالـh1  عن طريق {{}}، وده اسمه interpolation.



##### مثال على External Template






```typescript

import { Component } from "@angular/core";



@Component({

  selector: "my-app",

  templateUrl: "app/app.component.html",

})

export class AppComponent {

  title: string = "Hello World";

}

```





في الحالة دي، كود الـ HTML بيكون موجود في ملف خارجي اسمه app.component.html، وبتربطه بالـ Component عن طريق templateUrl. وده مفيد لو عندك templates معقدة أو كبيرة عشان تبقى الصفحة أسهل في التنظيم والصيانة.






## What is a module?



[⬆️ Back to Top](#top)





الـ Modules في Angular بتعمل زي الحدود المنطقية في التطبيق بتاعك، وبتقسم التطبيق لأجزاء منفصلة عشان كل جزء يقوم بوظيفة معينة. الفكرة الأساسية هي إنك تقسم الكود لموديولات (Modules) عشان تبقى الأمور منظمة وسهلة في الإدارة.



خلينا ناخد مثال على الملف app.module.ts، اللي هو الموديول الرئيسي في التطبيق، وبيتم الإعلان عنه باستخدام @NgModule decorator






```typescript

import { NgModule } from "@angular/core";

import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";



@NgModule({

  imports: [BrowserModule],

  declarations: [AppComponent],

  bootstrap: [AppComponent],

  providers: [],

})

export class AppModule {}

```





في المثال ده، عندنا الـ @NgModule اللي بيوفر شوية خيارات مهمة، وأهمها



##### imports



دي بتستخدم عشان تستورد موديولات تانية محتاجها في التطبيق. في المثال ده، بنستورد BrowserModule اللي بيكون مطلوب لأي تطبيق ويب في Angular.



##### declarations:



دي بتستخدم عشان تعلن عن الـ Components اللي موجودة في الموديول ده. هنا بنعلن عن AppComponent.



##### bootstrap



دي بتقول لـ Angular أي Component هو اللي هيبدأ تشغيل التطبيق. في الحالة دي، AppComponent هو اللي بيبدأ تشغيل التطبيق.



##### providers



بتستخدم عشان تحدد الحاجات اللي تقدر تعمل لها حقن (Injectable objects) في أجزاء مختلفة من التطبيق. يعني لو عندك (Services) معينة وعايز كل أجزاء التطبيق تقدر تستعملها، بتحطها في المكان ده. مثلاً، لو عندك Service بتجيب بيانات من سيرفر، بتقدر تحطها في الـ providers عشان أي Component في التطبيق يقدر يستخدمها من غير ما تضطر تعيد الكود في كل مكان.



الـ Modules بشكل عام بتساعد في تقسيم الوظائف بشكل منطقي في التطبيق وبتسهل تنظيم الكود وإعادة استخدامه.








## What are lifecycle hooks available?



[⬆️ Back to Top](#top)





الـ Lifecycle hooks في Angular هي مجموعة من المراحل أو العمليات اللي بيمر بيها الـ Component أو الـ Directive من لحظة إنشاؤه لحد ما يتم تدميره. 

Angular بيوفر مجموعة من الدوال اللي بتتفاعل مع كل مرحلة من مراحل الحياة دي.



![alt text](./images/lifecycle.png)



#### دي قائمة بأهم lifecycle hooks المتاحة في Angular:



##### ngOnChanges



بيتنفذ لما يحصل تغيير في قيمة أي خاصية مربوطة بالبيانات (data bound property). يعني كل ما تتغير بيانات الـ Component بيتنفذ الكود ده.



##### ngOnInit



بيتنفذ أول ما يتم تهيئة (initialize) الـ Component أو الـ Directive بعد ما Angular يعرض الخصائص اللي مربوطة بالبيانات لأول مرة.



##### ngDoCheck



بيتنفذ عشان يكتشف أي تغييرات Angular مش قادر يكتشفها لوحده، وبيخليك تعمل أي حاجات إضافية لو فيه تغييرات معينة محتاج تتعامل معاها يدوي.



##### ngAfterContentInit



بيتنفذ بعد ما Angular يعمل (project) للمحتوى الخارجي جوا الـ Component.



##### ngAfterContentChecked



بيتنفذ بعد ما Angular يتأكد من المحتوى اللي تم إسقاطه جوا الـ Component، يعني بيتشيك على المحتوى اللي جوا الـ Component بعد ما يتم عرضه.



##### ngAfterViewInit



بيتنفذ بعد ما Angular يهيئ (initialize) الـ Views الخاصة بالـ Component وأي Child Components (الأطفال اللي جواه).



##### ngAfterViewChecked



بيتنفذ بعد ما Angular يتأكد من الـ Views الخاصة بالـ Component وأي Child Components.



##### ngOnDestroy



ده بيكون المرحلة الأخيرة، بيتنفذ قبل ما Angular يدمر الـ Component أو الـ Directive. هنا بتعمل تنظيف (cleanup) لأي موارد أو اشتراكات (subscriptions) مستخدمة في الـ Component.



✨ باختصار، كل Lifecycle hook بيخليك تتحكم في سلوك الـ Component في مراحل معينة من حياته، زي لما يتغير، يتعرض، أو يتدمر.









## What is a data binding?



[⬆️ Back to Top](#top)





الData binding في Angular هو مفهوم أساسي بيسمح بتحديد طريقة التواصل بين الـ Component والـ DOM (واجهة المستخدم). الفكرة الرئيسية في الـ data binding هي إنك بتخلي التطبيق ديناميكي وتفاعلي من غير ما تقلق تسحب أو تدفع البيانات بشكل يدوي بين الـ Component والـ HTML.



#### فيه 4 أنواع للـ Data binding، وكل نوع بيسمح للبيانات تتحرك في اتجاه معين



##### من الـ Component للـ DOM (يعني من TS للview):



##### Interpolation



ده بيستخدم لما عايز تعرض قيمة متغير من الـ Component جوه الـ HTML. بتستخدم الأقواس المزدوجة {{ }} زي ما بنقول "خذ القيمة دي من الكود بتاعك وحطها هنا في للview".






```HTML

  • Name: {{ user.name }}
    • 

  • Address: {{ user.address }}
    • 

    ```
    


    

    هنا، user.name و user.address هما قيمتين موجودين في الـ Component، وبتظهر قيمهم للمستخدم جوا الـ HTML.
    


    ##### Property Binding
    


    هنا، بتربط قيمة معينة من الـ Component بخاصية (property) من خصائص عنصر HTML. بتستخدم الأقواس المربعة [ ] حوالين الخاصية اللي عايز تتحكم فيها.
    


    


    ```typescript
    


    ```
    


    

    في المثال ده، قيمة الinput value هتيجي من المتغير user.email اللي موجود في الـ Component.
    


    ##### من الـ DOM للـ Component (يعني من view للTS ):
    


    ##### Event Binding
    


    ده لما عايز تربط حدث معين (زي click، أو keyup) بدالة أو وظيفة في الـ Component بتاعك. بتستخدم الأقواس العادية ( ) حوالين اسم الحدث.
    


    


    ```HTML
    


    ```
    


    

    هنا، لما المستخدم يضغط على الزرار ده، Angular هيستدعي دالة logout اللي موجودة في الـ Component.
    


    ##### (Two-way binding)
    


    ##### Two-way Data Binding
    


    هنا بتربط البيانات بين الـ Component والـ DOM في الاتجاهين. يعني لو المستخدم غيّر حاجة في الواجهة، القيمة بتتحدث في الـ Component، ولو حصل العكس، القيمة اللي في الـ Component بتتغير في الواجهة. بتستخدم أقواس مربعة وعادية [( )] حوالين الـ ngModel.
    


    


    ```HTML
    


    ```
    


    

    هنا، ال input متصل بشكل مباشر مع المتغير user.email. يعني لو المستخدم كتب إيميل جديد في الinput قيمة user.email في الـ Component هتتحدث تلقائيًا. ولو حصل العكس، أي تغيير في user.email هيظهر مباشرة في الinput.
    


    ##### ✨ الخلاصة
    


    -الInterpolation و Property Binding بيخلوا البيانات تمشي من الـ Component للـ DOM.

    -الEvent Binding بيخلي البيانات تمشي من الـ DOM للـ Component.

    -الTwo-way binding بيخلي البيانات تمشي في الاتجاهين، بين الـ Component والـ DOM في نفس الوقت.
    


    

    


    ## What is metadata?
    


    [⬆️ Back to Top](#top)
    


    

    الـ Metadata في Angular هي بيانات إضافية بتتحط فوق  (classes) أو  (properties) أو  (methods) أو  (parameters) عشان تتحكم في سلوكهم. الـ Metadata بتتمثل في حاجة اسمها Decorators، وهي بتخلي Angular يفهم إزاي يتعامل مع الكود اللي انت كتبته. خلينا نبسط الموضوع مع الأنواع المختلفة من الـ Decorators:
    


    ### Class decorators
    


    بتستخدم لتزيين الكلاس كله، زي لما بنستخدم Component@ أو NgModule@. دي بتحول الكلاس إلى Component أو Module.
    


    


    ```typescript

    import { NgModule, Component } from "@angular/core";
    


    @Component({

      selector: "my-component",

      template: "
    Class decorator
    ",

    })

    export class MyComponent {

      constructor() {

        console.log("Hey I am a component!");

      }

    }
    


    @NgModule({

      imports: [],

      declarations: [],

    })

    export class MyModule {

      constructor() {

        console.log("Hey I am a module!");

      }

    }

    ```
    


    


    ##### Component@
    


    هنا بيحول الكلاس MyComponent إلى Component بواجهة HTML مرتبطة بيه.
    


    ##### NgModule@
    


    بيحول الكلاس MyModule إلى Module عشان يقدر يشتغل في التطبيق.
    


    ### Property decorators
    


    بتستخدم لتزيين الخصائص جوا الكلاس. أشهر الأمثلة هي Input@ و Output@ اللي بيتحكموا في تبادل البيانات بين الـ Components.
    


    


    ```typescript

    import { Component, Input } from "@angular/core";
    


    @Component({

      selector: "my-component",

      template: "
    Property decorator
    ",

    })

    export class MyComponent {

      @Input()

      title: string;

    }

    ```
    


    


    ### Method decorators
    


    بتستخدم لتزيين (methods) جوا الكلاس، زي HostListener@ اللي بيتفاعل مع أحداث معينة زي الـ click أو hover.
    


    


    ```typescript

    import { Component, HostListener } from "@angular/core";
    


    @Component({

      selector: "my-component",

      template: "
    Method decorator
    ",

    })

    export class MyComponent {

      @HostListener("click", ["$event"])

      onHostClick(event: Event) {}

    }

    ```
    


    


    ### Parameter decorators
    


    بتستخدم لتزيين Parameters اللي جوا الـ Constructor. زي Inject@ و Optional@ اللي بيتحكموا في كيفية حقن القيم أو الخدمات جوا الكلاس.
    


    


    ```typescript

    import { Component, Inject } from "@angular/core";

    import { MyService } from "./my-service";
    


    @Component({

      selector: "my-component",

      template: "
    Parameter decorator
    ",

    })

    export class MyComponent {

      constructor(@Inject(MyService) myService) {

        console.log(myService); // بيتم حقن MyService

      }

    }

    ```
    


    

    

    


    ## What is Angular CLI?
    


    [⬆️ Back to Top](#top)
    


    ### Angular CLI (Command Line Interface)
    


    Angular CLI is a command line interface to scaffold and build Angular apps using nodejs style (commonJs) modules. You need to install using the npm command,
    


    ```bash

    npm install @angular/cli@latest

    ```
    


    i. Creating New Project:
    


    ```bash

    ng new

    ```
    


    ii. Generating Components, Directives & Services:
    


    ```bash

    ng generate/g

    ```
    


    The different types of commands would be:
    


    - ng generate class my-new-class: add a class to your application

    - ng generate component my-new-component: add a component to your application

    - ng generate directive my-new-directive: add a directive to your application

    - ng generate enum my-new-enum: add an enum to your application

    - ng generate module my-new-module: add a module to your application

    - ng generate pipe my-new-pipe: add a pipe to your application

    - ng generate service my-new-service: add a service to your application
    


    iii. Running the Project:
    


    ```bash

    ng serve

    ```
    


    


    ## What is the difference between constructor and ngOnInit?
    


    [⬆️ Back to Top](#top)
    


    


    ### الـ Constructor
    


    الـ constructor هو زي "function" اللي بتشتغل أول ما تعمل نسخة جديدة من (class) في TypeScript. يعني مثلاً لما تيجي تعمل Component جديد، أول حاجة بتحصل هي إن الـ constructor بيشتغل.
    


    وظيفته الأساسية إنه يجهز المتغيرات بتاعت الكلاس ويظبط حاجة اسمها Dependency Injection، ودي اللي بتخلي Angular يقدر يحط الـ services اللي محتاجها الكلاس بسهولة.
    


    المهم إنك تستخدم الـ constructor عشان تجهز الحاجات الأساسية بتاعت الكلاس بس، يعني متعملش فيه أي "شغل" تقيل زي استدعاء دوال أو التعامل مع بيانات أو حاجات معقدة. الأفضل إنك تسيب الحاجات دي للـ ngOnInit لأن ده بيكون وقت مناسب أكتر عشان تبدأ الشغل الفعلي.
    


    باختصار، خلي الـ constructor لتهيئة الحاجات الأساسية، من غير ما تعمل فيه حاجات كتير.
    


    ### الـ ngOnInit
    


    هو واحد من الـ lifecycle hooks اللي Angular بتشغله بعد ما تكون خلصت إنشاء الـ Component وعرضته قدام المستخدم. يعني ببساطة، بيشتغل بعد الـ constructor.
    


    عادة بنستخدم الـ ngOnInit لما نكون عايزين نجهز أو نعمل تهيئة لحاجات معينة زي البيانات أو لو عايزين نجيب بيانات من API، أو حتى لو في حاجات مربوطة (bindings) محتاجين نشتغل عليها.
    


    الـ ngOnInit بيكون أنسب مكان تبتدي فيه الشغل التقيل، زي استدعاء بيانات أو التعامل مع الحاجات اللي جاية من بره الـ Component، لأن في الوقت ده بيكون Angular ظبط كل الـ bindings واتأكد إن البيانات اللي جايالك من بره (زي المتغيرات اللي بتجي من الـ parent component) جاهزة.
    


    

    


    ## What is a service?
    


    [⬆️ Back to Top](#top)
    


    

    الService في Angular هي ببساطة كود بتكتبه لما يكون عندك وظيفة معينة أو شغل عايز تعمله في أكتر من مكان في التطبيق. الفكرة من الـ Service هي إنها تخليك تفصل المهام المشتركة أو المنطق اللي بتحتاجه في كذا Component في مكان واحد، وتقدر تستخدمه بسهولة في أماكن كتير، وده بيساعد في تنظيم الكود وتجنب التكرار.
    


    


    ```typescript

    import { Injectable } from "@angular/core";

    import { Http } from "@angular/http";
    


    @Injectable({

      providedIn: "root",

    })

    export class RepoService {

      constructor(private http: Http) {}
    


      fetchAll() {

        return this.http.get("https://api.github.com/repositories");

      }

    }

    ```
    


    


    ### HTML
    


    


    ```typescript

    import { Component, OnInit } from "@angular/core";

    import { RepoService } from "./repo.service";
    


    @Component({

      selector: "app-repo-list",

      template: `

        
      

            
    • {{ repo.name }}
      • 

          
    

      `,

    })

    export class RepoListComponent implements OnInit {

      repos: any[] = [];
    


      constructor(private repoService: RepoService) {}
    


      ngOnInit() {

        this.repoService.fetchAll().subscribe((data) => {

          this.repos = data;

        });

      }

    }

    ```
    


    

    

     
    


    ## What is dependency injection in Angular?
    


    [⬆️ Back to Top](#top)
    


    

    الDependency Injection (DI) في Angular هو ببساطة طريقة ذكية بتخلي الكلاس (class) يطلب الحاجات اللي محتاجها من بره بدل ما هو ينشئها بنفسه. يعني لو في service أو حاجة معينة الكلاس محتاجها عشان يشتغل، Angular بتساعده ويجيبله الحاجات دي جاهزة من بره.
    


    #### الفكرة باختصار
    


    بدل ما الكلاس يبقى مسؤول عن إنشاء كل حاجة بنفسه ، Angular بتشوف هو محتاج إيه، وتقوم تروح تجيبها وتحطها له جاهزة، عن طريق حاجة اسمها الـ Injector.
    


    #### ليه نستخدم Dependency Injection؟
    


    تنظيم الكود: بيساعد إن الكلاس مايبقاش مضطر ينشئ الحاجات اللي محتاجها بنفسه، وده بيفصل بين منطق الكود والحاجات اللي بيحتاجها.
    


    إعادة الاستخدام: لو عندك service بتعمل حاجة معينة، تقدر تستخدمها في أكتر من Component بسهولة.
    


    تسهيل الاختبارات: لما تيجي تختبر الكود، تقدر تستبدل الـ service الأصلية بحاجة وهمية بسهولة وتعمل اختباراتك من غير مشاكل.
    


    

    


    ## What is the purpose of async pipe?
    


    [⬆️ Back to Top](#top)
    


    

    الـ Async Pipe في Angular بيساعدك في التعامل مع الـ Observable أو الـ Promise بشكل سهل وبدون ما تضطر تعمل subscribe بنفسك. يعني بدل ما تقعد تكتب كود عشان تراقب الـ Observable وتعمله unsubscribe لما الكومبوننت بتاعك يتدمر، الـ Async Pipe بيعمل كل ده لوحده.
    


    تخيل إن عندك Observable بيرجع الوقت الحالي كل ثانيتين، وانت عايز تعرضه في الـ HTML بتاعك. باستخدام الـ Async Pipe، هتقدر تعمل ده من غير أي تعقيدات.
    


    


    ```typescript

    @Component({

      selector: "async-observable-pipe",

      template: `
    

        observable|async: Time: {{ time$ | async }}

      
    `,

    })

    export class AsyncObservablePipeComponent {

      time$: Observable;

      constructor() {

        this.time$ = new Observable((observer) => {

          setInterval(() => {

            observer.next(new Date().toString());

          }, 2000);

        });

      }

    }

    ```
    


    

    للي بيحصل هنا إنك عملت Observable اسمه time$ بيبعت القيمة الجديدة (الوقت الحالي) كل ثانيتين. بعد كده في التمبليت (template)، استخدمت الـ Async Pipe بالطريقة دي: {{ time$ | async }}.
    


    الـ Async Pipe بيقوم بالاشتراك في الـ Observable أو الـ Promise وبيجيب أحدث قيمة منه ويعرضها. كل ما الـ Observable يبعث قيمة جديدة، الـ Pipe بيحدث القيمة في الـ View تلقائي.
    


    

    


    ## What is the purpose of \*ngFor directive?
    


    [⬆️ Back to Top](#top)
    


    

    الـ *ngFor directive في Angular هدفها الرئيسي هو إنها تساعدك تعرض مجموعة عناصر في الـ template بناءً على البيانات اللي عندك في الـ component. بمعنى إنك لو عندك array مثلاً من البيانات، زي users، ممكن بسهولة تكرر عرض كل عنصر من العناصر دي جوه الـ template بتاعك.

    


    ```HTML

  • 

      {{ user }}

    • 

    ```
    


    

    

    


    ## What are pipes?
    


    [⬆️ Back to Top](#top)
    


    

    الpipes في Angular هي عبارة عن functions بسيطة بتشتغل عشان تاخد بيانات كمدخلات وتحوّلها لصيغة أو شكل معين يكون مفيد أكتر للمستخدم. وده بيتم عن طريق استخدام حاجة اسمها "template expressions"، اللي بتبقى موجودة جوا الHTML بتاع الcomponent.
    


    خلينا نوضح بمثال عشان الصورة تكون أوضح. لو عندك component معمول في Angular وعايز تعرض تاريخ ميلاد معين (birthday) بس في شكل يكون سهل للفهم أو "human-friendly"، هنا ممكن تستخدم حاجة اسمها "date pipe". الـpipe دي هتخلي التاريخ يظهر بطريقة متنسيقة زي ما المستخدم ممكن يتوقع.
    


    


    ```typescript

    import { Component } from "@angular/core";
    


    @Component({

      selector: "app-birthday",

      template: `
    Birthday is {{ birthday | date }}
    `,

    })

    export class BirthdayComponent {

      birthday = new Date(1987, 6, 18); // June 18, 1987

    }

    ```
    


    

    في الكود ده، انت عندك component اسمه BirthdayComponent وداخله birthday معمول على إنه object من نوع Date، بتحدده بتاريخ معين (18 يونيو 1987). بعد كده في الـHTML، استخدمت {{ birthday | date }} وده اللي بيسمى "pipe". الـ| هنا هي اللي بتحدد إنك بتستخدم pipe عشان تحول البيانات.
    


    اللي بيحصل هو إن التاريخ اللي مخزن جوا الـbirthday هيظهر للمستخدم في شكل تاريخ مفهوم بسهولة، حسب الفورمات اللي Angular بيستخدمه افتراضيًا لعرض التواريخ.
    


    


    ```HTML

    Birthday is Jun 18, 1987

    ```
    


    

    فالـpipes بتسهل عليك شغل كتير لو محتاج تعدل أو تنسق البيانات قبل عرضها للمستخدمين.

    

    


    ## What is a parameterized pipe?
    


    [⬆️ Back to Top](#top)
    


    

    الـ Parameterized Pipe في Angular ببساطة هو طريقة لتعديل الـ output بتاع الـ pipe باستخدام بارامترات إضافية. يعني تقدر تتحكم في النتيجة اللي هتطلع من الـ pipe عن طريق إضافة بارامترات بعد اسم الـ pipe باستخدام الـ colon " : ". لو الـ pipe بيقبل أكتر من باراميتر، بتفصل بينهم بـ colons تانية.
    


    خلينا نوضح الموضوع بمثال بسيط زي اللي انت جبته عن عيد الميلاد. في الكود اللي انت كتبته، بنستخدم الـ date pipe عشان نعرض تاريخ معين لكن بالصيغة اللي احنا عايزنها (يوم/شهر/سنة).
    


    


    ```typescript

    import { Component } from "@angular/core";
    


    @Component({

      selector: "app-birthday",

      template: `
    Birthday is {{ birthday | date : "dd/MM/yyyy" }}
    `, // 18/06/1987

    })

    export class BirthdayComponent {

      birthday = new Date(1987, 6, 18);

    }

    ```
    


    

    هنا، الـ date pipe بيقبل باراميتر وهو الصيغة اللي انت عايز تعرض بيها التاريخ، واللي هنا عبارة عن 'dd/MM/yyyy'. الـ pipe هيقوم بتحويل التاريخ اللي موجود في birthday (اللي هو 18 يونيو 1987) للصيغة اللي انت عايزها، وهيطلعلك 18/06/1987.
    


    لو الـ pipe بيقبل أكتر من باراميتر، هتفصلهم بنفس الطريقة عن طريق colons.
    


    

    


    ## How do you chain pipes?
    


    [⬆️ Back to Top](#top)
    


    

    انت بتستخدم أكثر من pipe وبتسميها chaining pipes. يعني بتربط أكثر من pipe مع بعض عشان تنفذ مجموعة عمليات على القيمة.
    


    الفكرة ببساطة انك بتبدأ من القيمة الأولانية وبتعديها على أول pipe، وبعد ما الـ pipe الأول يخلص، النتيجة بتاعت الـ pipe الأول بتروح للـ pipe اللي بعده، وهكذا لغاية ما يخلصوا كل الـ pipes اللي انت حاططهم.
    


    في المثال بتاعك، انت عندك خاصية birthday اللي هي تاريخ الميلاد:
    


    


    ```typescript

    birthday = new Date(1987, 6, 18);

    ```
    


    

    ده معناه ان عندك التاريخ 18 يوليو 1987 (شهر 6 هو يوليو عشان الـ JavaScript بتمشي بالأصفار).
    


    اللي بيحصل هنا:

    الdate pipe: بيحول قيمة التاريخ ويعرضها بشكل معين. انت استخدمت الفورمات 'fullDate'، فالتاريخ هيظهر كامل زي "Thursday, June 18, 1987".
    


    الuppercase pipe: بياخد النتيجة اللي طلعت من الـ date pipe وبيحولها لحروف كبيرة، فالناتج النهائي هيكون: "THURSDAY, JUNE 18, 1987".
    


    ### طريقة الكتابة
    


    


    ```HTML

    Birthday is {{ birthday | date:'fullDate' | uppercase }} 
    

    ```
    


    


    

    


    ## What is a custom pipe?
    


    [⬆️ Back to Top](#top)
    


    

    الـ "custom pipe" ببساطة هو أن انت تكتب حاجة بنفسك في Angular عشان تحوّل البيانات بشكل معين، غير الـ "built-in pipes" اللي Angular بتوفّرها زي الـ date أو uppercase وكده.
    


    أول حاجة لازم تعملها لما تيجي تكتب "custom pipe" هي إنك تستخدم الـ @Pipe ديكوريتور اللي بتجيبها من الـ core Angular.
    


    


    ```typescript

    @Pipe({name: 'myCustomPipe'})

    ```
    


    

    بعد كده بتكتب class وبتخلّيه implement للـ PipeTransform interface اللي فيه الميثود الأساسية اللي هي transform. الميثود دي بتاخد الـ value اللي عاوز تحولها، وكمان ممكن تاخد شوية parameters إضافية. وتبقى النتيجة هي القيمة الجديدة اللي متحوّلة.
    


    #### مثلا، لو هنعمل pipe بيحوّل أي input لقيمته مضروبة في رقم معيّن
    


    


    ```typescript

    import { Pipe, PipeTransform } from "@angular/core";
    


    @Pipe({ name: "multiply" })

    export class MultiplyPipe implements PipeTransform {

      transform(value: number, multiplier: number): number {

        return value * multiplier;

      }

    }

    ```
    


    

    كده لو عندك template وعايز تستخدم الـ pipe ده، هتعمله زي ما بتعمل مع الـ built-in pipes:

    


    ```HTML

    {{ 5 | multiply: 2 }} // 10

    ```
    


    

    النقطة اللي لازم تركز عليها إن اسم الـ pipe اللي بتكتبه في الـ @Pipe ديكوريتور هو اللي هتستخدمه في الـ template. والـ transform method دي هي اللي بتكتب فيها اللوجيك اللي عاوز تطبقه على البيانات.

    

    


    ## What is the difference between pure and impure pipe?
    


    [⬆️ Back to Top](#top)
    


    

    طبعاً، الفرق بين الـ pure pipe والـ impure pipe في Angular بيكون في إزاي بيتعاملوا مع دورة التغيير (change detection)
    


    ### Pure Pipe
    


    يتنفذ بس لما يكون في تغيير في القيمة أو في الـ parameters اللي اتبعتت للـ pipe.

    يعني لو عندك قيمة primitive زي String أو Number أو Boolean، ولو اتغيرت القيمة دي، أو لو كان فيه تغيير في الـ object reference زي Date أو Array أو Function أو Object.

    ده بيخلي الـ pure pipe أكتر كفاءة لأنها مش بتتنفذ كتير، وبتشتغل بس لما يكون في حاجة اتغيرت فعلاً.
    


    ### Impure Pipe
    


    يتنفذ في كل دورة تغيير (change detection cycle) بغض النظر إذا كانت القيمة أو الـ parameters اتغيرت ولا لأ.

    يعني ممكن الـ impure pipe يتنفذ كتير جداً، زي كل حركة مفتاح (keystroke) أو حركة ماوس (mouse-move).

    ده ممكن يؤدي إلى أداء أبطأ لو استخدمته في أماكن كتير في التطبيق.
    


    

    


    ## What is HttpClient and its benefits?
    


    [⬆️ Back to Top](#top)
    


    

    الHttpClient هو واحد من الأدوات اللي بيوفرها Angular علشان تتعامل مع الـ backend services اللي بتشتغل بالـ HTTP. زمان كان الناس بتستخدم حاجات زي XMLHttpRequest أو fetch() API علشان يجيبوا البيانات من السيرفر، لكن دلوقتي Angular عامل لنا الموضوع أسهل شوية عن طريق الـ HttpClient اللي مبني أصلاً فوق الـ XMLHttpRequest. يعني، بيقدملك طريقة أبسط وأوضح علشان تشتغل مع الـ HTTP requests.
    


    طيب، هو موجود فين؟ تقدر تضيفه في التطبيق بتاعك عن طريق تعمل import لل HttpClientModule من الباكدج اللي اسمها angular/common/http@ بالطريقة دي:
    


    


    ```typescript

    import { HttpClientModule } from "@angular/common/http";

    ```
    


    


    ### طيب إيه بقى فايدته؟
    


    تقدر تختبر الكود بتاعك بسهولة لما تستخدمه في الـ HTTP requests.

    تقدر تحدد أنواع البيانات اللي طالعين من وإلى الـ backend، وده بيخليك متأكد إنك شغال على البيانات الصح.

    بيعمل intercept للrequest and response: يعني ممكن تتحكم في الطلبات اللي طالعة من التطبيق بتاعك أو الاستجابات اللي راجعة قبل ما توصل. ده بيساعد في حاجات زي إضافة headers أو التعامل مع الـ tokens.

    بيدعم Observable APIs: لو متعود على الـ Observables في Angular، هتلاقي الـ HttpClient بيشتغل معاهم حلو جداً، وده بيخليك تستفيد من حاجات زي الـ RxJS.
    


    

    


    ## What are dynamic components?
    


    [⬆️ Back to Top](#top)
    


    

    الـ Dynamic Components هي components في Angular اللي مكانها مش بيتحدد في التطبيق وقت الـ Build، يعني مش بنستخدمها في أي Template ثابتة. الفكرة إنك بتعمل Instantiation للـ component دي وتضيفها في التطبيق وقت الـ Runtime. يعني بكل بساطة، بتحدد مكانها وطريقة عرضها وقت التشغيل مش وقت بناء التطبيق.
    


    ✨ مثال على كده، ممكن يكون عندك component مش عارف هيتعرض فين بالضبط، زي في Dialog، Popup، أو حتى جزء من الصفحة حسب تفاعل المستخدم أو رد من API. فبتستخدم الـ Dynamic Components عشان تضيف الـ component دي بشكل ديناميكي بناءً على اللي بيحصل في التطبيق وقت التشغيل.
    


    ده بيكون مفيد جدًا لو عاوز تعمل تصميم مرن أو تعرض components معينة بناءً على ظروف أو اختيارات معينة للمستخدم.
    


    

    


    ## What are the various kinds of directives?
    


    [⬆️ Back to Top](#top)
    


    

    في عالم الـ Angular مثلاً، بنلاقي ٣ أنواع رئيسية من الـ Directives
    


    ### Components directives
    


    دي عبارة عن directives بس معاها template. يعني بتتعامل كأنها حتة UI كاملة، زي ما تكون واجهة المستخدم اللي انت بتعرضها. الكمبوننتس دي بتحتوي على html و logic بتاعها. يعني تقدر تعتبرها مزيج ما بين شكل الصفحة والسلوك اللي فيها.
    


    ### Structural directives
    


    دي بتشتغل على الـ DOM. بتغير في الـ layout بتاع الصفحة، يعني تقدر تضيف أو تشيل عناصر من الصفحة نفسها. مثال على كده عندنا الـ *ngIf أو الـ *ngFor اللي بتخلينا نتحكم في إذا كان العنصر يتعرض أو يتخفى أو يتكرر بناءً على شروط معينة.
    


    ### Attribute directives
    


    النوع ده بيغير في شكل العنصر أو في الـ behavior بتاعه، زي الـ ngClass أو الـ ngStyle. دي بتتحكم في الخصائص أو الـ styles بتاعت العنصر اللي موجود في الـ DOM من غير ما تشيله أو تضيف عناصر جديدة.
    


    

    


    ## What are router events?
    


    [⬆️ Back to Top](#top)
    


    

    الـ Router Events دي عبارة عن الأحداث اللي بتحصل لما الـ router في تطبيقك (زي في Angular مثلاً) بينقلك من صفحة للتانية.
    


    يعني إيه؟ يعني لو إنت مثلاً فاتح صفحة "Home" وعايز تروح لصفحة "About"، الـ router ده هو اللي بيعمل التنقل ده. كل ما تتنقل من صفحة لصفحة، بيحصل شوية أحداث.
    


    #### خلينا نبسطها أكتر:
    


    ١. NavigationStart: ده أول ما تبدأ تتحرك من صفحة للتانية، يعني كده بنقول إنك "بدأت التنقل".
    


    ٢. NavigationEnd: لما التنقل يخلص وتوصل للصفحة اللي رايح لها، الـ router بيقولك "التنقل خلص بنجاح".
    


    ٣. NavigationCancel: لو حصل حاجة وانت في النص، مثلاً أنت لغيت أو فيه مشكلة، يبقى كده التنقل "اتلغى".
    


    ٤. NavigationError: لو حصلت مشكلة وانت بتتنقل، زي مثلاً الصفحة مش موجودة أو السيرفر وقع، هنا بنقول "فيه خطأ".
    


    ٥. RoutesRecognized: هنا بقى الـ router بيقولك "أيوه أنا عرفت الصفحة اللي انت رايح لها ومستعد أروح لها".
    


    ✨الفكرة إنك ممكن تستفيد من الأحداث دي، زي إنك مثلاً تشغل loader (الحاجة اللي بتفضل تلف وانت مستني الصفحة تفتح) أول لما يبدأ التنقل، وبعد ما يخلص تخفيه. أو ممكن تعمل check لو فيه أخطاء في النص عشان تبلغ المستخدم إن في مشكلة.
    


    يعني باختصار، الـ Router Events دي بتديك سيطرة على كل خطوة بتحصل وانت بتتنقل بين صفحات التطبيق.
    


    

    


    ## What is activated route?
    


    [⬆️ Back to Top](#top)
    


    

    الActivatedRoute في Angular زي اللي بيقولك إنت واقف فين في  (routes) بتاعت الأبليكيشن. يعني لو إنت فتحت صفحة معينة، هو اللي هيقولك كل التفاصيل بتاعت الصفحة دي، زي  (path) اللي إنت ماشي فيه، أو أي parameters اتحطت في ال URL، زي مثلا لو فتحت صفحة ب ID معين.

    

    


    ## How do you define routes?
    


    [⬆️ Back to Top](#top)
    


    

    تعريف الـ Routes في Angular بيتم باستخدام الموديل RouterModule من خلال الطريقة RouterModule.forRoot. بتستخدم الطريقة دي عشان تحدد قائمة من المسارات اللي التطبيق بتاعك هيتعامل معاها. كل مسار (Route) بيبقى مرتبط بـ component معين، يعني لما المستخدم يدخل على المسار ده، الـ component المحدد بيتحمل ويظهر.

    


    ```typescript

     const appRoutes: Routes = [

      { path: 'todo/:id',      component: TodoDetailComponent },

      {

        path: 'todos',

        component: TodosListComponent,

        data: { title: 'Todos List' }

      },

      { path: '',

        redirectTo: '/todos',

        pathMatch: 'full'

      },

      { path: '**', component: PageNotFoundComponent }

    ];
    


    @NgModule({

      imports: [

        RouterModule.forRoot(

          appRoutes,

          { enableTracing: true } // <-- debugging purposes only

        )

        // other imports here

      ],

      ...

    })

    export class AppModule { }

    ```
    


    

    

     
    


    ## What is the purpose of Wildcard route?
    


    [⬆️ Back to Top](#top)
    


    

    الغرض من الـ Wildcard route هو التعامل مع أي روابط (URLs) غير معروفة أو غير معرفة مسبقًا في التطبيق. يعني لو المستخدم دخل على رابط مش موجود في قائمة الـ routes اللي أنت معرفها، بدل ما التطبيق يرمي خطأ أو يتعطل، يتم توجيه المستخدم لصفحة مخصصة زي "صفحة غير موجودة" (Page Not Found).

    


    ```typescript

    { path: '**', component: PageNotFoundComponent }

    ```
    


    


    ### '\*\*' path
    


    دي معناها إن أي رابط ما اتعرفش في باقي المسارات هيتم التقاطه من المسار ده. الـ \*\* هو رمز الـ wildcard اللي بيمسك أي URL ما ينطبقش عليه أي من المسارات اللي قبله.
    


    ### component
    


    الPageNotFoundComponent: هنا بتحدد الـ component اللي هيتعرض لما المسار يتحقق. في الحالة دي، صفحة الخطأ أو الصفحة اللي بتقول إن الرابط مش موجود.

    ✨الخلاصة: الـ Wildcard route بيضمن إن التطبيق مش هيكراش بسبب روابط غير معروفة وبيسمحلك تعرض رسالة أو صفحة مخصصة بدل من حدوث خطأ.
    


    

    


    ## What is Angular Universal?
    


    [⬆️ Back to Top](#top)
    


    

    الAngular Universal ده ببساطة طريقة إنك تخلي تطبيق Angular بتاعك يشتغل بـ Server-Side Rendering (SSR)، يعني السيرفر هو اللي يولد الـ HTML بدل ما المتصفح يعمل كل حاجة. الطبيعي في تطبيقات Angular العادية إن كل حاجة بتتحمل في المتصفح (الـ HTML والـ JavaScript)، وده ممكن يخلي التحميل الأول للصفحة بطيء شوية خصوصًا على النت البطيء.
    


    #### ليه بقى Angular Universal مهم؟
    


    أداء أسرع: بدل ما المستخدم يقعد مستني لما الصفحة تتحمل بالكامل، السيرفر بيرسل له HTML جاهز أول ما يفتح التطبيق، فبيحس إن الصفحة ظهرت بسرعة.
    


    تحسين الـ SEO: عشان محركات البحث زي جوجل تفهم محتويات الصفحات، لازم تلاقي HTML كامل أول ما تزور الصفحة. الـ SPA (Single Page Applications) زي Angular ممكن يكون عندها مشكلة في النقطة دي لأنها بتحتاج الجافاسكريبت يتنفذ الأول عشان يطلع المحتوى. لكن مع Angular Universal، الصفحة بتطلع بـ HTML جاهز، فمحركات البحث تقدر تقرأها وتحسن ترتيب الموقع.
    


    تجربة أحسن على الشبكات البطيئة: المستخدمين اللي عندهم إنترنت بطيء هيتبسطوا إنهم يشوفوا الصفحة بسرعة من غير ما يقعدوا مستنيين تحميل كل حاجة.
    


    

    


    ## What is ng-content?
    


    [⬆️ Back to Top](#top)
    


    

    الـ ng-content في Angular بنستخدمه عشان نعمل حاجة اسمها content projection، وهي إننا نقدر نمرر HTML من الـ Parent Component للـ Child Component بحيث الـ Child Component يعرض المحتوى ده في مكان معين جوة UI بتاعته.
    


    🔴 لو فكرت فيها، الـ Input@ بيسمح للـ Parent إنه يمرر بيانات للـ Child Component، بس لو حبينا نمرر حاجة زي HTML elements أو محتوى فيه CSS معين، الـ Input@ مش حينفع. وده هنا بييجي دور ng-content.
    


    ### مثال توضيحي بسيط
    


    لو عندك Button Component بسيط، هيعرض زراير، وعايز مثلاً تخلي النص اللي جواه "Click Me"، تقدر تعمل كده بإنك تضيف Click Me جوة الكومبوننت.
    


    لكن لو عايز تخلي الـ Parent هو اللي يقرر يكتب إيه جوة الزرار أو يضيف HTML مختلف، بنستخدم ng-content.
    


    ### إزاي نعمل ده؟
    


    في المثال ده، بدل ما تحط "Click Me" جوة Click Me، هنحط  مكانه. وده معناه إن المحتوى اللي بين  في الـ Parent Component حيتعرض جوة الزرار.
    


    


    ```typescript

    @Component({

      selector: "app-fancybtn",

      template: ``,

    })

    export class FancyBtnComponent {}

    ```
    


    

    وفي الـ Parent Component هنكتب مثلاً:

    


    ```HTML

    Click Me

    Submit
    


    ```
    


    

    كده النص اللي بين app-fancybtn  هيظهر جوة الزرار في المكان اللي محطوط فيه ng-content. الجميل هنا إنك ممكن تمرر أي محتوى HTML وحيظهر.
    


    ### الـ Multiple Projections والـ select attribute
    


    لو عندك كومبوننت زي Card Component وفيه أجزاء زي header وcontent وfooter، تقدر تدي لكل جزء ng-content خاص بيه باستخدام select attribute. بالشكل ده تقدر تمرر محتويات مختلفة للـ Parent والـ Child هيعرضهم في الأماكن الصح.
    


    


    ```typescript

    @Component({

      selector: "app-card",

      template: `

        
    

          
    

          
    

          
    

        
    

      `,

    })

    export class CardComponent {}

    ```
    


    

    وفي الـ Parent
    


    


    ```HTML
    


      
    Angular
    

      One framework. Mobile & desktop.

      Super-powered by Google
    


    ```
    


    


    ### ✨ ng-content without selector catches all
    


    

    


    ## what is Angular input and output and EventEmitter?
    


    [⬆️ Back to Top](#top)
    


    

    أول حاجة، خلينا نبدأ بـ Input@

    لو عندك Input@ في الـ child component، ده معناه إنك ممكن تستقبل بيانات من الـ parent component. يعني مثلا لو عندك component اسمه CustomerDetailComponent وعاوز تستقبل بيانات عميل معين من الـ parent component، هتعمل حاجة زي كده:
    


    


    ```typescript

    export class CustomerDetailComponent implements OnInit {

      @Input() customer: Customer;

    }

    ```
    


    

    هنا احنا عاملين Input@ فوق الخاصية customer. ده معناه إن الـ parent component هيقدر يبعت قيمة للخاصية دي، زي كده مثلا:
    


    


    ```HTML
    


    ```
    


    


    ### ثاني حاجة، الـ Output@ و EventEmitter
    


    لما تيجي تتعامل مع Output@، ده معناه إنك بتبعت أحداث للـ parent component. يعني مثلا لو الـ child component عايز يقول للـ parent component إن العميل اتعدل، هنعمل كالتالي:
    


    


    ```typescript

    @Output() customerChange: EventEmitter = new EventEmitter();
    


    update() {

      this.customerChange.emit(this.customer);

    }

    ```
    


    

    هنا إحنا بنستخدم Output@ فوق الخاصية customerChange اللي من نوع EventEmitter. لما نعمل emit للحدث ده عن طريق update function، الـ parent component هيقدر يلتقط الحدث ده ويشوف القيمة اللي بعتها customer.
    


    🔴 في الـ parent component، نقدر نسمع الحدث ده باستخدام كود زي ده
    


    


    ```HTML
    


    ```
    


     

    هنا في  إحنا بنحط customerChange بين أقواس دائرية عشان نقدر نمسك الحدث، وده هيشغل الـ update function اللي في الـ parent component لما يتغير الـ customer.
    


    ### ملاحظات إضافية على Input@ و Output@ في Angular
    


    #### 1. إمكانية تمرير اسم اختياري مع Input@
    


    Input@ بتسمح لك بإنك تحدد اسم اختياري، وده بيبقى مفيد لما تحب تسمي الخاصية حاجة في الكود واسم تاني للـ binding في الـ HTML.
    


    


    ```typescript

    @Input('customerData') customer: Customer;

    ```
    


    

    ✨ هنا بنستخدم customerData كاسم خاص بالـ binding في الـ Parent، لكن في الكود بنستخدم customer.
    


    #### 2. التعامل مع تغييرات باستخدام Setter
    


    تقدر تعمل setter للخاصية اللي عليها Input@ عشان تضيف أي منطق إضافي أو تتحكم في التغيير قبل ما يتم تعيين القيمة.
    


    


    ```typescript

    private _customerData: Customer;
    


    @Input()

    set customer(customer: Customer) {

      this._customerData = customer;

      console.log("Updated customer data:", this._customerData);

    }
    


    get customer(): Customer {

      return this._customerData;

    }
    


    ```
    


    

    هنا، كل مرة يتغير فيها customer، هنقدر نشغل كود معين أو نضيف منطق إضافي قبل ما نعطي القيمة للخاصية.
    


    #### 3. الاشتراك في تغييرات Input@ باستخدام ngOnChanges
    


    الAngular بيوفر ngOnChanges كـ lifecycle hook، وده بيسمح لنا نراقب أي تغيير في الخصائص اللي عليها Input@ في أي وقت.
    


    


    ```typescript

    import { OnChanges, SimpleChanges } from "@angular/core";
    


    export class CustomerDetailComponent implements OnChanges {

      @Input() customer: Customer;
    


      ngOnChanges(changes: SimpleChanges) {

        if (changes["customer"]) {

          console.log("Customer changed:", changes["customer"].currentValue);

        }

      }

    }

    ```
    


    

    هنا ngOnChanges هيتم تنفيذه كل مرة يحصل فيها تغيير في الخاصية customer.
    


    #### 4. الEventEmitters تعتبر Observable
    


    الEventEmitters في Angular هي Observable زي RxJS Subjects، وده بيسمح باستخدام مشغلين RxJS عشان تتلاعب بالأحداث، مثلا تقدر تعمل debounceTime، filter، وغيره على الأحداث اللي بتنبعث.
    


    #### 5. تمرير البيانات حسب المرجع (Pass by Reference)
    


    لبيانات من نوع Object وArray بتنتقل حسب Reference يعني أي تغيير فيها بيعدل النسخة الأصلية. عشان كده لما تبعت بيانات من الـ Parent للـ Child، لو عدلتها في الـ Child، هتتغير تلقائيًا في الـ Parent.

    البيانات من نوع Primitive زي number و string بتتنقل حسب القيمة، فالتغيير على القيمة مش بيأثر على النسخة الأصلية في الـ Parent.
    


    

    


    ## Template Reference Variable in Angular
    


    [⬆️ Back to Top](#top)
    


    

    الTemplate Reference Variable هي متغيرات بننشئها في  (Template) عشان نقدر نوصل لأي عنصر HTML، أو  (Component)، أو  (Directive) في الTemplate
    


    #### كيفية تعريف Template Reference Variable
    


    نقدر نعرّفها باستخدام علامة # متبوعة باسم المتغير.
    


    #### أمثلة
    


    عنصر HTML
    


    


    ```HTML
    


    ```
    


    

    component or directive 

    


    ```HTML
    


    ```
    


    


    #### إظهار القيم باستخدام Template Reference Variables
    


    في المثال ده، بنعرف متغيرات firstName# و#lastName
    


    


    ```HTML

    Welcome
    


    Welcome {{ firstName.value }} {{ lastName.value }}

    ```
    


    

    1- عند الكتابة داخل   (input)، بيتم تفعيل الحدث keyup.

    بسبب "0"=(keyup), الAngular بيقوم بتشغيل الChange Detection لتحديث القيم اللي في الTemplate.
    


    2- Change Detection بيحدث (view) مباشرة ويعرض القيمة الجديدة اللي كتبتها في الinput
    


    #### لماذا نحتاج "0"=(keyup)"؟
    


    لو شيلنا (keyup) من الكود، ممكن ما يتم تحديث جملة الترحيب بالسرعة اللي بنتوقعها لأن Angular يعتمد على الكشف عن التغييرات فقط عند وقوع حدث غير متزامن أو عند أي حدث متعلق بالكشف عن التغييرات.
    


    

    


    ## What is ng-container in Angular?
    


    [⬆️ Back to Top](#top)
    


    

    الـ ng-container ده عبارة عن طريقة بنستخدمها في أنجولر عشان نعمل تقسيم أو جزء معين في  (template) من غير ما نضيف عنصر HTML فعلي في الصفحة. يعني الـ ng-container نفسه مش بيظهر في الكود النهائي للـ HTML، لكن المحتوى اللي جواه بيظهر.
    


    ### ليه بنستخدم ng-container؟
    


    الميزة الرئيسية للـ ng-container إنه بيخلينا نضيف حاجات معينة زي شروط أو تكرارات (زي *ngIf أو *ngFor) من غير ما نضطر نضيف عنصر إضافي في DOM، واللي ممكن يكون ليه تأثير سلبي على الأداء، أو حتى يكون مزعج لو بتعدل في الـ CSS.
    


    #### مثال بسيط
    


    


    ```HTML

     ng-Container
    

    Hello  world!
    


      المحتوى بتاع الكونتينر.
    


    ```
    


    

    الكود ده لما بيتحول لـ HTML النهائي هيكون كالتالي:

    


    ```HTML

     ng-Container
    

    Hello  world!
    

    المحتوى بتاع الكونتينر.

    ```
    


    

    ✨ زي ما انت شايف، الـ ng-container نفسه اختفى، لكن المحتوى اللي جواه ظهر في الصفحة.
    


    ### استخدامات ng-container
    


    #### مثال مع ngFor و ngIf
    


    تخيل إن عندك قائمة فيها مجموعة من العناصر وعايز تعرض بس العناصر النشطة (اللي Active)، فهتستخدم *ngFor عشان تعمل لوب على العناصر، و*ngIf عشان تتحقق إذا كان العنصر نشط ولا لأ.
    


    لو استخدمت عنصر زي span مثلا عشان تحط الـ \*ngFor هتلاقي إنه بيضيف عنصر span جديد في DOM لكل عنصر، وده ممكن يخلي الكود أطول وممكن يأثر على الـ CSS.

    لكن لو استخدمت ng-container، هتتجنب الحكاية دي
    


    بدون ng-container
    


    


    ```HTML

      

        

          
    • 

            {{item.name}}

          
      • 

              

    


    ```
    


    

    باستخدام ng-container

    


    ```HTML

      

        

          
    • 

            {{item.name}}

          
      • 

        

    

    ```
    


    

    مثال تاني مع ngIf

    لو عندك شرط *ngIf عشان تتحقق من وجود عنصر معين، مفيش داعي تستخدم div أو أي عنصر عشان تحط فيه الشرط ده؛ ممكن تستبدله بـ ng-container
    


    بدون ng-container
    


    


    ```HTML

    

      
    

        {{item.name}}

      
    

    

    ```
    


    

    باستخدام ng-container
    


    


    ```HTML
    


      
    

        {{item.name}}

      
    


    ```
    


    

    

    


    ## How to use ng-template and TemplateRef in Angular
    


    [⬆️ Back to Top](#top)
    


    

    الـ ng-template ده عنصر في Angular بيستخدم عشان تحط فيه template معين، لكن من غير ما يتعرض في الصفحة (الـ DOM) بشكل مباشر. يعني هو كأنك بتجهز حاجة وتخليها جاهزة عالرف، ومش بتظهر غير لما تقوله يظهر.
    


    ### مثال بسيط
    


    


    ```HTML
    


    Defining a Template using ng-Template
    


      
     Say Hello
    


    ```
    


     

    مش هتلاقي "Say Hello" ظهرت في الصفحة. السبب إن الـ ng-template لوحده مش هيعرض أي حاجة، هو بس بيحطها على جنب لحد ما تيجي أنت تقوله يعرضها فين وإمتى.
    


    ### إزاي نعرض الـ template؟
    


    #### فيه كذا طريقة علشان تعرض اللي جوه ng-template
    


    ال ngTemplateOutlet: دي Directive بتخليك تعرض الـ template في مكان معين.
    


    #### مثال باستخدام ngTemplateOutlet
    


    الأول بنعمل الـ template ونحط عليه اسم علشان نقدر نرجعله:
    


    


    ```HTML
    


      
    Say Hello/p>

    

    ```
    


    

    وبعدين في أي مكان عاوزين نعرض فيه الـ template ده، بنستخدم ng-container بالطريقة دي

    


    ```HTML
    


    This text is not displayed
    


    ```
    


    

    فالنتيجة اللي هتطلع هي

    


    ```HTML

    Say Hello

    ```
    


    

    ✨ يعني Angular بياخد اللي جوه sayHelloTemplate ويعرضه مكان الـ ng-container
    


    ### طب لو عاوز أتحكم فيه أكتر من TS؟
    


    لو محتاج تتحكم في عرض الـ template من جوه TS؟ بتاع الـ Component، ممكن تستخدم حاجة اسمها TemplateRef و ViewContainerRef.
    


    الTemplateRef: ده عبارة عن object بيحتوي على الـ template نفسه (اللي موجود جوه ng-template). بنستخدمه عشان نمسك الـ template ونتحكم فيه من الكود.
    


    الViewContainerRef: ده عبارة عن مكان في الـ DOM (الصفحة) تقدر تعرض فيه الـ template في أي وقت. هو بيحدد المكان اللي الـ template هيظهر فيه، وده بيبقى مفيد لما تكون عاوز تضيف أو تحذف أجزاء من الـ DOM بشكل ديناميكي.
    


    #### مثال باستخدام TemplateRef و ViewContainerRef
    


     
    


    ```typescript

    @ViewChild('sayHelloTemplate', { read: TemplateRef }) sayHelloTemplate: TemplateRef;

    ```
    


    

    وبعدين ممكن تستخدمه في الكود علشان تعرضه كده

    


    ```typescript

    this.vref.createEmbeddedView(this.sayHelloTemplate);

    ```
    


    

    


    ```typescript

    import {

      Component,

      ViewChild,

      TemplateRef,

      ViewContainerRef,

      AfterViewInit,

    } from "@angular/core";
    


    @Component({

      selector: "app-root",

      templateUrl: "./app.component.html",

      styleUrls: ["./app.component.css"],

    })

    export class AppComponent implements AfterViewInit {

      @ViewChild("sayHelloTemplate", { read: TemplateRef })

      sayHelloTemplate: TemplateRef;
    


      constructor(private vref: ViewContainerRef) {}
    


      ngAfterViewInit() {

        this.vref.createEmbeddedView(this.sayHelloTemplate);

      }

    }

    ```
    


    


    ### ليه استخدمنا AfterViewInit؟
    


    علشان نتاكد إن الـ template بقى جاهز واتحمل في الصفحة، لأن لو جربنا نستخدمه مباشرة في ngOnInit ممكن ميكنش اتحمل بالكامل.
    


    ## الng-template مع ngIf
    


    لما تستخدم ngIf، الAngular بيحولها تلقائيًا لـ ng-template (behind the scenes). يعني بدل ما تكتب الكود بالشكل المعتاد
    


    


    ```HTML

    

      
    You are selected
    

    

    ```
    


    

    تقدر تكتبها باستخدام  بالشكل ده:

    


    ```HTML
    


      
    

        
    You are selected
    

      
    


    ```
    


    


    ### طيب إيه اللي بيحصل هنا؟
    


    الAngular لما بيشوف \*ngIf بيترجمها تلقائيًا لـ ng-template بحيث لما الشرط يكون true، يعرض اللي جواه، ولو الشرط false، مش هيعرض أي حاجة. فبكده ng-template بيدي مرونة أكبر للتحكم في أماكن العرض وشروطه.
    


    ### ليه ممكن تستخدم ng-template بشكل مباشر مع ngIf؟
    


    في حالات ممكن تحتاج تتحكم في طريقة العرض بشكل أوسع من مجرد \*ngIf. مثلاً، لو عاوز تعمل أجزاء تانية تظهر لو الشرط كان false، زي استخدام الـ then و else.
    


    #### مثال مع then و else
    


    لو عندك سيناريو فيه محتوى عاوز تعرضه لما الشرط يكون true، ومحتوى تاني لما الشرط يكون false، تقدر تعملها كده
    


    


    ```HTML

    


      
     You are selected
    


      
     You are selected 
    


    ```
    


    

    

    


    ## How to Use ngTemplateOutlet in Angular?
    


    [⬆️ Back to Top](#top)
    


    

    في Angular، الـ ngTemplateOutlet هو Directive بيستخدم لعرض Template معين في مكان محدد داخل الـ DOM باستخدام Reference للـ Template ده، وكمان ممكن تمرر معاه بيانات. دي أداة قوية بتسمحلك تستخدم نفس الـ Template أكتر من مرة في أماكن مختلفة وتتحكم في محتواه بناءً على اللي انت محتاجه.
    


    ### إزاي نستخدم ngTemplateOutlet
    


    تحديد Template: بنبدأ بكتابة Template باستخدام ng-template، وده بيكون مجرد تصميم مش بيظهر لوحده. لازم نحدد Reference للـ Template ده زي #template1.
    


    


    ```HTML
    


       
     Template 
    


    ```
    


     

    استخدام ngTemplateOutlet: عشان نعرض الـ Template ده في مكان معين، بنستخدم ngTemplateOutlet ونعينه للـ Reference اللي حددناه.

    


    ```HTML
    


    ```
    


    

    تمرير بيانات للـ Template: ممكن نستخدم خاصية ngTemplateOutletContext عشان نمرر بيانات للـ Template كمان. يعني لو عندنا قيمة اسمها value، نقدر نمررها كالتالي:
    


    


    ```HTML
    


       
    القيمة اللي وصلت من الـ Parent هي {{value}}
    


    ```
    


    


    ### استخدام $implicit
    


    في Angular، استخدام implicit بيسمحلك تمرر قيمة افتراضية لأي متغير محلي (local variable) في ng-template من غير ما تعينها مباشرة للمتغير ده. ببساطة، لو عينت قيمة للـ implicit في ngTemplateOutletContext، المتغيرات اللي ملهاش قيمة صريحة هتاخد القيمة اللي عينتها لـ $implicit.
    


    


    ```HTML
    


      
    hello {{name}}، {{message}}
    


    ```
    


    

    الlet-name: هنا إحنا بنعرّف متغير محلي اسمه name داخل الـ ng-template. المتغير ده هياخد قيمته من  implicit اللي بنحدده في كل مرة نستخدم فيها الـ Template.
    


    let-message="messageText": هنا بنعرّف متغير محلي تاني اسمه message داخل نفس الـ Template، والمتغير ده هياخد قيمته من messageText اللي بنمرره في ngTemplateOutletContext.
    


    


    ## What are signals?
    


    [⬆️ Back to Top](#top)
    


    

    خليني أقولك ببساطة: الـ"Signals" في Angular هي زي وعاء بيحتفظ بقيمة معينة (سواء رقم، نص، أو حتى بيانات معقدة)، والميزة الكبيرة فيها إنها بتقدر تبلغ أي "مستهلك"  لما القيمة دي تتغير.
    


    فكرتها إنها بتسهّل متابعة أي تغييرات بتحصل على البيانات اللي بنعتمد عليها. يعني، لما مثلاً تبقى عندك واجهة بتظهر (Counter) بيزيد، ممكن تعمل الـ"counter" ده كـ"Signal". لما قيمة العداد تتغير، أي مكان بيستخدم القيمة دي هيعرف فوراً إن فيه تغيير حصل.
    


    ### دلوقتي عندنا نوعين من الـ"Signals"
    


    ##### الWritable Signal
    


    النوع ده تقدر تغيره بنفسك. يعني تقدر تزود القيمة بتاعته، تنقصها، أو تعدلها بأي شكل.
    


    


    ```typescript

    const count = signal(0);

    ```
    


    


    ### ازاي نغير قيمة الـWritable Signal؟
    


    #### تغيير مباشر باستخدام .()set
    


    تقدر تستخدم ()set لو عايز تدي قيمة جديدة مباشرة للـ"signal"
    


    


    ```typescript

    count.set(3); // كده القيمة بقت 3

    ```
    


    


    #### تحديث القيمة باستخدام ()update
    


    تقدر كمان تستخدم ()update علشان تحسب قيمة جديدة بناءً على القيمة الحالية. زي إنك تزود القيمة بواحد:
    


    


    ```type