Component Authoring

ngAfterViewInit runs mid change detection, per component, and also on the server. afterNextRender runs once after Angular has rendered every component to the DOM, only in the browser; measure in earlyRead and draw in write.

NO_ERRORS_SCHEMA turns off Angular's unknown-element and unknown-property checks, so typos and forgotten imports compile and render nothing. CUSTOM_ELEMENTS_SCHEMA only allows dash-named unknown elements and their properties, for hosting real Web Components.

The collapse was a child-side write the one-way binding never reported, so the parent still holds true; setting true again changes nothing, so Angular writes nothing. Keep per-panel state in the parent and bind [( )].

An event binding on a component's element subscribes to its matching output and also adds a native DOM listener. The inner radio's native change bubbles to the host, so the handler runs with the number, then with the Event.

Projected content belongs to the consumer's view, so Angular creates it, runs its lifecycle and keeps it alive whether or not the card's @if shows the slot. For lazy content, have the consumer pass an <ng-template> and render it only when expanded.

contentChildren() and @ContentChildren match only direct children of the host by default, and a wrapping <div> makes the tabs grandchildren. Set descendants: true, which still stops at other components' templates, or keep tabs as direct children.

The picker's cells are created by its own template or code, so they lack the wrapper's _ngcontent attribute. Prefer the library's theming API; otherwise a class-scoped global rule, or :host ::ng-deep as a discouraged, host-bounded last resort.

Since Ivy, a component class carries its own compiled definition, so the factory lookup became redundant; ComponentFactoryResolver was deprecated in v13 and removed in v22. Pass the class straight to ViewContainerRef.createComponent or the standalone createComponent.

Call instance.rated.subscribe(callback), which returns an OutputRefSubscription. Angular drops the listener when the component is destroyed, so call unsubscribe() only when the listener's owner goes away first or subscribes repeatedly.

Write the default markup inside the <ng-content> element itself, supported since Angular 18. It renders only when no node was assigned to that slot when the content was created; a projected @if block counts as assigned even while false.

@ViewChildren and @ContentChildren fill a QueryList whose changes Observable emits when the matches change, not the initial set. viewChildren() and contentChildren() instead return a signal of a readonly array that notifies computed() and effect() dependants.

Every Angular Elements bundle carries the Angular runtime it needs, so separately built widgets duplicate the framework and each bootstraps its own application. Build them together, register all from one createApplication() injector, stay zoneless, and import only what the widgets use.

Connecting the element creates the component and runs ngOnInit synchronously during insertion, so a listener added afterwards misses 'ready'. Removal destroys the component after a short timer; reconnecting later builds a fresh instance and does not replay earlier inputs.

Angular removes a component's styles from the DOM once no instance using them remains, and v22 extended removal to styles whose host is dropped. Rules a None component carried for other DOM vanish with it; move them to a global stylesheet.