Components

Components are the building blocks of Angular apps. Each component has:

• Template: The HTML part of the component.

• Class: Contains the logic (written in TypeScript).

• Styles: Defines the look of the component

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  getData() {
    return 'Some data';
  }
}

---

Routing:

Angular uses the Router module to navigate between different pages (or views).

Example of setting up routes:

import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

---

Directives:

1. Directives add behavior to your HTML elements. Common directives:

   • *ngIf: Conditionally display an element.

   • *ngFor: Loop through an array and display elements.

Example:

    <div *ngIf="isVisible">This is visible</div>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>