Angular Components Cheatsheet
Complete Angular reference: decorators, components, services, lifecycle hooks, directives.
| Feature | Description | Syntax | Example | Category |
|---|---|---|---|---|
| @Component | Define a component | @Component({ selector, template, styles }) | @Component({ selector: "app-root", templateUrl: "app.html" }) | Decorators |
| @Input() | Accept input from parent | @Input() propertyName: type | @Input() name: string | Properties |
| @Output() | Emit events to parent | @Output() eventName = new EventEmitter() | @Output() onClick = new EventEmitter<string>() | Properties |
| @ViewChild() | Access child component | @ViewChild(ChildComponent) child: ChildComponent | @ViewChild("template") tmpl: TemplateRef | Properties |
| @ViewChildren() | Access multiple children | @ViewChildren(ChildComponent) children: QueryList | @ViewChildren(ItemComponent) items: QueryList<ItemComponent> | Properties |
| @ContentChild() | Access projected content | @ContentChild(ProjectedComponent) content | @ContentChild(PanelComponent) panel | Properties |
| ngOnInit() | Component initialization | ngOnInit(): void { } | ngOnInit() { this.loadData() } | Lifecycle |
| ngOnChanges() | Detect input changes | ngOnChanges(changes: SimpleChanges) | ngOnChanges(changes) { console.log(changes.name.currentValue) } | Lifecycle |
| ngOnDestroy() | Cleanup before destroy | ngOnDestroy(): void { } | ngOnDestroy() { this.subscription.unsubscribe() } | Lifecycle |
| @Injectable() | Mark class as service | @Injectable({ providedIn: "root" }) | @Injectable() class UserService { } | Services |
| Dependency Injection | Inject dependencies | constructor(private service: ServiceName) { } | constructor(private http: HttpClient) { } | Services |
| Template Syntax | Bind data to template | {{ expression }} / [property]="expression" | <div [class]="className">{{title}}</div> | Directives |
| (event) | Event binding | (eventName)="handler()" | <button (click)="increment()">Click</button> | Directives |
| *ngIf | Conditional rendering | *ngIf="condition" | <div *ngIf="isVisible">Visible</div> | Directives |
| *ngFor | Loop through items | *ngFor="let item of items" | <li *ngFor="let user of users">{{user.name}}</li> | Directives |