[RFC: #50719]: Angular new Built In Control Flow Syntax 🚧 📢
Published: 2023-07-23 12:45:54

---
title: [RFC: #50719]: Angular  new Built In Control Flow Syntax 🚧 📢 
published: true
description: Angular team as proposed new RFC for new built in control flow syntax
tags: 
# cover_image: 
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-22 11:24 +0000
---

![Syntactic Sugar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdvq65wzygzncfvsv2si.jpg)

Angular teams has been working hard to introduce some cool features in upcoming releases and before going getting things into production. Team has opened a new RFC to provide `new` control flow syntax to support `zone/zoneless` based applications.

Newly proposed syntax is just **SYNTACTIC SUGAR* it will provide common `Interface` to `*` structural directives in order to avoid awkwardness syntax underlying for **each** 
structural directive.

As per RFC
_"...technically `internals` of the new control flow will use the `same` concepts as the structural directives, including <ng-template>s and view containers._"

#### Why do we need `NEW` control flow syntax?

- In current implementation *ngIf, *ngFor, [ngSwitch] which are just sugar coated over `ng-template` therefore adding complex conditional logic will add/require multiple `ng-template` under the hood based on nesting level.

- Current syntax not handle `if/else if/else` in convenient way which adds a-lot of boilerplate code wrappers under the hood by framework which adds more **complexity** while reading code and maintaining templates.

- No strict template checking is done for `ngSwitch`

- You can't add **multiple directive** within same element instead either you have to use either `special` element called `ng-container` or use normal `HTML` element.

- To stay relevant with Javascript or Other framework syntax to have less steep curve.

Lastly **existing** directives not able to function for zoneless application e.g signals implementation therefore angular team has proposed a new **built-in control** flow syntax for templates in order to support zone (**<v16**) / zoneless (**v16+**) applications



## New proposed control flow syntax

**Conditional Control flow** 

- Keywords
  - if/else if/else

**Old Syntax**


![If/Else old syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/675wwqp1hu6ktsh94qvy.png)


**New Syntax**


![If/else new syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4izqqrmfu7vaundvcit5.png)


**Switch Control flow** 

- Keywords
  - switch/case/default

**OLD Syntax**


![switch old syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oawyv25348s7bggan0if.png)


**New Syntax**

![switch new syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjiomgbonysthylp50t3.png)

_Note: No `break` statement required 🎉_

👉 Interesting way to support multiple cases within a switch.

![Fallback cases](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6swus2h1h89hse1lzfy.png)


**Loop Control flow** 


- Keywords
  - for/empty


**Old Syntax**

![for loop new syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/875o6byihhy5fko51scf.png)


**New Syntax**

![for loop old syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baspmssndln1llqmneo3.png)


**Keynote:**
 
- All structural directives are (proposed) syntax is introduced in the form of block `{ ... }`

- Each structural directive has `#` sign before starting block `{#<NAME_OF_DIRECTIVE>}` in order to differentiate from HTML elements and Angular directives and ends with `</<NAME_OF_DIRECTIVE>`.

- New proposed syntax may/mayn't require parenthesis(optional( (<condition) for conditions due to surrounding braces of blocks.


#### Benefits:

- Code is much clear and compact compare to old syntax.
- Multiple conditions with keywords can be applied.
- Improves DX and helps to improve and maintain code from future perspective.



#### Conclusion: 📝

The proposed built-in control flow syntax for Angular templates represents a major step forward in improving DX by addressing the weaknesses of the existing micro-syntax.

Therefore Angular team as **proposed** new CFS syntax for template to support the **zone/zoneless(signal)** based applications and also trying to achieve better **Developer Experience (DX)** and try to be as close to `JS/TS/Framework` syntax to avoid confusion and cluttering in templates. 

Hopefully [RFC](https://github.com/angular/angular/discussions/50719) will be closed and final summary would be posted before it gets out in **Angular v17**

Let me know your thoughts via comments and feedback. 💬

Happy coding and Happy Learning! 🚀🚀