Render user bios with markdown
Angular · Angular · intermediate · greenfield
Adds the UserBio component: parses the bio markdown and binds the resulting HTML. Uses Angular's DomSanitizer so the [innerHTML] binding accepts the rendered markup without warnings.
Requirements
- Render the user's bio with markdown formatting (bold, links, lists).
- Bios are user-provided and shown on public profile pages.
- User content must never be able to execute script.
Files touched
- src/app/components/user-bio.ts
--- src/app/components/user-bio.ts
+import { Component, Input, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { marked } from 'marked';
+
+@Component({
+ selector: 'app-user-bio',
+ template: `<div class="bio" [innerHTML]="bioHtml"></div>`,
+})
+export class UserBio {
+ private sanitizer = inject(DomSanitizer);
+ bioHtml: SafeHtml = '';
+
+ @Input() set bio(value: string) {
+ this.bioHtml = this.sanitizer.bypassSecurityTrustHtml(marked.parse(value) as string);
+ }
+}