Understanding Components

Use Angular CLI to create a component easily:

ng generate component my-component

ng generate component my-component

An Angular component usually has four main files:

• .html: template
• .ts: logic
• .css: styles
• .spec.ts: testing

The @Component decorator connects your component class to its template and styles.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Angular components have lifecycle hooks that let you run code at specific points. Common hooks include ngOnInit() and ngOnDestroy().

ngOnInit() runs after Angular initializes component data. It's great for initial setup:

ngOnInit() {
  console.log('Component initialized!');
}

Use your component's selector in other templates to display it:

<app-my-component></app-my-component>

You learned about components, how to create them, and their lifecycle hooks. Great job!