🅰️ Angular 치트시트

import { Component } from '@angular/core';

@Component({
    selector: 'app-example',
    template: `
        <div>
            <h1>{{ title }}</h1>
            <p>{{ message }}</p>
            <button (click)="onClick()">Click me</button>
        </div>
    `,
    styles: [`
        h1 { color: blue; }
        button { padding: 10px; }
    `]
})
export class ExampleComponent {
    title = 'Hello Angular!';
    message = 'Welcome to Angular';
    
    onClick() {
        console.log('Button clicked!');
    }
}

<div>
    <!-- 텍스트 보간 -->
    <h1>{{ title }}</h1>
    
    <!-- 속성 바인딩 -->
    <img [src]="imageUrl" [alt]="imageAlt">
    
    <!-- 이벤트 바인딩 -->
    <button (click)="handleClick()">Click me</button>
    
    <!-- 양방향 바인딩 -->
    <input [(ngModel)]="name" placeholder="Enter name">
    
    <!-- 조건부 렌더링 -->
    <div *ngIf="show">This is shown</div>
    <div *ngIf="!show">This is hidden</div>
    
    <!-- 리스트 렌더링 -->
    <ul>
        <li *ngFor="let item of items; let i = index">
            {{ i + 1 }}. {{ item.name }}
        </li>
    </ul>
</div>

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class DataService {
    private data: any[] = [];
    
    getData(): any[] {
        return this.data;
    }
    
    addData(item: any): void {
        this.data.push(item);
    }
    
    removeData(index: number): void {
        this.data.splice(index, 1);
    }
}

// 컴포넌트에서 사용
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
    selector: 'app-example',
    template: `<div>{{ data | json }}</div>`
})
export class ExampleComponent implements OnInit {
    data: any[] = [];
    
    constructor(private dataService: DataService) {}
    
    ngOnInit() {
        this.data = this.dataService.getData();
    }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class ApiService {
    private apiUrl = 'https://api.example.com';
    
    constructor(private http: HttpClient) {}
    
    getUsers(): Observable<any[]> {
        return this.http.get<any[]>(`${this.apiUrl}/users`);
    }
    
    createUser(user: any): Observable<any> {
        return this.http.post<any>(`${this.apiUrl}/users`, user);
    }
    
    updateUser(id: number, user: any): Observable<any> {
        return this.http.put<any>(`${this.apiUrl}/users/${id}`, user);
    }
    
    deleteUser(id: number): Observable<any> {
        return this.http.delete<any>(`${this.apiUrl}/users/${id}`);
    }
}

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

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent },
    { path: '**', redirectTo: '' }
];

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

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-form',
    template: `
        <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
            <div>
                <label>Name:</label>
                <input formControlName="name" type="text">
                <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
                    Name is required
                </div>
            </div>
            
            <div>
                <label>Email:</label>
                <input formControlName="email" type="email">
                <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
                    Valid email is required
                </div>
            </div>
            
            <button type="submit" [disabled]="userForm.invalid">Submit</button>
        </form>
    `
})
export class FormComponent {
    userForm: FormGroup;
    
    constructor(private fb: FormBuilder) {
        this.userForm = this.fb.group({
            name: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]]
        });
    }
    
    onSubmit() {
        if (this.userForm.valid) {
            console.log(this.userForm.value);
        }
    }
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
    transform(value: string): string {
        if (!value) return '';
        return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
    }
}

// 템플릿에서 사용
<div>{{ 'hello world' | capitalize }}</div>

// 내장 파이프들
<div>{{ date | date:'short' }}</div>
<div>{{ price | currency:'USD' }}</div>
<div>{{ text | slice:0:10 }}</div>
<div>{{ items | filter:searchTerm }}</div>

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

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    @Input() appHighlight = 'yellow';
    
    constructor(private el: ElementRef) {}
    
    @HostListener('mouseenter') onMouseEnter() {
        this.highlight(this.appHighlight);
    }
    
    @HostListener('mouseleave') onMouseLeave() {
        this.highlight(null);
    }
    
    private highlight(color: string | null) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}

// 템플릿에서 사용
<p appHighlight="lightblue">Hover over me!</p>