Learn how to use sanitizer.bypassSecurityTrustStyle to apply styling to Pseudo Elements before and after in a template

Currently, I am attempting to add style to a pseudo element :after

<a class="overflow">{{item?.eco}}</a>

My goal is to modify the background color of a:after, and I believe this adjustment needs to be made in HTML.

I've been thinking about something like applying [style.background]="red" directly to a:after in the HTML itself instead of using CSS.

CSS

.featured-image:after { content: '';
                             background-color: var(--custom); }

HTML

<a class="featured-image"[style]="sanitizer.bypassSecurityTrustStyle('--custom:' + red)"></a>

TS

this.color = sanitizer.bypassSecurityTrustStyle('--custom')

Despite my attempts at implementing this approach, I have not seen any success so far.

If you have any insights or suggestions on how to achieve this, I would greatly appreciate your help...

typescriptangular5angular-dom-sanitizer

Answer №1

a.overflow:after {
  content: '';
  display:block;
  width:50px;
  height:50px;
  background-color:blue;
}
<a class="overflow">{{item?.data}}</a>

Give this a try and you're good to go...

Answer №2

Check out the code snippet below.

.overflow {
  position: relative;
}

.overflow::after {
  content: "";
  background-color: red;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
<a class="overflow">{{item?.eco}}</a>
<br>
<a class="overflow">Lorem ipsum dolor sit amet</a>

Answer №3

a {
    position: relative;
}

a:after {
    content: '';
    width: 100px;
    height: 100px;
    background-color: #ddd;
    position: absolute; 
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Looking to streamline my headers in my Ionic 4 project by creating a separate reusable component for them. Here's how I set up my dashboard page with the header component: <ion-header> <app-header title="Dashboard"></app-he ...

javascriptangulartypescriptionic-framework

Angular is throwing a RangeError due to exceeding the maximum call stack size

Encountering a stackOverflow error in my Angular app. (see updates at the end) The main issue lies within my component structure, which consists of two components: the equipment component with equipment information and the socket component displaying conn ...

javascriptangulartypescript

Having trouble locating the TypeScript compiler in Visual Studio 2017?

In an attempt to develop an application in Visual Studio using TypeScript, I meticulously followed the instructions outlined here and proceeded to install the necessary TypeScript compiler for version 2.2 of the project via NPM. npm install typescript ...

visual-studiotypescript

Issue with ngx-extended-pdf-viewer when using URL

I'm struggling to display my PDF file on a viewer using a URL in TypeScript. I am utilizing ngx-extended-pdf-viewer. Below is a snippet of my code with the URL replaced: <ngx-extended-pdf-viewer *ngIf="!isFirefox" [src]="'http://www.chi ...

angulartypescriptpdf.jsngx-extended-pdf-viewer

Can classes be encapsulated within a NgModule in Angular 2/4?

Looking to organize my classes by creating a module where I can easily import them like a separate package. Take a look at this example: human.ts (my class file) export class Human { private numOfLegs: Number; constructor() { this.numOfLegs = 2 ...

angulartypescriptng-modules

Embedding a TypeScript React component within another one

Currently, I'm facing an issue with nesting a TypeScript React component within another one, as it's causing type errors. The problem seems to be that all props need to be added to the parent interface? Is there a way to handle this situation wi ...

reactjstypescript

Changing the type of an object's property in TypeScript on the fly

I am working on a TypeScript function that is designed to dynamically modify the property of an object. Here is the function: const updateProperty = (value: any, key: keyof Type1, obj: Type1) => { obj[key] = value; } Below is the definition of "Typ ...

typescript

Exporting Axios.create in Typescript can be accomplished by following a few simple

My code was initially working fine: export default axios.create({ baseURL: 'sample', headers: { 'Content-Type': 'application/json', }, transformRequest: [ (data) => { return JSON.stringify(data); } ...

javascriptreactjstypescriptaxios

Limit the elements in an array within a specified range of dates

Currently, I am working on implementing a filter functionality for a data array used in a LineChart within my Angular application using TypeScript. The structure of the data array is as follows: var multi = [ { "name": "test1", "series": [ ...

javascriptangulartypescript

Having trouble iterating over an array in Angular's TypeScript

I've been attempting to loop through an array of objects in TypeScript, but encountered the following error: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forEach' of undefined TypeError: Cannot read property 'fo ...

angulartypescript

Discovering how to display the hidden messages section in the absence of any ongoing chats with the help of angular2

I currently have 2 tabs set up on my page. The active messages tab is functioning perfectly without any issues. However, I am encountering an error with the closed messages tab. If there are no messages in this tab, the system displays an error message w ...

angulartypescript

The recursive component is functional exclusively outside of its own scope

I'm facing an issue where my recursive component is not nesting itself properly. The problem arises when I try to use the Recursive component inside another Recursive component. Although the root is correctly inserted into the Recursive component fro ...

typescriptvue.js

After updating the TypeScriptOutDir configuration, breakpoints are not being reached

Currently, I am utilizing Visual Studio Professional 2013 Update 3 and have developed a Node console Application with the simple "hello world" log instruction. Setting a breakpoint in this instruction and running the debugger functions smoothly, hitting th ...

node.jsdebuggingvisual-studio-2013typescriptbreakpoints

The form doesn't seem to be functioning properly when I incorporate the formgroup and service within the ngOnInit() method

I implemented the formgroup code in ngOnInit() and also utilized a service in ngOnInit(). However, the asynchronous nature of the form is causing issues. The full code on StackBlitz works when I use dummy JSON data within the constructor. Check out the wor ...

angulartypescript

Bird's home - The nest is unable to sort out its dependencies

My implementation of a CryptoModule is quite straightforward: import { Module } from '@nestjs/common'; import { CryptoService } from './crypto.service'; @Module({ providers: [CryptoService], exports: [CryptoService], }) export cla ...

typescriptnestjsnestnestjs-config

The error message "Property '...' is not found on the type 'ServerContextJSONValue'" pops up whenever I try to utilize the useContext() function

After creating a Provider and defining the type, I encountered a TypeScript error when using it with useContext(): "Property '...' does not exist on type 'ServerContextJSONValue'. I'm not sure what I am missing. Can anyone help me ...

reactjstypescript

What is the correct way to specify the type in my functional component?

I was trying to define the type in my component in a different way, I know it can be done using classes but is there a way to achieve this with functional components without exporting the interface? Despite my extensive research, I couldn't find any r ...

javascripttypescriptreact-nativeecmascript-6

What is the proper way to tap into the features provided by DefinitelyTyped in typescript?

While working on my Angular2 app that deals with money amounts, I decided to use dinero.js to handle money values. However, I am encountering difficulties in accessing certain features in Typescript. Following the instructions, I installed the DefinitelyT ...

angulartypescriptdefinitelytyped

Ways to employ data binding for extracting a user-input value and performing multiplication operations with the enclosed {{ ...}} tags

My API response includes the price of a product, which is represented as {{price}} I have a system where I can add or reduce the number of products: <div class="number-input"> <h2>Price: {{price }}</h2> <button oncli ...

javascriptangulartypescriptdata-binding

Nest is unable to resolve the dependencies of the ItemsService. Ensure that the required argument at index [0] is present within the AppModule context

After following the Nest JS Crash tutorial from a Youtube Link, I encountered an error when importing an interface in the service. Nest seems unable to resolve dependencies of the ItemsService. It's important to ensure that the argument at index [0 ...

typescriptnestjs