Composants

Le concept

L'un des principaux concepts d'Angular est de voir une application comme une arborescence de composants.

A Component controls a patch of screen real estate that we could call a view, and declares reusable UI building blocks for an application.

Custom Elements

C'est d'ailleurs un concept que l'on retrouve dans tous les frameworks modernes et même nativement avec les Custom Elements : https://developers.google.com/web/fundamentals/web-components/customelements

Exemple à essayer dans la console de votre navigateur :

/* The custom element definition. */
class HelloElement extends HTMLElement {
    connectedCallback() {
        this.textContent = 'Hello 🌍';
    }
}

/* Registering the custom element. */
customElements.define('wt-hello', HelloElement);

/* Injecting the element using innerHTML... */
document.body.innerHTML = '<wt-hello></wt-hello>';

/* ... or using appendChild & createElement. */
document.body.appendChild(document.createElement('wt-hello'));