1

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

4
  • What happens if you put the shorthand if else statement between brackets? Commented Jun 23, 2020 at 11:26
  • Style takes object. I guess you need to add the flex-grow shorthand as object Commented Jun 23, 2020 at 11:34
  • @Mohit style does not accept a object. Just like any other attribute, it takes a string :) 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 :) Commented Jun 23, 2020 at 11:41

3 Answers 3

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

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

Comments

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.

Comments

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.