How to set Dynamic height of a element in Angular 4?












-3















i'm not able to set the height of Div element dynamically using Angular 4 typescript..



Thanks in Advance










share|improve this question




















  • 2





    Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"

    – Akber Iqbal
    Nov 22 '18 at 7:21











  • Thank you very much i was trying since 1 day not able to find this working syntax

    – Harish Kumar
    Nov 22 '18 at 8:01











  • Glad that helped you, can you accept the answer as well ? Thanks.

    – Akber Iqbal
    Nov 22 '18 at 9:56
















-3















i'm not able to set the height of Div element dynamically using Angular 4 typescript..



Thanks in Advance










share|improve this question




















  • 2





    Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"

    – Akber Iqbal
    Nov 22 '18 at 7:21











  • Thank you very much i was trying since 1 day not able to find this working syntax

    – Harish Kumar
    Nov 22 '18 at 8:01











  • Glad that helped you, can you accept the answer as well ? Thanks.

    – Akber Iqbal
    Nov 22 '18 at 9:56














-3












-3








-3








i'm not able to set the height of Div element dynamically using Angular 4 typescript..



Thanks in Advance










share|improve this question
















i'm not able to set the height of Div element dynamically using Angular 4 typescript..



Thanks in Advance







css angular






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 22 '18 at 7:20









Akber Iqbal

2,52931225




2,52931225










asked Nov 22 '18 at 7:17









Harish KumarHarish Kumar

64




64








  • 2





    Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"

    – Akber Iqbal
    Nov 22 '18 at 7:21











  • Thank you very much i was trying since 1 day not able to find this working syntax

    – Harish Kumar
    Nov 22 '18 at 8:01











  • Glad that helped you, can you accept the answer as well ? Thanks.

    – Akber Iqbal
    Nov 22 '18 at 9:56














  • 2





    Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"

    – Akber Iqbal
    Nov 22 '18 at 7:21











  • Thank you very much i was trying since 1 day not able to find this working syntax

    – Harish Kumar
    Nov 22 '18 at 8:01











  • Glad that helped you, can you accept the answer as well ? Thanks.

    – Akber Iqbal
    Nov 22 '18 at 9:56








2




2





Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"

– Akber Iqbal
Nov 22 '18 at 7:21





Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"

– Akber Iqbal
Nov 22 '18 at 7:21













Thank you very much i was trying since 1 day not able to find this working syntax

– Harish Kumar
Nov 22 '18 at 8:01





Thank you very much i was trying since 1 day not able to find this working syntax

– Harish Kumar
Nov 22 '18 at 8:01













Glad that helped you, can you accept the answer as well ? Thanks.

– Akber Iqbal
Nov 22 '18 at 9:56





Glad that helped you, can you accept the answer as well ? Thanks.

– Akber Iqbal
Nov 22 '18 at 9:56












2 Answers
2






active

oldest

votes


















0















  1. You can add styles for two classes like
    .class1 {height:20px}
    .class2 {height:40px}


And for div add [class] = "ifSomething ? 'class1' : 'class2'"




  1. Use ElementRef.nativeElement.getElementByClassName and change style for div by js.






share|improve this answer































    0














    Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"






    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425680%2fhow-to-set-dynamic-height-of-a-element-in-angular-4%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0















      1. You can add styles for two classes like
        .class1 {height:20px}
        .class2 {height:40px}


      And for div add [class] = "ifSomething ? 'class1' : 'class2'"




      1. Use ElementRef.nativeElement.getElementByClassName and change style for div by js.






      share|improve this answer




























        0















        1. You can add styles for two classes like
          .class1 {height:20px}
          .class2 {height:40px}


        And for div add [class] = "ifSomething ? 'class1' : 'class2'"




        1. Use ElementRef.nativeElement.getElementByClassName and change style for div by js.






        share|improve this answer


























          0












          0








          0








          1. You can add styles for two classes like
            .class1 {height:20px}
            .class2 {height:40px}


          And for div add [class] = "ifSomething ? 'class1' : 'class2'"




          1. Use ElementRef.nativeElement.getElementByClassName and change style for div by js.






          share|improve this answer














          1. You can add styles for two classes like
            .class1 {height:20px}
            .class2 {height:40px}


          And for div add [class] = "ifSomething ? 'class1' : 'class2'"




          1. Use ElementRef.nativeElement.getElementByClassName and change style for div by js.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 22 '18 at 7:51









          mremil6mremil6

          11




          11

























              0














              Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"






              share|improve this answer




























                0














                Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"






                share|improve this answer


























                  0












                  0








                  0







                  Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"






                  share|improve this answer













                  Use a variable which has the height you want to enter... then use [ngStyle]="{'height': [yourVariableName]}"







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 22 '18 at 9:55









                  Akber IqbalAkber Iqbal

                  2,52931225




                  2,52931225






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425680%2fhow-to-set-dynamic-height-of-a-element-in-angular-4%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      Popular posts from this blog

                      MongoDB - Not Authorized To Execute Command

                      in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

                      Npm cannot find a required file even through it is in the searched directory