CODEWITHSUNDEEP
cssangularsassangular2-template
Ramya S
Ramya S

Reputation: 3094

How to pass value from ts file to scss file in same component in angular 2+?

This is my component

export class myComponent implements onInit {

private outageCount;

ngOnInit(){

    ....subscribe((data) => {
    this.outageCount = Object.keys(data).length;

})
}

I need to pass the outageCount to my css before CONTENT

:host ::ng-deep app-settings-panel {
    &:before{
        //content:"4";
        content:attr(outageCount);
        background: #941313;
        position: absolute;
        top: 3px;
        left: 22px;
        border-radius: 50%;
        height: 13px;
        width: 13px;
        border: 1px solid #ffffff;
        color: white;
        font-size: 8px;
        text-align: center;
        line-height: 13px;
    }

How can i pass the outageCount value from my component to css :before content.

Any suggestions would be appreciated!

Upvotes: 13

Views: 18100

Answers (2)

Ramya S
Ramya S

Reputation: 3094

I'm passing this as attribute in my html like below

 [attr.outage-count]="outageCount"

I css, i updated like this

   :host ::ng-deep app-settings-panel {
        &:before{
            content: attr(outage-count);
            ......
        }
    }

This works for me!! Thanks for all those who tried helping me!

Upvotes: 7

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2567

try using :

document.documentElement.style.setProperty('--contentvalue', this.outageCount);

css

:root {
    --contentvalue: 4;
}

:host ::ng-deep app-settings-panel {
    &:before{
        //content:"4";
        content:attr(--contentvalue);
        background: #941313;
        position: absolute;
        top: 3px;
        left: 22px;
        border-radius: 50%;
        height: 13px;
        width: 13px;
        border: 1px solid #ffffff;
        color: white;
        font-size: 8px;
        text-align: center;
        line-height: 13px;
    }

Upvotes: 4

Related Questions