ReFresh: Angular


Angular is an opinionated JavaScript (JS) framework designed for building single page applications (SPAs). Angular has been my JavaScript framework of choice. I follow its development and I use it in both personal and professional projects since its humble beginning from v2 in 2016. To stay up to date with the technology, from time to time, I review its concepts and new additions. For a full review, I recommend visiting Angular Training for the best non-official review of Angular technology for non-starters. If you starr your Angular journey familiarize yourself with official Angular Docs first.


Original JS was created in 1995. In 2015, JS evolved into a common standard called: ES6 and its successors. ES6 introduces new concepts that promote JS usage of its good parts. ES6 is supported by all major browsers without compilation to JS .

Although, ES6 is a milestone JS improvement. It doesn’t “fix” all its quirks, for example:

  • “123” + 1 = “1231”
  • “123” – 1 = 122

Introduction of class, let and const are major ES6 additions. Class simplifies prototypical inheritance model, const guards against simple overrides (descendant properties can still be overridden) and let takes care of context through block scoping, for example:

for(var x=0; x<5; x++) {
  setTimeout(()=>console.log(x), 0)
// 5,5,5,5,5

But, with let:

for(let x=0; x<5; x++) {
  setTimeout(()=>console.log(x), 0)
// 0,1,2,3,4

Content Projection

Use component content and inject into appropriate spots with <ng-content>. This also selects multi-projections, for example in component:

<div style="...">
  <h4>Child Component with Select</h4>
  <div style="...">
    <ng-content select="header"></ng-content>
  <div style="...">
    <ng-content select="section"></ng-content>
  <div style="...">
    <ng-content select=".class-select"></ng-content>
  <div style="...">
    <ng-content select="footer"></ng-content>

Then we can call it like:

  <section>Section Content</section>
  <div class="class-select">
    div with .class-select
  <footer>Footer Content</footer>
  <header>Header Content</header>

ng-template vs ng-container

Both ng-template and ng-container are not rendered to DOM but their children are. ng-template allows for dynamic reference, ng-container allows to output the dynamic reference.


Object.assign allows to merge objects and set immutability with the help of its 3rd parameter. Object.freeze allows us to disable object mutation with a combination of Object.assign like so:

let movie1 = {
  name: 'Star Wars',
  episode: 7

let movie2 = Object.freeze(Object.assign({}, movie1));

movie2.episode = 8; // fails silently in non-strict mode,
                    // throws error in strict mode

console.log(movie1.episode); // writes 7
console.log(movie2.episode); // writes 7


VersionDateMajor Changes and Additions
209/2016Lift Off!
403/2017Adoption of semantic versioning
Angular Universal
New HttpClient (v4.3)
511/2017Improved build time (incremental builds)
Internationalized number, date and currency
New router lifecycle events
605/2018New cli commands ng update and ng add
Angular Elements
Angular Material + CDK Components
providedIn: 'root'
710/2018CLI prompts
Virtual scroll
Drag and drop
805/2019Smaller bundles
Alignment with the ecosystem
902/2020Ivy by default
1006/2020New date range picker
Optional stricter settings
Deprecating IE9, 10, and Internet Explorer Mobile.
1112/2020Improved reporting and logging
1205/2021Nullish coalescing
1311/2021Removed view engine
Build cache
Dropped support for IE11
1406/2022Standalone components
Strictly typed reactive forms
Title strategy
1511/2022Router standalone APIs
CDK Listbox
1605/2023Angular signals
Server-side rendering and hydration
Required input
Self-closing tags
1711/2023Deferrable views
Alternative conditional statements