When people start with Angular, they often ask:<\/p>\n\n\n\n
{{ }}<\/code> sometimes, and [innerHTML]<\/code> other times?<\/li>- Why
signal<\/code> in one place, and Observable<\/code> in another?<\/li>- Why
computed<\/code> and effect<\/code> both exist?<\/li><\/ul>\n\n\n\nThis guide explains it in plain language<\/strong>, with practical examples and the \u201cwhy\u201d behind each choice.<\/p>\n\n\n\n1) {{ }}<\/code> vs [innerHTML]<\/code><\/h4>\n\n\n\nThink of this as:<\/p>\n\n\n\n
{{ }}<\/code> = show text safely<\/strong><\/li>[innerHTML]<\/code> = render real HTML markup<\/strong><\/li><\/ul>\n\n\n\n{{ }}<\/code> (Interpolation): safe text output<\/span><\/h4>\n\n\n\nUse when your content is plain text (name, title, number, translation string without HTML rendering needs).<\/p>\n\n\n\n
<!-- Good for plain text -->\n<p>{{ user.name }}<\/p>\n<p>{{ 'my.translation.key' | translate }}<\/p>\n<\/code><\/pre>\n\n\n\nWhy?<\/h5>\n\n\n\n
Angular escapes HTML automatically for security.<\/p>\n\n\n\n
If the value contains <strong>S5<\/strong><\/code>, Angular shows it as text, not bold formatting.
That is intentional protection against XSS (malicious script injection).<\/p>\n\n\n\n<\/p>\n\n\n\n
[innerHTML]<\/code>: render HTML tags<\/span><\/h4>\n\n\n\nUse only when your data actually contains HTML tags you want to display as formatted content.<\/p>\n\n\n\n
<!-- Good for HTML content -->\n<p [innerHTML]=\"'my.translation.key' | translate\"><\/p>\n<p [innerHTML]=\"descriptionWithHtml\"><\/p>\n<\/code><\/pre>\n\n\n\nWhy?<\/h5>\n\n\n\n
Because here you are telling Angular: \u201cinterpret this string as HTML\u201d.<\/p>\n\n\n\n
So <strong>S5<\/strong><\/code> becomes bold S5<\/strong> in the UI.<\/p>\n\n\n\nSecurity warning (important)<\/span><\/h5>\n\n\n\nNever inject uncontrolled user content directly into [innerHTML]<\/code>.<\/em><\/p>\n\n\n\n<!-- Dangerous if userInput is untrusted -->\n<div [innerHTML]=\"userInput\"><\/div>\n<\/code><\/pre>\n\n\n\nAngular sanitizes by default, but you should still be careful with source trust and review your data path.<\/em><\/p>\n\n\n\nRare advanced case: <\/code><\/p>\n\n\n\nimport { DomSanitizer } from '@angular\/platform-browser';\nconst safe = this.sanitizer.bypassSecurityTrustHtml(myHtml);\n<\/code><\/pre>\n\n\n\nUse this bypass only if you fully trust and control the HTML source.<\/span><\/em><\/strong><\/p>\n\n\n\n
\n\n\n\n2) signal<\/code> vs Observable<\/code><\/h4>\n\n\n\nThink of this as:<\/p>\n\n\n\n
signal<\/code> = local component state (simple, synchronous)<\/strong><\/li>Observable<\/code> = external or asynchronous stream (HTTP, websocket, events over time)<\/strong><\/li><\/ul>\n\n\n\nsignal<\/code>: local reactive state<\/span><\/h4>\n\n\n\nreadonly count = signal(0);\nreadonly nodes = signal<RenderNode[]>([]);\n\nthis.count.set(5);\nthis.count.update(v => v + 1);\n\nconsole.log(this.count());\n\n<\/code><\/pre>\n\n\n\nWhy?<\/h5>\n\n\n\n- Very easy to read\/write<\/li>
- No manual subscribe\/unsubscribe<\/li>
- Great for UI state like selected item, counters, local lists<\/li><\/ul>\n\n\n\n
Observable<\/code>: async flow over time<\/span><\/h4>\n\n\n\nthis.http.get('\/api\/data').subscribe(data => { ... });\n\nfromEvent(document, 'click').pipe(\n debounceTime(300)\n).subscribe(ev => { ... });\n<\/code><\/pre>\n\n\n\nWhy?<\/h5>\n\n\n\n
Some data arrives later or repeatedly (server responses, live events, timers).
That is exactly what Observables are built for.<\/p>\n\n\n\n
PS:<\/strong> Must manage subscription lifecycle to avoid memory leaks.<\/strong><\/span><\/em><\/p>\n\n\n\nprivate readonly destroyRef = inject(DestroyRef);\n\nthis.myService.data$.pipe(\n takeUntilDestroyed(this.destroyRef)\n).subscribe(data => {\n this.nodes.set(data);\n});\n<\/code><\/pre>\n\n\n\nBridge between both<\/span><\/h4>\n\n\n\nreadonly data = toSignal(this.myService.data$, { initialValue: [] }); \/\/ Observable -> Signal\nreadonly data$ = toObservable(this.mySignal); \/\/ Signal -> Observable\n<\/code><\/pre>\n\n\n\nUse this when you need async data in template-friendly signal form.<\/strong><\/span><\/em><\/p>\n\n\n\n
\n\n\n\n3) computed<\/code> vs effect<\/code><\/h4>\n\n\n\nThink of this as:<\/p>\n\n\n\n
computed<\/code> = calculate a value<\/strong><\/li>effect<\/code> = do something when value changes<\/strong><\/li><\/ul>\n\n\n\ncomputed<\/code>: pure derived value<\/span><\/h4>\n\n\n\nreadonly nodes = signal<RenderNode[]>([]);\n\nreadonly switchNodes = computed(() =>\n this.nodes().filter(n => n.kind === 'switch')\n);\n\nreadonly trackCount = computed(() =>\n this.nodes().filter(n => n.kind === 'track').length\n);\n<\/code><\/pre>\n\n\n\nWhy?<\/h5>\n\n\n\n- Automatic recalculation only when dependencies change<\/li>
- Cached\/memoized<\/li>
- No side effects<\/li>
- Ideal for values displayed in UI<\/li><\/ul>\n\n\n\n
effect<\/code>: side effects<\/span><\/h4>\n\n\n\nconstructor() {\n effect(() => {\n const model = this.model();\n this.nodes.set(model?.nodes ?? []);\n console.log('Model changed:', model);\n });\n}\n<\/code><\/pre>\n\n\n\nWhy?<\/h5>\n\n\n\n
Use it for actions, not values:<\/p>\n\n\n\n
- logging<\/li>
- syncing state<\/li>
- calling services<\/li>
- DOM interactions<\/li><\/ul>\n\n\n\n
Common mistake<\/span><\/h4>\n\n\n\nUsing effect<\/code> to compute state that should be computed<\/code>:<\/p>\n\n\n\n\/\/ Bad pattern\neffect(() => {\n this.switchNodes.set(this.nodes().filter(n => n.kind === 'switch'));\n});\n\n\/\/ Better\nreadonly switchNodes = computed(() =>\n this.nodes().filter(n => n.kind === 'switch')\n);\n<\/code><\/pre>\n\n\n\n
\n\n\n\nFinal decision map (simple)<\/h4>\n\n\n\n- Local UI state =>\u00a0
signal<\/code><\/li>- Value derived from signal =>\u00a0
computed<\/code><\/li>- React and perform action =>\u00a0
effect<\/code><\/li>- HTTP \/ websocket \/ async streams =>\u00a0
Observable<\/code>\u00a0(optionally\u00a0toSignal<\/code>\u00a0for template)<\/li>- Plain text in template =>\u00a0
{{ }}<\/code><\/li>- HTML content in template =>\u00a0
[innerHTML]<\/code>\u00a0(carefully)<\/li><\/ul>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
When people start with Angular, they often ask: Why {{ }} sometimes, and [innerHTML] other times? Why signal in one place, and Observable in another? Why computed and effect both exist? This guide explains it in plain language, with practical examples and the \u201cwhy\u201d behind each choice. 1) {{ }} vs [innerHTML] Think of this as: {{ }} = show text safely [innerHTML] = render real HTML markup {{ }} (Interpolation): safe text output Use […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[920,1138,736,1075,992,382,927,803,1136,735,1137],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4288"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=4288"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4288\/revisions"}],"predecessor-version":[{"id":4290,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4288\/revisions\/4290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=4288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=4288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=4288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}