# Understanding Angular: Components, Routing, and Directives Explained

# **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
    

```bash

@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:

```bash
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:
    
    ```bash
    <div *ngIf="isVisible">This is visible</div>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    ```