This is not how you do it in Angular! This is how you would do it:

In your CarItemComponent add a vairable for the font-size for example:

fontSize: number;

In your addStyle() set this number to the font size you want to use and in your template add this to the element which's font-size you want to change:

[style.font-size.px]="{{ fontSize }}"

You can employ ngStyle property for this, something like:

 
<mat-toolbar [ngStyle]="{'position': div1 ? 'fixed' : 'static' }" *ngIf="div1"  >
    <mat-toolbar-row>
      <div class="input-group has-search">
        <input class="form-control py-2 rounded-pill mr-1 pr-5"  placeholder="Search">
      </div>
    </mat-toolbar-row>
    </mat-toolbar>

  <button (click)="home()></button>
<mat-toolbar>

I have a way to do this using a styles service based on https://en.programqa.com/question/52907585/

Within Global.SCSS

@mixin ExportVariables($map, $prefix: null) {
  $mapPrefix: "--#{$prefix}";

  @if ($prefix){
    $mapPrefix: "#{$mapPrefix}-";
  }

  body {
    @each $name, $value in $map {
      #{$mapPrefix}#{$name}: $value;
    }
  }
}

--idle-state: #29ABE2;

// Import each of these in the theme service
$stateSCSS:(
  idle: var(--idle-state),
);
@include ExportVariables($stateSCSS, 'stateSCSS');

In the Service

const bodyStyles = window.getComputedStyle(document.body);

this.stateSCSS = {
  idle: bodyStyles.getPropertyValue('--stateSCSS-idle'),
};

This is one way you can add dynamic classes

<p [class.boldClass]="isbold"
   [class.italicsClass]="isItalic">testing content </p>

try to convert your selection as HTMLElement

const element = <HTMLElement> document.getElementsByClassName('cal-meeting')[0];

then use :

element.style.display = 'none';

also you can use *ngif for remove it but if you want to use javascript's function to change style you should convert it to HTMLElement but you can use angular [ngStyle]="{'property': expression}" for changing style like :

<li class="cal-meeting" [ngStyle]="{'display': !this.display_meeting ? 'none': 'block'}">meeting title</li>

or you can add class for example if you have class like :

.d-none: {display: none}
.d-block: {display: block}

you can use it in typescript like:

export class MyComponent implements OnInit {
hidingClass: string = '';
toggleCal(toggle_items) {
if (toggle_items === 'meeting') {
       this.display_meeting = !this.display_meeting;
       if ( this.display_meeting ) {
          this.hidingClass = 'd-block'
       } else {
          this.hidingClass = 'd-none'
       }
   }
// do the same thing if toggle_items === 'event'
}

just use it in your html element:

<li class="cal-meeting" [ngClass]="hidingClass">meeting title</li>

You can directly add class to the element, created in the TypeScript file.

TypeScript Code

test.textContent = "Created in TS";
test.setAttribute("class","MyClass");
container.append(test);

CSS

.MyClass {
    color: green !important;
 }

I think it's not possible to access the ts file variables from the CSS file, but you can get elements from DOM and set style to that from the ts file.

an example:

document.getElementById('element').style.backgroundImage = background_url;

also if you are using frameworks like angular, you can use @ViewChild to get elements from DOM and style them by using the renderer2 library like this:

export class NavbarComponent { 
   @ViewChild('element') element: ElementRef;
   background_url='../../../assets/img/background.png';
   
   constructor(private renderer: Renderer2) {}

   setStyle() {
       this.renderer.setStyle(
           this.element.nativeElement,
           'background-image',
           this.background_url
       );
   }
}

and then call the setStyle function where ever you want.
more from renderer2: https://angular.io/api/core/Renderer2

Since these values are defined at root level, you can just update them using document. I am not exactly sure on how you can access the document in angular, but once you have document, you can do something like this:

document.documentElement.style.setProperty(`--${your-variable}`, value + suffix); //suffix may be px or ''

This way, you will directly set the css variable which will take effect at all the places and you will not have to target individual elements.

This should work.

this.elementRef.nativeElement.ownerDocument.body.style.setProperty("overflow-y", "hidden", "important");