Added two pages angular defer loading and control flow in angular

.all-contributorsrc

@@ -123,6 +123,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "pawanpatil08",
+      "name": "Pawan Patil",
+      "avatar_url": "https://avatars.githubusercontent.com/u/16464034?v=4",
+      "profile": "https://github.com/pawanpatil08",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,
@@ -131,4 +140,4 @@
   "repoHost": "https://github.com",
   "projectName": "angular-snippets",
   "projectOwner": "santoshyadavdev"
-}
+}

README.md

@@ -1,7 +1,9 @@
 # Angular Snippets
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 A website to find and share code snippets for Angular.

src/pages/snippets/Built-In-Control-Flow.mdx

@@ -0,0 +1,83 @@
+---
+title: Built-in control flow in upcoming Angular
+description: "Build in control"
+tags: ["angular", "Deferred Loading", "angular 16"]
+pubDate: Jul 22, 2023
+contributedBy: "@pawanpatil08"
+---
+
+#### Goals:
+
+The new syntax for template control flow has several major goals:
+
+- Syntactically similar to JavaScript's control flow statement syntax.
+- Syntactically distinct from HTML syntax.
+- Works across multiple templates (if-elseif-else, switch-case-default), including template type-checking.
+- Flexible syntax allowing customization for each use case (if vs for vs switch).
+  Address common pain points.
+- It must be possible to automatically migrate virtually all existing control flow usage to the new syntax.
+
+### Conditional control flow uses blocks with the keywords if and else:
+
+```typescript
+{#if cond.expr}
+  Main case was true!
+{:else if other.expr}
+  Extra case was true!
+{:else}
+  False case!
+{/if}
+```
+
+### Switch control flow uses blocks with the keywords switch, case, and default:
+
+```typescript
+{#switch cond.kind}
+  {:case x}
+    X case
+  {:case y}
+    Y case
+  {:case z}
+    Z case
+  {:default}
+    No case matched
+{/switch}
+```
+
+### Loop control flow uses blocks with the keywords for and empty:
+
+```typescript
+{#for item of items; track item.id}
+  {{ item }}
+{:empty}
+  There were no items in the list.
+{/for}
+```
+
+### Detailed Design
+
+```typescript
+{#if cond.expr}
+  <child-cmp />
+{/if}
+```
+
+### if block - conditionals
+
+```typescript
+{#if a > b}
+  {{a}} is greater than {{b}}
+{/if}
+```
+
+```typescript
+{#if a > b}
+  {{a}} is greater than {{b}}
+{:else if b > a}
+  {{a}} is less than {{b}}
+{:else}
+  {{a}} is equal to {{b}}
+{/if}
+```
+
+link for RFC : https://github.com/angular/angular/discussions/50719

src/pages/snippets/deferred-loading-in-angular.mdx

@@ -0,0 +1,64 @@
+---
+title: What is Deferred Loading in Angular
+description: "Deferred Loading in Angular"
+tags: ["angular", "Deferred Loading", "Zoneless angular"]
+pubDate: Jul 22, 2023
+contributedBy: "@pawanpatil08"
+---
+
+as a part of our ongoing work on implementing the Signals RFC,
+we’ve known that the existing zone-based control flow directives would not be able to function in zoneless applications.
+We will need to implement reactive control flow for zoneless applications.
+We considered modifying the existing control flow directives to support zoneless applications as well,
+
+#### Goals:
+
+- Make deferred loading in Angular predictable and ergonomic for all developers
+- Reduce initial page load time due to smaller initial bundle sizes
+  8 Support deferred loading of directives & pipes as well as components
+- Introduce new patterns to allow developers to build applications that leverage deferred loading
+- Integrate deferred loaded primitive with hydration, so that developers can gain maximum benefits
+
+### Deferred blocks
+
+```typescript
+{#defer}
+  <calendar-cmp />
+{/defer}
+```
+
+### on and when
+
+```typescript
+{#defer when cond}
+  <calendar-cmp />
+{/defer}
+```
+
+```typescript
+{#defer on interaction, timer(5s)}
+  <calendar-cmp />
+{/defer}
+```
+
+### :loading blocks
+
+```typescript
+{#defer}
+  <calendar-cmp />
+{:loading}
+  <div class="loading">Loading the calendar...</div>
+{/defer}
+```
+
+### :placeholder blocks
+
+```typescript
+{#defer when cond}
+  <calendar-cmp />
+{:placeholder minimum 500ms}
+  <img src="placeholder.png" />
+{/defer}
+```
+
+Will see you Built-In Control Flow in next snippets