Angular
102 flashcards by MentisLibrary
Modern Angular: standalone components and bootstrapping, template syntax and the built-in control flow blocks, signals, dependency injection, change detection, RxJS, HttpClient, the router and reactive forms.
- What is Angular?
- A TypeScript framework for building applications from components, with a template compiler, a dependency injection system, a router, an HTTP client and a forms library in the box.
- What is a component?
- A class with a @Component decorator that pairs a template with the state and behaviour behind it, and is used in other templates through its selector.
- What is a standalone component?
- A component that declares its own template dependencies in an imports array instead of being declared in an NgModule.
- How does a standalone application start?
- With bootstrapApplication, passing the root component and the application-wide providers.
- What does the Angular CLI generate for you?
- Projects, components, services, directives, pipes and guards, wired into the project with the right files, tests and imports.
- What is interpolation in a template?
- Double curly braces that evaluate a template expression and insert the result as escaped text.
- What is property binding?
- Square brackets bind a DOM property or a component input to an expression.
- Property binding vs attribute binding
- Property binding sets a DOM property. Attribute binding, written [attr.name], sets an HTML attribute, and is needed when no matching property exists.
- What is event binding?
- Parentheses bind a DOM event or a component output to a statement. The event object is available as $event.
- What is two-way binding?
- The combined syntax [(x)], which expands to an input binding [x] plus an event binding (xChange).
- What is the modern template control flow syntax?
- Blocks built into the template language: @if with @else, @for with @empty, @switch with @case and @default.
- How does @for work, and why is track required?
- @for repeats a block per item, and track tells Angular which rendered node belongs to which item so it can move nodes rather than rebuild them.
- What is a structural directive?
- A directive that changes the DOM structure by adding or removing an embedded view. *ngIf and *ngFor are the classic examples, and the asterisk is shorthand for wrapping the element in an ng-template.
- What is <ng-container> for?
- A grouping element that accepts directives and bindings but renders no DOM node of its own.
- What is <ng-template>?
- A template fragment that is not rendered until something instantiates it, which is what structural directives and @defer placeholders use.
- How do you bind classes and styles?
- [class.name] toggles one class, [style.prop] sets one style, and [class] or [style] accept an object or a string. NgClass and NgStyle do the same for dynamic key sets.
- What is a pipe?
- A template function that transforms a displayed value, applied with the vertical bar and optionally given arguments.
- Pure vs impure pipes
- A pure pipe recomputes only when its input reference changes. An impure pipe runs on every change detection cycle.
- What does the async pipe do?
- Subscribes to an Observable or Promise, renders the latest value, marks the component for check on each emission, and unsubscribes when the view is destroyed.
- What is a signal?
- A reactive value holder. Reading it inside a reactive context records a dependency, and setting it notifies everything that read it.
- What does computed() do?
- Creates a read-only signal derived from other signals. It is lazy and memoised: it recomputes only when a dependency has changed and something reads it.
- What is effect() for?
- Running a side effect whenever the signals it reads change: logging, syncing to storage, calling an imperative API.
- How do you declare a signal input?
- With the input() function, which returns a read-only signal fed by the parent's binding. input.required<T>() makes it mandatory.
- How do you declare an output?
- With the output() function, which returns an emitter the parent binds to as an event.
- What does model() create?
- A writable signal that is also a two-way binding, pairing an input with a matching change output automatically.
- What are signal-based view queries?
- viewChild() and viewChildren() return signals holding the matched element or component from the component's own template.
- @Input() and @Output() vs input() and output()
- The decorators are the original API: @Input() sets a plain property and @Output() exposes an EventEmitter. The functions are the signal-based replacement, giving a signal for inputs and a lighter emitter for outputs.
- How do you project content into a component?
- With <ng-content>, which renders whatever the caller placed between the component's tags. A select attribute picks a subset by selector.
- What is a content query?
- contentChild() and contentChildren() find components or directives among the content projected into this component, rather than in its own template.
- What does host do on a component?
- Declares bindings and listeners on the component's own host element, so the component can style and respond to itself.