diff --git a/docs/en/UI/Angular/Page-Alerts.md b/docs/en/UI/Angular/Page-Alerts.md index a27cee4abf..96371908f9 100644 --- a/docs/en/UI/Angular/Page-Alerts.md +++ b/docs/en/UI/Angular/Page-Alerts.md @@ -61,4 +61,21 @@ this.service.show({ ![angular-page-alert-with-params-example](./images/page-alert-with-params-example.png) +## Render HTML content +We can pass html content to the `title` and `message` parameters + + +* It allows static message or localization key +* [abpSafeHtml](https://github.com/abpframework/abp/blob/37b59a7f05202264505d002397dbb27d275740e1/npm/ng-packs/packages/core/src/lib/pipes/safe-html.pipe.ts#L6) pipe will sanitize html values + +```typescript +this.service.show({ + type: 'success', + title: `New blog published`, + message: 'AbpApp::HtmlMessageWithParams{0}', + messageLocalizationParams: ['admin'], +}); +``` + +![angular-page-alert-with-html-example](./images/page-alert-with-html-example.png) diff --git a/docs/en/UI/Angular/images/page-alert-with-html-example.png b/docs/en/UI/Angular/images/page-alert-with-html-example.png new file mode 100644 index 0000000000..a07133faf2 Binary files /dev/null and b/docs/en/UI/Angular/images/page-alert-with-html-example.png differ diff --git a/npm/ng-packs/packages/core/src/lib/tests/safe-html.pipe.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/safe-html.pipe.spec.ts new file mode 100644 index 0000000000..840cf614db --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/safe-html.pipe.spec.ts @@ -0,0 +1,34 @@ +import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; +import { SafeHtmlPipe } from '../pipes'; + +describe('SafeHtmlPipe', () => { + let pipe: SafeHtmlPipe; + let spectator: SpectatorService; + const createService = createServiceFactory(SafeHtmlPipe); + + beforeEach(() => { + spectator = createService(); + pipe = spectator.service; + }); + + it('should create an instance', () => { + expect(pipe).toBeTruthy(); + }); + + test.each([42, false, {}, []])('should return empty string for "%p" input', input => { + const result = pipe.transform(input as any); + expect(result).toBe(''); + }); + + it('should be equals with input after sanitized', () => { + const input = '

Hello world!

'; + const result = pipe.transform(input); + expect(result).toEqual(input); + }); + + it('should sanitize unsafe HTML content', () => { + const input = `

Click here!

`; + const result = pipe.transform(input); + expect(result).toBe(`

Click here!

`); + }); +});