Composing Components

Component have a property selector, is meaning it will render on html what selector value

@Component({
  selector: 'hello-world'
})
 
// this example will render on <hello-world/>

If the component need to use other component, you need put the component class name to the imports

import {Component} from '@angular/core';
 
@Component({
  selector: 'app-user',
  template: `
    Username: {{ username }}
  `,
  standalone: true,
})
export class UserComponent {
  username = 'youngTech';
}
 
@Component({
  selector: 'app-root',
  template: `<section>
    <app-user/>
  </section>`,
  standalone: true,
  imports: [UserComponent],
})
export class AppComponent {}