Post contents
We've looked at a lot of APIs in this series! Here's a cheatsheet for all the APIs we've covered to this point:
| React | Angular | Vue | Notes & Link |
|---|---|---|---|
function Comp() {} | @Component() class Comp {} | Comp.vue SFC file | Creates a component. |
createRoot(el).render(<Comp/>) | bootstrapApplication(Component) | createApp(Comp).mount('el') | Renders the component. |
| Component function body | Class instance properties and methods | <script setup> | Where your JavaScript code goes. |
useEffect with empty array | ngOnInit | onMounted | Side effect on component mount. |
<p>{val}</p> | <p>{{val}}</p> | <p>{{val}}</p> | Interpolate val into your template. This live-updates. |
useState | Class properties | ref | State in a component. |
<div attr={val}> | <div [attr.attr]="val"> | <div v-bind:attr="val"> or <div :attr="val"> | Attribute binding to an element. This live-updates. |
function Comp(props) {} | @Input() | defineProps(['prop']) | Component input definition. |
<div prop={val}> | <div [prop]="val"> | <div v-bind:prop="val"> or <div :prop="val"> | Component input passing |
<div onEvent={fn}> | <div (event)="fn()"> | <div v-on:event="fn()"> or <div @event="fn()"> | DOM event binding |
| Pass a function as component property. | @Output() | defineEmits(['output']) | Component output definition. |
{bool && <div>} | <div *ngIf="bool"> | <div v-if="bool"> | Conditional render an element. |
{bool ? <div/> : <div/>} | *ngIf="bool; else templ" where templ is an ng-template | <div v-else> | Conditionally render with an "else" clause. |
| Multiple conditionals with different values. | ngSwitch & *ngSwitchCase | <div v-else-if="other"> | Conditional render with multiple "else" clauses. |
{list.map(item => <div></div>)} | <div *ngFor="let item of list"> | <div v-for="item in list"> | Rendering a list. |
{list.map((item, idx) => <div></div>)} | <div *ngFor="let item of list; let i = index"> | <div v-for="(item, idx) in list"> | Get an index in a list render. |
<div key={item.id}> | *ngFor="let item of list; trackBy: itemTrackBy" | <div :key="item.id"> | Using a key to distinguish element in a list. |
<div key={item.id}> | N/A | <div :key="item.id"> | Using a key as a render hint. |
Return function from a useEffect with an empty dependency array. | ngOnDestroy | onUnmounted or watchEffect cleanup function or watch cleanup function | Side effect cleanup on component unmount. |
<StrictMode> | N/A | N/A | API to ensure side effect cleanup |
useEffect with no second argument | N/A | onUpdated | Listen for re-renders. |
useEffect with an array of values to track | Trigger side effect on mutation function | watch or watchEffect | In-component data change side effects. |
useLayoutEffect to run before paint | N/A due to lack of VDOM | watch with {immediate: true} and/or {flush: "post"} | Render/paint/commit phase tracking |
useRef | ngZone.runOutsideAngular | let variable mutation | Change data without a re-render |
useEffect with useRef of previous value | ngOnChanges | watch with old and new value arguments | Listen for component property changes |
useMemo | @Pipe() | computed | Property-based computed values |
<Fragment> or <></> | <ng-container> | <template> | Transparent elements |
children property with a JSX value | <ng-content> | <slot> | Children injection site |
| Named properties with a JSX value | <ng-content select="name"> | <slot name="name" /> | Named children injection site |
const refName = useRef() & <div ref={refName}> | @ViewChild() | const refName = ref() & <div ref="refName"> | Element reference that doesn't trigger reactive change |
<div ref={fn}> | @ViewChild() with ngAfterViewInit | <div :ref="fn"> | Element reference that triggers reactive change |
useRef([]) & <div ref={el => ref.current[i] = el}> | @ViewChildren() | ref([]) & ref="refName" | Array of element references |
forwardRef | N/A | N/A | Allow access to a custom component |
useImperativeHandle | All methods and properties from the referenced component are exposed by default | defineExpose | Allow access to component's internals |
componentDidCatch | ErrorHandler | onErrorCaptured | Log an error |
getDerivedStateFromError | ErrorHandler + parent state | onErrorCaptured + ref | Display an error |
createContext | InjectionToken or Injectable | N/A | Dependency injection context creation |
Context.Provider | providers array on class | provide | Dependency injection data provider |
useContext | inject | inject | Dependency injection data injection |
| Enabled by default | inject(SomeVal, {optional: true}) | Enabled by default | Optional injected values |
Context.Provider in root component | @Injectable({ providedIn: "root" }) | provide in root component | App-wide providers |
createPortal(<div/>, el) | DomPortal or TemplatePortal & cdkPortalOutlet | <Teleport to="body"> | Portal contents to other DOM location |
| Custom Hooks | Services | Compositions | Logic sharing between components |
| N/A | @Directive() | Object with special properties | Directives |
children property and single value passed | @ContentChild() | N/A | Access a reference to a single projected child |
Children.toArray(children) | @ContentChildren() | N/A | Access a reference to projected children |
Children.count(children) | @ContentChildren() & length property | N/A | Count projected children |
children(val) | ng-template & Template Context | <template> & v-slot | Pass values to projected children |