Component Authoring

The constructor runs when Angular creates the instance, before any parent bindings are applied, so it should only inject dependencies and register setup. ngOnInit runs once after the first input values are set, so input-dependent initialisation belongs there.

The imports array lists the components, directives, pipes and NgModules a standalone component's template may use. A missing element-selector child fails the build with NG8001; a missing attribute-selector child is silently never created.

model() declares a writable signal input: the parent can bind a value in, the child can set() or update() it, and Angular adds a <name>Change output so a [( )] binding to a signal or plain property stays in sync.

The child declares rated = output<number>() or @Output() rated = new EventEmitter<number>() and calls rated.emit(value). The parent binds (rated)="save($event)", where $event is exactly the emitted value, not a DOM event.

Each <ng-content select="..."> is a compile-time placeholder that receives the host's direct children matching its selector; an <ng-content> without select takes everything unmatched, and without one, unmatched content is not rendered at all.

A view query (viewChild, viewChildren) searches the component's own template; a content query (contentChild, contentChildren) searches the nodes a parent placed between the component's tags. Neither looks inside another component's template.

ViewEncapsulation offers Emulated (the default: compiler-added attributes scope the styles), ShadowDom (a real shadow root), ExperimentalIsolatedShadowDom (a shadow root that also keeps shared styles out) and None (the styles act globally).

Inject or query a ViewContainerRef and call createComponent(ComponentClass, options). Angular inserts the new host view into that container, after its anchor element, and returns a ComponentRef for setting inputs and destroying it; the view is checked and destroyed with its container.

Use computed() over signal inputs to derive state declaratively; it stays current as any input changes. Use ngOnChanges when you need the previous value, the first-change flag, or still have @Input fields, since SimpleChanges carries previousValue, currentValue and firstChange.

First render: constructor, ngOnChanges (if inputs are bound), ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked; ngOnDestroy runs once at removal. Later checks repeat ngOnChanges on input change, ngDoCheck and both Checked hooks.

Use model() when the child edits one value the parent mirrors through [( )]; use input() plus output() when the parent must approve changes, the event carries something other than the value, or the input needs a transform.

Decorator queries are dynamic by default and resolve just before ngAfterContentInit or ngAfterViewInit; static: true resolves them before ngOnInit but never updates them. Signal queries have no static option and update themselves, so read them reactively.

At compile time Angular appends a component-specific attribute selector to every rule; at runtime it stamps _ngcontent on elements the template creates and _nghost on the host. Styles cannot leak out, but global styles still apply inside.

Use NgComponentOutlet: <ng-container *ngComponentOutlet="widgetType; inputs: widgetInputs" />. Angular creates the given component class in place, applies the inputs object with setInput on every check, and recreates the instance when the class changes.

Call createCustomElement(Component, { injector }) from @angular/elements to get a custom-element class, then register it with the browser's customElements.define('tag-name', Class). The injector usually comes from createApplication(), and the tag must differ from the component's selector.

template holds an inline template and templateUrl points to an HTML file; styles holds inline CSS while styleUrl or styleUrls point to stylesheet files. The compiler requires one template, rejects styleUrl with styleUrls, and inlines files at build time.

Assigning ref.instance fields skips ngOnChanges and OnPush dirty marking and cannot set signal inputs. setInput sets an input by public name and marks the view dirty; inputBinding, outputBinding and twoWayBinding declare reactive template-like bindings at creation.

Each input becomes a dash-case attribute (from its alias or name) and an element property; attribute strings pass through the input's transform. Each output is dispatched on the element as a CustomEvent named after it, with the value in event.detail.

ComponentRef.setInput sets an input the way a template binding does: it works for signal inputs, runs transforms, triggers ngOnChanges and marks OnPush views for check. Assigning componentInstance fields does none of that and cannot set a read-only InputSignal.

They coerce bound values before the input stores them: booleanAttribute makes a present attribute true unless it is 'false', and numberAttribute parses strings, falling back to NaN. Static attributes pass strings, so size and disabled need them.

ngOnDestroy is one class method. DestroyRef is an injectable handle whose onDestroy() registers any number of callbacks next to their setup, even inside helper functions, and returns an unregister function; in a component it fires on that component's destruction, elsewhere on its injector's.

An Angular component selector may be an element name, an attribute with an optional exact value, a class, a combination, a comma list or :not(), never a combinator. An attribute selector like button[app-primary] keeps the native button's behaviour.

The Change output emits only when the child writes the model with set() or update() and the new value differs by the signal's equality check; a value the parent pushes in through the binding updates the signal without emitting.

EventEmitter is an RxJS Subject with pipe, error and complete, optionally asynchronous. OutputEmitterRef only offers emit and subscribe, is always synchronous, drops its listeners when the component is destroyed, and needs no RxJS. Parent bindings are identical.

Slots match the host's direct children, so a wrapper that does not match the selector goes to the catch-all. Put ngProjectAs="[card-footer]" on the wrapper so it is matched as if it had that selector; the value must be static.

The locator decides which node matches; read decides what value is returned from that node's injector. Without read, a string locator gives the component or exportAs directive it names, else an ElementRef or, on ng-template, a TemplateRef.

:host targets the component's host element, with :host(.x) adding a condition on it; :host-context(.x) applies when the host or any ancestor matches. In Emulated mode the compiler rewrites both into selectors on the _nghost attribute.

Map each JSON type to a component class through an explicit registry with lazy imports, create widgets in a ViewContainerRef with inputBinding/outputBinding, clear the container on relayout, guard against stale async loads, and validate input names with reflectComponentType.

Field initializers run in the constructor, before Angular sets any input, so reading an unset required input throws NG0950. Derive the value with computed(), read it in the template, or move one-time setup to ngOnInit.