Elementos que componen una UI de Angular o Composing Elements

Cómo componer una UI en Angular con componentes

Un componente en Angular es una unidad que controla la vista del usuario.

UI: User Interface. En otras palabras, UI se refiere a lo que ve el usuario en el navegador. En Angular podríamos decir que un conjunto de componentes forma una UI.

Ahora bien, ¿cómo uso un componente dentro de otro?

Ejemplo:

import {Component} from '@angular/core';

@Component({
    selector: 'app-user',
    template: 'Username : {{ username }}',
    styles: [':host{color: black;}']
})

export class UserComponent {
    username : string = 'Rudolf';
}

@Component({
    selector: 'app-root',
    template: '<section><app-user></app-user></section>',
    styles: [':host {color: black;}']
})

export class AppComponent {}

Salida en el navegador:

Username: Rudolf

En este ejemplo, se ha integrado el componente con selector «app-user» en el componente App.

Este POST es un ejemplo de cómo Angular permite reutilizar componentes para mantener un código más limpio y modular.