Add the inline css in Angular 7 from component.ts

Question

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.

Yasser Mas · Accepted Answer · 2019-08-22 13:13:06Z

1

What about using ngStyle

customeStyle = 
{
  'color': 'red'
}

;

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

answered Aug 22, 2019 at 13:13

Yasser Mas

1,6821 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajat Badjatya · Accepted Answer · 2019-08-22 13:14:53Z

0

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';
  }
}

answered Aug 22, 2019 at 13:14

Rajat Badjatya

8487 silver badges17 bronze badges

2 Comments

Muthukumar Marichamy Over a year ago

I need to pass the inline css from component instead of the passing class this.appendToSimilar.nativeElement.appendChild(document.getElementById(item.imageId).cloneNode()).classList.add('similar-floating');

Rajat Badjatya Over a year ago

ngStyle is an attribute directive that updates styles inline only.

John · Accepted Answer · 2019-08-22 13:29:36Z

0

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.
}

answered Aug 22, 2019 at 13:29

John

11.6k5 gold badges60 silver badges75 bronze badges

Comments

Sumit Vekariya · Accepted Answer · 2019-08-22 13:30:49Z

0

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';

answered Aug 22, 2019 at 13:30

Sumit Vekariya

4882 silver badges12 bronze badges

Collectives™ on Stack Overflow

Add the inline css in Angular 7 from component.ts

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related