Ogni componente ha un selettore univoco dichiarato nel file .ts , questo dà la possibilita di integrare un componente in un altro inserendo il suo selettore nel punto dove lo si vuole visualizzare, ed importandolo nel file ts del componente che lo conterrà.
Nel file HTML del componente principale: (app.component)
<h3>App Component</h3>
<app-te></app-te>
<div class="lista">
<ul>
<li>Caffè</li>
<li>Te</li>
<li>Milk</li>
</ul>
</div>
Nota: app-te è il selettore del componente che viene inserito.
Nel file TS del componente principale: (app.component)
import { TeComponent } from './te/te.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [TeComponent],
......
Nota: TeComponent è il nome del componente che viene inserito.