Angular: Framework Web Enterprise

# Instal Angular CLI secara global
npm install -g @angular/cli

# Verifikasi instalasi
ng version

# Buat proyek baru
ng new my-angular-app

# Masuk ke direktori proyek
cd my-angular-app

# Jalankan development server
ng serve --open

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts        # Root component
│   │   ├── app.component.html      # Template root
│   │   ├── app.component.css       # Style root
│   │   ├── app.component.spec.ts   # Unit test
│   │   ├── app.config.ts           # App configuration
│   │   └── app.routes.ts           # Route definitions
│   ├── assets/                      # Static files
│   ├── environments/                # Env configs
│   ├── index.html                   # Main HTML
│   ├── main.ts                      # Bootstrap entry
│   └── styles.css                   # Global styles
├── angular.json                     # Angular config
├── package.json                     # Dependencies
├── tsconfig.json                    # TypeScript config
└── tsconfig.app.json               # App TS config

# Generate component menggunakan CLI
ng generate component components/user-card
# Atau shorthand:
ng g c components/user-card

# Hasilnya:
# src/app/components/user-card/
# ├── user-card.component.ts
# ├── user-card.component.html
# ├── user-card.component.css
# └── user-card.component.spec.ts

// user-card.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './user-card.component.html',
  styleUrls: ['./user-card.component.css']
})
export class UserCardComponent {
  // Input properties — data dari parent component
  @Input() name: string = '';
  @Input() email: string = '';
  @Input() avatar: string = '';
  @Input() role: string = 'User';

  // Output events — emit event ke parent
  @Output() onDelete = new EventEmitter<string>();
  @Output() onEdit = new EventEmitter<void>();

  // Internal state
  isExpanded: boolean = false;

  // Methods
  toggleExpand(): void {
    this.isExpanded = !this.isExpanded;
  }

  handleDelete(): void {
    if (confirm(`Hapus user ${this.name}?`)) {
      this.onDelete.emit(this.name);
    }
  }

  handleEdit(): void {
    this.onEdit.emit();
  }

  // Getter
  get badgeColor(): string {
    const colors: Record<string, string> = {
      'Admin': '#e74c3c',
      'Editor': '#f39c12',
      'User': '#2ecc71'
    };
    return colors[this.role] || '#95a5a6';
  }
}

<!-- user-card.component.html -->
<div class="user-card" [class.expanded]="isExpanded">
  <div class="user-header">
    <img [src]="avatar" [alt]="name" class="user-avatar">
    <div class="user-info">
      <h3>{{ name }}</h3>
      <p>{{ email }}</p>
      <span class="badge" [style.backgroundColor]="badgeColor">
        {{ role }}
      </span>
    </div>
  </div>

  <div class="user-actions">
    <button (click)="toggleExpand()">
      {{ isExpanded ? 'Tutup' : 'Detail' }}
    </button>
    <button (click)="handleEdit()">✏️ Edit</button>
    <button (click)="handleDelete()">🗑️ Hapus</button>
  </div>

  <div class="user-details" *ngIf="isExpanded">
    <ng-content></ng-content>
  </div>
</div>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { UserService } from '../../services/user.service';

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    <div *ngFor="let user of users">
      <app-user-card
        [name]="user.name"
        [email]="user.email"
        [avatar]="user.avatar"
        [role]="user.role"
        (onDelete)="removeUser($event)"
      />
    </div>
  `
})
export class UserListComponent implements OnInit, OnDestroy {
  users: any[] = [];
  private subscription!: Subscription;

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    console.log('Component initialized');
    this.subscription = this.userService.getUsers().subscribe(
      data => this.users = data
    );
  }

  ngOnDestroy(): void {
    console.log('Component destroyed');
    this.subscription.unsubscribe();
  }

  removeUser(name: string): void {
    this.users = this.users.filter(u => u.name !== name);
  }
}

<!-- Contoh Semua Jenis Data Binding -->

<!-- 1. Interpolation -->
<h1>Selamat datang, {{ username }}!</h1>
<p>Total: {{ items.length }} item</p>

<!-- 2. Property Binding -->
<img [src]="user.avatar" [alt]="user.name">
<button [disabled]="isLoading">Simpan</button>

<!-- 3. Event Binding -->
<button (click)="saveData()">Simpan</button>
<input (keyup.enter)="search($event)">
<form (submit)="onSubmit()">...</form>

<!-- 4. Two-Way Binding -->
<input [(ngModel)]="searchTerm">
<p>Anda mencari: {{ searchTerm }}</p>

<!-- 5. Class dan Style Binding -->
<div [class.selected]="isSelected"
     [class.error]="hasError"
     [style.background-color]="bgColor"
     [style.width.px]="progressWidth">
  Status: {{ isSelected ? 'Dipilih' : 'Tidak dipilih' }}
</div>

<!-- 6. Template Reference Variables -->
<input #searchInput>
<button (click)="doSearch(searchInput.value)">Cari</button>

<!-- *ngIf: Conditional rendering -->
<div *ngIf="isLoggedIn; else loginTemplate">
  <h2>Selamat datang, {{ user.name }}!</h2>
</div>

<ng-template #loginTemplate>
  <h2>Silakan login terlebih dahulu</h2>
  <button (click)="login()">Login</button>
</ng-template>

<!-- *ngFor: Looping daftar -->
<ul>
  <li *ngFor="let product of products; let i = index;
              trackBy: trackByProductId;
              let isOdd = odd; let isEven = even"
      [class.odd-row]="isOdd"
      [class.even-row]="isEven">
    {{ i + 1 }}. {{ product.name }} - {{ product.price | currency:'IDR' }}
  </li>
</ul>

<!-- *ngSwitch: Switch case -->
<div [ngSwitch]="userRole">
  <p *ngSwitchCase="'admin'">Panel Administrator</p>
  <p *ngSwitchCase="'editor'">Panel Editor</p>
  <p *ngSwitchCase="'user'">Panel Pengguna</p>
  <p *ngSwitchDefault>Panel Tamu</p>
</div>

<!-- @if, @for, @switch (Angular 17+ Control Flow) -->
@if (isLoggedIn) {
  <h2>Selamat datang, {{ user.name }}!</h2>
} @else {
  <h2>Silakan login</h2>
}

@for (product of products; track product.id) {
  <app-product-card [product]="product" />
} @empty {
  <p>Tidak ada produk ditemukan.</p>
}

// Membuat Custom Attribute Directive
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  @Input() appHighlight: string = 'yellow';
  @Input() defaultColor: string = 'transparent';

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.appHighlight);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(this.defaultColor);
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

// Penggunaan di template:
// <p appHighlight="lightblue">Hover saya!</p>
// <p [appHighlight]="'yellow'" [defaultColor]="'white'">Hover!</p>

# Generate service menggunakan CLI
ng generate service services/product
# Atau shorthand:
ng g s services/product

// product.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, catchError, throwError } from 'rxjs';

export interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  stock: number;
}

@Injectable({
  providedIn: 'root'  // Singleton tersedia di seluruh app
})
export class ProductService {
  private apiUrl = 'https://api.example.com/products';

  // BehaviorSubject untuk menyimpan state
  private productsSubject = new BehaviorSubject<Product[]>([]);
  public products$ = this.productsSubject.asObservable();

  constructor(private http: HttpClient) {}

  // GET semua produk
  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  // GET produk berdasarkan ID
  getProductById(id: number): Observable<Product> {
    return this.http.get<Product>(`${this.apiUrl}/${id}`).pipe(
      catchError(this.handleError)
    );
  }

  // POST produk baru
  createProduct(product: Omit<Product, 'id'>): Observable<Product> {
    return this.http.post<Product>(this.apiUrl, product).pipe(
      catchError(this.handleError)
    );
  }

  // PUT update produk
  updateProduct(id: number, product: Partial<Product>): Observable<Product> {
    return this.http.put<Product>(`${this.apiUrl}/${id}`, product).pipe(
      catchError(this.handleError)
    );
  }

  // DELETE produk
  deleteProduct(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`).pipe(
      catchError(this.handleError)
    );
  }

  // Error handler
  private handleError(error: any): Observable<never> {
    console.error('API Error:', error);
    return throwError(() => new Error(
      error.message || 'Terjadi kesalahan pada server'
    ));
  }
}

// 1. Root level (singleton di seluruh app)
@Injectable({ providedIn: 'root' })
export class GlobalService { }

// 2. Module level (singleton di dalam module)
@NgModule({
  providers: [ModuleService]
})
export class FeatureModule { }

// 3. Component level (instance baru per component)
@Component({
  selector: 'app-demo',
  providers: [LocalService]
})
export class DemoComponent { }

// 4. Standalone component level
@Component({
  selector: 'app-demo',
  standalone: true,
  providers: [LocalService]  // Instance baru setiap kali
})
export class DemoComponent { }

// app.routes.ts
import { Routes } from '@angular/router';
import { authGuard } from './guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadComponent: () =>
      import('./pages/home/home.component')
        .then(m => m.HomeComponent),
    title: 'Beranda - MyApp'
  },
  {
    path: 'products',
    loadComponent: () =>
      import('./pages/products/products.component')
        .then(m => m.ProductsComponent),
    title: 'Produk - MyApp'
  },
  {
    path: 'products/:id',
    loadComponent: () =>
      import('./pages/product-detail/product-detail.component')
        .then(m => m.ProductDetailComponent),
    title: 'Detail Produk - MyApp'
  },
  {
    path: 'admin',
    canActivate: [authGuard],
    loadComponent: () =>
      import('./pages/admin/admin.component')
        .then(m => m.AdminComponent),
    title: 'Admin Panel',
    children: [
      {
        path: 'dashboard',
        loadComponent: () =>
          import('./pages/admin/dashboard/dashboard.component')
            .then(m => m.DashboardComponent)
      },
      {
        path: 'users',
        loadComponent: () =>
          import('./pages/admin/users/users.component')
            .then(m => m.UsersComponent)
      },
      {
        path: 'settings',
        loadComponent: () =>
          import('./pages/admin/settings/settings.component')
            .then(m => m.SettingsComponent)
      }
    ]
  },
  {
    path: '**',
    loadComponent: () =>
      import('./pages/not-found/not-found.component')
        .then(m => m.NotFoundComponent),
    title: 'Halaman Tidak Ditemukan'
  }
];

<!-- app.component.html -->
<app-navbar></app-navbar>

<main>
  <router-outlet></router-outlet>
</main>

<app-footer></app-footer>

<!-- navbar.component.html -->
<nav>
  <a routerLink="/home" routerLinkActive="active">Beranda</a>
  <a routerLink="/products" routerLinkActive="active">Produk</a>
  <a [routerLink]="['/products', 42]">Produk #42</a>
  <a routerLink="/admin" routerLinkActive="active">Admin</a>
</nav>

// guards/auth.guard.ts
import { inject } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isAuthenticated()) {
    return true;
  }

  // Redirect ke login dengan return URL
  router.navigate(['/login'], {
    queryParams: { returnUrl: state.url }
  });
  return false;
};

// Guard untuk role-based access
export const roleGuard: CanActivateFn = (route) => {
  const authService = inject(AuthService);
  const requiredRole = route.data['role'] as string;

  return authService.hasRole(requiredRole);
};

import { Router, ActivatedRoute } from '@angular/router';

@Component({ /* ... */ })
export class ProductComponent {
  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  // Navigasi sederhana
  goToHome(): void {
    this.router.navigate(['/home']);
  }

  // Navigasi dengan parameter
  goToProduct(id: number): void {
    this.router.navigate(['/products', id]);
  }

  // Navigasi dengan query params
  searchProducts(query: string): void {
    this.router.navigate(['/products'], {
      queryParams: { q: query, page: 1 }
    });
  }

  // Mengambil route params
  ngOnInit(): void {
    this.route.params.subscribe(params => {
      const id = +params['id'];
      this.loadProduct(id);
    });

    this.route.queryParams.subscribe(params => {
      const query = params['q'] || '';
      this.searchTerm = query;
    });
  }
}

import { Observable, of, from, interval, Subject, BehaviorSubject } from 'rxjs';
import {
  map, filter, switchMap, mergeMap, debounceTime,
  distinctUntilChanged, takeUntil, catchError,
  tap, retry, delay, combineLatest
} from 'rxjs/operators';

// === 1. Membuat Observable ===
const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

// Subscribe ke Observable
numbers$.subscribe({
  next: value => console.log('Nilai:', value),
  error: err => console.error('Error:', err),
  complete: () => console.log('Selesai')
});

// === 2. Observable dari array / promise ===
const fruits$ = of('Apel', 'Mangga', 'Jeruk');
const numberArray$ = from([10, 20, 30, 40, 50]);
const timer$ = interval(1000); // Setiap 1 detik

// === 3. Operators: map, filter ===
const processed$ = numberArray$.pipe(
  map(x => x * 2),           // Kalikan 2
  filter(x => x > 40),       // Ambil yang > 40
  tap(x => console.log('Processed:', x)) // Side effect
);
// Output: 60, 80, 100

// === 4. debounceTime untuk search ===
const searchInput$ = new Subject<string>();

searchInput$.pipe(
  debounceTime(300),           // Tunggu 300ms setelah ketikan
  distinctUntilChanged(),      // Hanya jika nilai berubah
  filter(query => query.length >= 3),  // Min 3 karakter
  switchMap(query => this.searchService.search(query))  // Cancel prev
).subscribe(results => {
  this.searchResults = results;
});

// Trigger search dari template:
// onSearch(event: Event) {
//   this.searchInput$.next((event.target as HTMLInputElement).value);
// }

// === 5. combineLatest untuk data gabungan ===
const user$ = this.userService.getCurrentUser();
const settings$ = this.settingsService.getSettings();

combineLatest([user$, settings$]).pipe(
  map(([user, settings]) => ({
    ...user,
    theme: settings.theme,
    language: settings.language
  }))
).subscribe(combinedData => {
  this.appState = combinedData;
});

// === 6. Subject dan BehaviorSubject ===
// Subject — tidak punya nilai awal
const clickSubject$ = new Subject<string>();
clickSubject$.subscribe(val => console.log('Click:', val));
clickSubject$.next('button-1');

// BehaviorSubject — punya nilai awal
const authState$ = new BehaviorSubject<boolean>(false);
authState$.subscribe(state => console.log('Auth:', state));
// Output: Auth: false (nilai awal)
authState$.next(true);
// Output: Auth: true

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, takeUntil, switchMap, startWith, catchError, of } from 'rxjs';
import { ProductService, Product } from '../services/product.service';

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <input
      placeholder="Cari produk..."
      (input)="onSearch($event)"
    >

    <div *ngIf="loading" class="spinner">Loading...</div>

    <div *ngIf="error" class="error">{{ error }}</div>

    <div *ngFor="let product of products" class="product-card">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price | currency:'IDR' }}</p>
    </div>
  `
})
export class ProductListComponent implements OnInit, OnDestroy {
  products: Product[] = [];
  loading = false;
  error = '';

  private destroy$ = new Subject<void>();
  private search$ = new Subject<string>();

  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    // Reactive search dengan RxJS
    this.search$.pipe(
      startWith(''),           // Load semua saat pertama
      debounceTime(300),
      distinctUntilChanged(),
      tap(() => {
        this.loading = true;
        this.error = '';
      }),
      switchMap(query =>
        this.productService.getProducts().pipe(
          map(products =>
            query
              ? products.filter(p =>
                  p.name.toLowerCase().includes(query.toLowerCase()))
              : products
          ),
          catchError(err => {
            this.error = 'Gagal memuat data produk';
            return of([]);
          })
        )
      ),
      takeUntil(this.destroy$)
    ).subscribe(products => {
      this.products = products;
      this.loading = false;
    });
  }

  onSearch(event: Event): void {
    const query = (event.target as HTMLInputElement).value;
    this.search$.next(query);
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// app.config.ts — konfigurasi standalone
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { routes } from './app.routes';
import { authInterceptor } from './interceptors/auth.interceptor';
import { errorInterceptor } from './interceptors/error.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(
      withInterceptors([authInterceptor, errorInterceptor])
    )
  ]
};

// interceptors/auth.interceptor.ts
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from '../services/auth.service';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authService = inject(AuthService);
  const token = authService.getToken();

  if (token) {
    const cloned = req.clone({
      setHeaders: {
        Authorization: 'Bearer ' + token
      }
    });
    return next(cloned);
  }

  return next(req);
};

// interceptors/error.interceptor.ts
import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { catchError, throwError } from 'rxjs';

export const errorInterceptor: HttpInterceptorFn = (req, next) => {
  const router = inject(Router);

  return next(req).pipe(
    catchError((error: HttpErrorResponse) => {
      switch (error.status) {
        case 401:
          router.navigate(['/login']);
          break;
        case 403:
          alert('Anda tidak memiliki akses');
          break;
        case 404:
          console.error('Resource tidak ditemukan');
          break;
        case 500:
          alert('Terjadi kesalahan server');
          break;
      }
      return throwError(() => error);
    })
  );
};

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  ReactiveFormsModule,
  FormBuilder,
  FormGroup,
  FormArray,
  Validators
} from '@angular/forms';

@Component({
  selector: 'app-registration',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <form [formGroup]="regForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label>Nama Lengkap</label>
        <input formControlName="fullName" placeholder="Nama Anda">
        <div class="error"
             *ngIf="regForm.get('fullName')?.invalid &&
                    regForm.get('fullName')?.touched">
          Nama wajib diisi (min 3 karakter)
        </div>
      </div>

      <div class="form-group">
        <label>Email</label>
        <input formControlName="email" type="email">
        <div class="error"
             *ngIf="regForm.get('email')?.errors?.['required'] &&
                    regForm.get('email')?.touched">
          Email wajib diisi
        </div>
        <div class="error"
             *ngIf="regForm.get('email')?.errors?.['email'] &&
                    regForm.get('email')?.touched">
          Format email tidak valid
        </div>
      </div>

      <div formGroupName="password">
        <div class="form-group">
          <label>Password</label>
          <input formControlName="pass" type="password">
        </div>
        <div class="form-group">
          <label>Konfirmasi Password</label>
          <input formControlName="confirmPass" type="password">
        </div>
      </div>

      <div formArrayName="skills">
        <label>Keahlian</label>
        <div *ngFor="let skill of skills.controls; let i = index">
          <input [formControlName]="i">
          <button type="button" (click)="removeSkill(i)">Hapus</button>
        </div>
        <button type="button" (click)="addSkill()">+ Tambah Skill</button>
      </div>

      <button type="submit" [disabled]="regForm.invalid">
        Daftar
      </button>
    </form>
  `
})
export class RegistrationComponent implements OnInit {
  regForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.regForm = this.fb.group({
      fullName: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
      password: this.fb.group({
        pass: ['', [Validators.required, Validators.minLength(8)]],
        confirmPass: ['', Validators.required]
      }),
      skills: this.fb.array([
        this.fb.control('')
      ])
    });
  }

  get skills(): FormArray {
    return this.regForm.get('skills') as FormArray;
  }

  addSkill(): void {
    this.skills.push(this.fb.control(''));
  }

  removeSkill(index: number): void {
    this.skills.removeAt(index);
  }

  onSubmit(): void {
    if (this.regForm.valid) {
      console.log('Form Data:', this.regForm.value);
    } else {
      this.regForm.markAllAsTouched();
    }
  }
}

// === OnPush Change Detection ===
import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-user-display',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="user-display">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
  `
})
export class UserDisplayComponent {
  @Input({ required: true }) user!: { name: string; email: string };
}

// === Signal-based Components (Angular 16+) ===
import { Component, signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <h2>Count: {{ count() }}</h2>
    <p>Doubled: {{ doubled() }}</p>
    <button (click)="increment()">+</button>
    <button (click)="decrement()">-</button>
  `
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  constructor() {
    // Effect — runs when signals change
    effect(() => {
      console.log('Count changed to:', this.count());
    });
  }

  increment(): void {
    this.count.update(n => n + 1);
  }

  decrement(): void {
    this.count.update(n => n - 1);
  }
}