ReFresh: Angular

Intro

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.

ES6

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>
  <div style="...">
    <ng-content select="section"></ng-content>
  </div>
  <div style="...">
    <ng-content select=".class-select"></ng-content>
  </div>
  <div style="...">
    <ng-content select="footer"></ng-content>
  </div>
</div>

Then we can call it like:

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

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.

Immutability

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

History

Version	Date	Major Changes and Additions
2	09/2016	Lift Off!
4	03/2017	Adoption of semantic versioning Angular Universal New HttpClient (v4.3)
5	11/2017	Improved build time (incremental builds) Internationalized number, date and currency New router lifecycle events
6	05/2018	New cli commands ng update and ng add Angular Elements Angular Material + CDK Components providedIn: 'root'
7	10/2018	CLI prompts Virtual scroll Drag and drop
8	05/2019	Smaller bundles CLI APIs Alignment with the ecosystem
9	02/2020	Ivy by default
10	06/2020	New date range picker Optional stricter settings Deprecating IE9, 10, and Internet Explorer Mobile.
11	12/2020	Improved reporting and logging
12	05/2021	Nullish coalescing
13	11/2021	Removed view engine Build cache Dropped support for IE11
14	06/2022	Standalone components Strictly typed reactive forms Title strategy
15	11/2022	Router standalone APIs NgOptimizedImage CDK Listbox
16	05/2023	Angular signals Server-side rendering and hydration Required input Self-closing tags
17	11/2023	Deferrable views Alternative conditional statements