Component

angular memiliki beberapa bagian untuj menjalankan sebuah halama,. bagian ini meliputi

• component
• service
• directive
• pipe

Component (Komponen)

Fungsi:

• UI Building Block: Mengontrol bagian tertentu dari UI (seperti kombinasi React component + JSX + CSS)
• Struktur Terenkapsulasi: Menggabungkan template (HTML), logic (TypeScript), dan styles (CSS) dalam satu unit
• Lifecycle Hooks: Memiliki siklus hidup seperti ngOnInit() (setara useEffect dengan dependency array kosong)

Analog React:

// React Component
function MyComponent() {
  return <div>Hello React</div>;
}

// Angular Component (app.component.ts)
@Component({
  selector: 'app-root',
  template: `<div>Hello Angular</div>`
})
export class AppComponent {}

Service (Layanan)

Fungsi:

• Business Logic: Menangani logika bisnis, API calls, state management (seperti custom hooks atau context di React)
• Shared State: Data yang bisa diakses oleh multiple components (mirip Redux/Zustand tapi tanpa setup ekstra)
• Dependency Injection: Di-inject ke component melalui constructor (lebih terstruktur daripada React context)

Analog React:

// React Custom Hook
function useUserService() {
  const [users, setUsers] = useState([]);
  const fetchUsers = () => {/* ... */};
  return { users, fetchUsers };
}

// Angular Service (user.service.ts)
@Injectable({ providedIn: 'root' })
export class UserService {
  users: User[] = [];
  fetchUsers() { /* HTTP call */ }
}

Directive (Direktif)

Fungsi:

• DOM Manipulation: Memodifikasi perilaku/penampilan elemen DOM (seperti kombinasi React props + custom hooks)

Tipe:

• Structural Directives: Mengubah layout (ngIf, ngFor ≈ React conditional rendering & map)
• Attribute Directives: Mengubah tampilan/style ([ngStyle] ≈ React style prop)

Contoh Custom Directive:

// Highlight Directive (seperti custom hook untuk DOM)
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  @HostListener('mouseenter') onHover() {
    this.el.nativeElement.style.background = 'yellow';
  }
}

// Penggunaan di template:
<p appHighlight>Hover me!</p>

Pipe (Fungsi Transformasi)

Fungsi:

• Data Transformation: Memformat data untuk ditampilkan (seperti utility function di React yang dipakai di JSX)
• Pure Function: Tidak mengubah data asli (mirip konsep memoization)
• Built-in Pipes: date, currency, json (≈ library seperti date-fns atau formatCurrency)

Analog React:

// React: Utility function in JSX
<p>{formatDate(user.birthday)}</p>

// Angular Pipe (date-format.pipe.ts)
@Pipe({ name: 'dateFormat' })
export class DateFormatPipe implements PipeTransform {
  transform(value: Date): string {
    return new Date(value).toLocaleDateString();
  }
}

// Penggunaan di template:
<p>{{ user.birthday | dateFormat }}</p>

📌 Mapping Konsep React → Angular

Konsep React	Analog Angular	Perbedaan Utama
Component	Component	Angular component = HTML + CSS + TS
Hooks/Custom Hooks	Service	Service di-inject via DI system
Context/Redux	Service + RxJS	Angular punya RxJS terintegrasi
JSX Props	@Input()/@Output()	Two-way binding dengan [(ngModel)]
useEffect	Lifecycle Hooks	ngOnChanges() untuk prop changes
Utility Functions	Pipe	Pipe digunakan di template
HOC/Render Props	Directive	Directive manipulasi DOM langsung

💡 Tips untuk React Developers

• Component = Gabungan dari React component + CSS module
• Service = Gantinya custom hooks + context API
• Directive = Alternatif untuk prop drilling/HOC
• Pipe = Utility function yang dipakai di template

Contoh integrasi

// Parent Component (React-like props)
@Component({ /* ... */ })
export class ParentComponent {
  @Input() title: string;
  @Output() clicked = new EventEmitter();
}

// Child Component
<app-child 
  [title]="'Hello'" 
  (clicked)="onClick()">
</app-child>