mgechev

We first talked about selectorless at ng-conf 2024.

Originally, Angular was designed to enhance HTML elements with components and directives. That was deeply embedded in AngularJS because there was a global directive registry. Each directive has a selector that could match any element of the page as long as it satisfies the directive's selector. This means that the same HTML can behave very differently depending on the directives that match its elements.

In Angular, we had a hierarchical registry via NgModules. In each NgModule, you can declare components and directives, which can dynamically match elements in the templates of components that belong to the transitive closure of these NgModules. This way, if you provide the same component in the context of a different trasitive closure, the elements of its template can match different components and directives and have a completely different behavior.

Throughout the years, we saw that Ng

mgechev

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes),
  ]
});

mgechev

const { readFileSync } = require('fs');
const { execSync } = require('child_process');

const lastVersion = '14.0.0';

const repos = [
  '~/Projects/angular',
  '~/Projects/components',
  '~/Projects/angular-cli'
];

mgechev

<link rel="shortcut icon" width=32px>
<canvas style="display: none" id="loader" width="16" height="16"></canvas>

<script>
class Loader {
  constructor(link, canvas) {
    this.link = link;
    this.canvas = canvas;
    this.context = canvas.getContext('2d');
    this.context.lineWidth = 2;

mgechev

// constants.js
export const PI = 3.14159265357989;
localStorage.setItem('foo', 'bar');

mgechev

(()=>{"use strict";console.log(1+2)})();

mgechev

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";

// CONCATENATED MODULE: ./utils.js
// utils.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// CONCATENATED MODULE: ./index.js
// index.js

mgechev

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";

// CONCATENATED MODULE: ./operations.js
// utils.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

// CONCATENATED MODULE: ./constants.js
const PI = 3.14159265357989;

mgechev

@Component({
  template: '<h1>{{ article.title }}</h1>'
})
class ArticleComponent {
  article: Article | undefined;
}

mgechev

<div *ngFor="let todo of todos">
  <h2>{{ todo.title }}</h2>
  <button *ngIf="user.isAdmin">Edit</button>
</div>