diff --git a/.all-contributorsrc b/.all-contributorsrc
index 85b4b8d..49af9b1 100644
--- a/.all-contributorsrc
+++ b/.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"
-}
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index be16d25..22a7cb7 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
# Angular Snippets
+
[](#contributors-)
+
A website to find and share code snippets for Angular.
diff --git a/src/pages/snippets/Built-In-Control-Flow.mdx b/src/pages/snippets/Built-In-Control-Flow.mdx
new file mode 100644
index 0000000..f37a6cd
--- /dev/null
+++ b/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}
+
+{/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
diff --git a/src/pages/snippets/deferred-loading-in-angular.mdx b/src/pages/snippets/deferred-loading-in-angular.mdx
new file mode 100644
index 0000000..73f2612
--- /dev/null
+++ b/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}
+
+{/defer}
+```
+
+### on and when
+
+```typescript
+{#defer when cond}
+
+{/defer}
+```
+
+```typescript
+{#defer on interaction, timer(5s)}
+
+{/defer}
+```
+
+### :loading blocks
+
+```typescript
+{#defer}
+
+{:loading}
+ Loading the calendar...
+{/defer}
+```
+
+### :placeholder blocks
+
+```typescript
+{#defer when cond}
+
+{:placeholder minimum 500ms}
+ 
+{/defer}
+```
+
+Will see you Built-In Control Flow in next snippets