CODEWITHSUNDEEP
angular
Muthukumar Marichamy
Muthukumar Marichamy

Reputation: 1214

Add the inline css in Angular 7 from component.ts

My angular 7 application, I have the scrolling to see the products from left to right and right to left using this. Scrolling

Each image has the button when ever it is clicked, I have applied the new CSS in typescript (component.ts) as below.

this.appendToSimilar.nativeElement.appendChild(document.getElementById(item.imageId).cloneNode()).classList.add('similar-floating');

Here, I need to pass the inline css instead of class name.

Expectation

this.appendToSimilar.nativeElement.appendChild(document.getElementById(item.imageId).cloneNode()).classList.add('.cssClassName{width:50px, hight: 100px}');

I am sure that .add can be used to add the class name. Anyone help me to add the inline css for above scenario.

Upvotes: 0

Views: 2467

Answers (4)

Sumit Vekariya
Sumit Vekariya

Reputation: 488

You can add inline css from component.ts in this way:

this.appendToSimilar.nativeElement.appendChild(document.getElementById(item.imageId).cloneNode()).style.width = '50px';


this.appendToSimilar.nativeElement.appendChild(document.getElementById(item.imageId).cloneNode()).style.height = '100px';

Upvotes: 0

John
John

Reputation: 11409

Inject Renderer2, and ElementRef in your component, and add the class by using the renderer, and the nativeElement of elementRef (if you want to do something on the dom-element on your component)

constructor(renderer: Renderer2, elementRef: ElementRef) {
    // TODO, create, clone or add classes to the element, or some other element.
}

Upvotes: 0

Rajat Badjatya
Rajat Badjatya

Reputation: 818

Instead of querying the DOM, you can use Angular Style binding

Template

<h1 [style.color]="isHoussein() ? 'red': 'black'">{{firstname}}</h1>
Name: <input type="text" [(ngModel)]="firstname">
<button (click)="changeName()">Change Name</button>

Component.ts

export class MyApp {
  firstname: string = 'Jimmy';

  changeName() {
    this.firstname = 'Houssein';
  }

  isHoussein() {
    return this.firstname === 'Houssein';
  }
}

Upvotes: 0

Yasser Mas
Yasser Mas

Reputation: 1682

What about using ngStyle

customeStyle = 
{
  'color': 'red'
}

;

  <p [ngStyle]="customeStyle">asdasd</p>

Upvotes: 1

Related Questions