How to add style to html element in typescript and angular

Question

I am trying to set property flex-grow to element but its not working.

script:

(this.elementRef.nativeElement as HTMLElement).setAttribute(
      'style',
      'flex-grow:' + this.panel.width && this.panel.width.type === 1 ? '0' : '1'
    );

the final result:

<ev-panel class="ev-panel ng-star-inserted" style="0" ng-reflect-panel="[object Object]"></ev-panel>
<ev-panel class="ev-panel ng-star-inserted" style="0" ng-reflect-panel="[object Object]"></ev-panel>
<ev-panel class="ev-panel ng-star-inserted" style="1" ng-reflect-panel="[object Object]"></ev-panel>

looks like it works fine, but where is flex-grow? I am asking for help and understanding

What happens if you put the shorthand if else statement between brackets? — Jacob-Jan Mosselman
– Jacob-Jan Mosselman, Commented Jun 23, 2020 at 11:26
Style takes object. I guess you need to add the flex-grow shorthand as object — Mohit
– Mohit, Commented Jun 23, 2020 at 11:34
@Mohit style does not accept a object. Just like any other attribute, it takes a string :) — Poul Kruijt
– Poul Kruijt, Commented Jun 23, 2020 at 11:39
@PoulKruijt Yes I know, I wanna say something like while doing interpolation syntax, it takes object of styles i.e. <div style={{display:'flex'}} /> in react. Though I think it's some syntax issue in the above code. I've posted the answer. Let's see if it helps :) — Mohit
– Mohit, Commented Jun 23, 2020 at 11:41

Poul Kruijt · Accepted Answer · 2020-06-23 11:41:35Z

1

Considering you are using angular, you just use @HostBinding:

export class PanelComponent {
  @HostBinding('style.flex-grow')
  get flexGrow(): string {
    return this.panel?.type === 1 ? '0' : '1'
  }
}

the reason your code is not working though, is because you are missing parentheses. The entire statement in front of the question mark is evaluated first, including the flex-grow string. To do it your way (not advisable) you should do it like this:

(this.elementRef.nativeElement as HTMLElement).setAttribute(
  'style',
  'flex-grow:' + (this.panel.width && this.panel.width.type === 1 ? '0' : '1')
);

and with the latest angular/typescript version, you can also use optional chaining:

(this.elementRef.nativeElement as HTMLElement).setAttribute(
  'style',
  `flex-grow: ${this.panel.width?.type === 1 ? '0' : '1'}`
);

but again, @HostBinding is the way to go, if you are using angular

edited Jun 23, 2020 at 11:41

answered Jun 23, 2020 at 11:33

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

Comments

Mohit · Accepted Answer · 2020-06-23 11:39:20Z

0

Can you try this,

((this.elementRef.nativeElement as HTMLElement).setAttribute(
      'style',
      `flex-grow: ${this.panel.width && this.panel.width.type === 1 ? 0 : 1}`
    );

Hope this will set the correct thing.

answered Jun 23, 2020 at 11:39

Mohit

5324 silver badges10 bronze badges

Comments

user5480425 · Accepted Answer · 2020-06-23 12:15:31Z

0

Try the Angular Renderer2, is an abstraction provided by Angular in the form of a service that allows to manipulate elements of your app without having to touch the DOM directly. This is the recommended approach.

     constructor(private renderer: Renderer2, private el: ElementRef) {

     const flexGrowValue = + this.panel.width && this.panel.width.type === 1 ? '0' : '1';

     this.renderer.setStyle(this.el.nativeElement, 'flex-grow',flexGrowValue  )

   }

https://angular.io/api/core/Renderer2

Simple example : https://stackblitz.com/edit/angular-ivy-3wyy4g

answered Jun 23, 2020 at 12:15

user5480425

Collectives™ on Stack Overflow

How to add style to html element in typescript and angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related