Unsplash<\/a><\/figcaption><\/figure>\n3. Property and Event Binding<\/h4>\n
Property binding<\/strong> sets DOM or component properties:<\/p>\n<button [disabled]=\"isLoading()\">Save<\/button>\n<\/code><\/pre>\nEvent binding<\/strong> listens for DOM events:<\/p>\n<button (click)=\"save()\">Save<\/button>\n<\/code><\/pre>\nTwo-way binding<\/strong> (for forms) uses [(ngModel)]<\/code> when you import FormsModule<\/code> \u2014 covered in a future forms lesson.<\/p>\n4. Signals for Local State<\/h4>\n
Angular 21 encourages signals<\/strong> for UI state that changes over time:<\/p>\nimport { Component, signal } from '@angular\/core';\n\n@Component({\n selector: 'app-counter',\n standalone: true,\n template: `\n <p>Count: {{ '{{' }} count() {{ '}}' }}<\/p>\n <button (click)=\"increment()\">+1<\/button>\n `,\n})\nexport class Counter {\n count = signal(0);\n\n increment() {\n this.count.update((n) => n + 1);\n }\n}\n<\/code><\/pre>\nRead signals in templates with ()<\/code>. Update with set()<\/code>, update()<\/code>, or mutate()<\/code> on writable signals. For derived values, use computed()<\/code> in later lessons.<\/p>\n5. Control Flow: @if and @for<\/h4>\n
Modern Angular replaces *ngIf<\/code> and *ngFor<\/code> with built-in control flow:<\/p>\n@if (isLoggedIn()) {\n <p>Welcome back!<\/p>\n} @else {\n <p>Please sign in.<\/p>\n}\n\n<ul>\n @for (item of items(); track item.id) {\n <li>{{ '{{' }} item.name {{ '}}' }}<\/li>\n }\n<\/ul>\n<\/code><\/pre>\nAlways use track<\/code> in @for<\/code> for performance \u2014 typically the item’s unique id.<\/p>\n6. Hands-On: GreetingCard with Signals<\/h4>\n
Combine inputs and signals in one component:<\/p>\n
import { Component, input, signal, computed } from '@angular\/core';\n\n@Component({\n selector: 'app-greeting-card',\n standalone: true,\n template: `\n <article class=\"card\">\n <h3>{{ '{{' }} greeting() {{ '}}' }}<\/h3>\n @if (showRole()) {\n <p>Role: {{ '{{' }} role() {{ '}}' }}<\/p>\n }\n <button (click)=\"toggleRole()\">Toggle role<\/button>\n <\/article>\n `,\n styles: [\n `.card { padding: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; }`,\n ],\n})\nexport class GreetingCard {\n name = input.required<string>();\n role = input('Developer');\n showRole = signal(true);\n\n greeting = computed(() => `Hello, ${this.name()}!`);\n\n toggleRole() {\n this.showRole.update((v) => !v);\n }\n}\n<\/code><\/pre>\nImport GreetingCard<\/code> in your root component and pass props from the parent template.<\/p>\n7. Next Steps and Advanced Tutorials<\/h4>\n
You can now build interactive UIs with standalone components, bindings, signals, and control flow. Coming soon in this series: routing, services, HTTP, and forms.<\/p>\n
For full-stack Angular (CRUD, Spring Boot, AI chat), continue on munonye.com Angular tutorials<\/a> after completing this beginner track.<\/p>\nFrequently Asked Questions<\/h4>\n
What is a standalone component in Angular?<\/strong>
\nA component that declares its own dependencies via the imports<\/code> array in @Component<\/code>, without an NgModule. Standalone is the default for new Angular 21 projects.<\/p>\nShould I use signals or RxJS for UI state?<\/strong>
\nUse signals for local component and template state in Angular 21+. Use RxJS for HTTP streams, WebSockets, and complex async pipelines \u2014 often via toSignal()<\/code> at the boundary.<\/p>\nCan I still use *ngIf and *ngFor?<\/strong>
\nYes in legacy code, but new code should use @if<\/code> and @for<\/code> \u2014 they are faster, easier to read, and align with current Angular documentation.<\/p>\n
\n