D3/Angular get window size











up vote
0
down vote

favorite












I have a plunker here - https://stackblitz.com/edit/ng-first-v-last-wide-labels?file=src%2Fapp%2Fbar-chart.ts



I have a d3 chart in an Angular app.



I'm trying to capture the screen size and do something different when hovering over the bars below a screen size.



I'm trying to do this using



if (window.screen.width > 500) {

    alert('small')

}


This alerts all the time and not only when below 500



How can I capture screen size so I can use it in the code






javascript angular d3.js







share|improve this question


















  • 2




    Did you mean window.screen.width < 500?
    – ConnorsFan
    Nov 19 at 15:27










  • It doesn't really matter I just need to be able to detect if the window is bigger or smaller than a certain size. I think I have it working now with window.innerWidth < 600
    – ttmt
    Nov 19 at 15:32















up vote
0
down vote

favorite












I have a plunker here - https://stackblitz.com/edit/ng-first-v-last-wide-labels?file=src%2Fapp%2Fbar-chart.ts



I have a d3 chart in an Angular app.



I'm trying to capture the screen size and do something different when hovering over the bars below a screen size.



I'm trying to do this using



if (window.screen.width > 500) {

    alert('small')

}


This alerts all the time and not only when below 500



How can I capture screen size so I can use it in the code






javascript angular d3.js







share|improve this question


















  • 2




    Did you mean window.screen.width < 500?
    – ConnorsFan
    Nov 19 at 15:27










  • It doesn't really matter I just need to be able to detect if the window is bigger or smaller than a certain size. I think I have it working now with window.innerWidth < 600
    – ttmt
    Nov 19 at 15:32













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I have a plunker here - https://stackblitz.com/edit/ng-first-v-last-wide-labels?file=src%2Fapp%2Fbar-chart.ts



I have a d3 chart in an Angular app.



I'm trying to capture the screen size and do something different when hovering over the bars below a screen size.



I'm trying to do this using



if (window.screen.width > 500) {

    alert('small')

}


This alerts all the time and not only when below 500



How can I capture screen size so I can use it in the code






javascript angular d3.js







share|improve this question













I have a plunker here - https://stackblitz.com/edit/ng-first-v-last-wide-labels?file=src%2Fapp%2Fbar-chart.ts



I have a d3 chart in an Angular app.



I'm trying to capture the screen size and do something different when hovering over the bars below a screen size.



I'm trying to do this using



if (window.screen.width > 500) {

    alert('small')

}


This alerts all the time and not only when below 500



How can I capture screen size so I can use it in the code






javascript angular d3.js




javascript angular d3.js






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 19 at 15:25









ttmt

1,985114997




1,985114997








  • 2




    Did you mean window.screen.width < 500?
    – ConnorsFan
    Nov 19 at 15:27










  • It doesn't really matter I just need to be able to detect if the window is bigger or smaller than a certain size. I think I have it working now with window.innerWidth < 600
    – ttmt
    Nov 19 at 15:32














  • 2




    Did you mean window.screen.width < 500?
    – ConnorsFan
    Nov 19 at 15:27










  • It doesn't really matter I just need to be able to detect if the window is bigger or smaller than a certain size. I think I have it working now with window.innerWidth < 600
    – ttmt
    Nov 19 at 15:32








2




2




Did you mean window.screen.width < 500?
– ConnorsFan
Nov 19 at 15:27




Did you mean window.screen.width < 500?
– ConnorsFan
Nov 19 at 15:27












It doesn't really matter I just need to be able to detect if the window is bigger or smaller than a certain size. I think I have it working now with window.innerWidth < 600
– ttmt
Nov 19 at 15:32




It doesn't really matter I just need to be able to detect if the window is bigger or smaller than a certain size. I think I have it working now with window.innerWidth < 600
– ttmt
Nov 19 at 15:32












1 Answer
1






active

oldest

votes

















up vote
1
down vote













I've got the same issue,



this is how I fixed it 



  public height = window.innerHeight;

  public width = window.innerWidth;


and in the ngOnInit you do your verification for the alert






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',
    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%2f53377780%2fd3-angular-get-window-size%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote













    I've got the same issue,



    this is how I fixed it 



      public height = window.innerHeight;
    
  public width = window.innerWidth;


    and in the ngOnInit you do your verification for the alert






    share|improve this answer

























      up vote
      1
      down vote













      I've got the same issue,



      this is how I fixed it 



        public height = window.innerHeight;
      
  public width = window.innerWidth;


      and in the ngOnInit you do your verification for the alert






      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        I've got the same issue,



        this is how I fixed it 



          public height = window.innerHeight;
        
  public width = window.innerWidth;


        and in the ngOnInit you do your verification for the alert






        share|improve this answer












        I've got the same issue,



        this is how I fixed it 



          public height = window.innerHeight;
        
  public width = window.innerWidth;


        and in the ngOnInit you do your verification for the alert







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 19 at 15:45









        Alann

        13311




        13311






























            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.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • 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%2f53377780%2fd3-angular-get-window-size%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

            Create new schema in PostgreSQL using DBeaver

            Image
            0 At the beginning of my current job I had limited access to DB but recently my role is changed to superuser, admin, and owner. My colleague who was the previous DB admin is able to create a schema or change the permissions as there is a permission tab in the properties and he can change permissions by clicking easily. Would you please let me know how I can create schema and change permissions as well? Why his dbeaver looks different from me? He can easily right click on the schema folder on top of all schemas on the left side column and select create new schema while I do not have that, like the following picture I found on the internet. postgresql database-schema dbeaver share | improve this question
            Read more

            Deepest pit of an array with Javascript: test on Codility

            Image
            0 $begingroup$ This is the question from a Codility test, as a task in an interview: DeepestPit - problem description A non-empty zero-indexed array A consisting of N integers is given. A pit in this array is any triplet of integers (P, Q, R) such that: ·         0 ≤ P < Q < R < N; ·         sequence [A[P], A[P+1], ..., A[Q]] is strictly decreasing, i.e. A[P] > A[P+1] > ... > A[Q]; ·         sequence A[Q], A[Q+1], ..., A[R] is strictly increasing, i.e. A[Q] < A[Q+1] < ... < A[R]. The depth of a pit (P, Q, R) is the number min {A[P] − A[Q], A[R] − A[Q]}. For example, consider array A consisting of 10 elements such that: A[0] = 0 A[1] = 1 A[2] = 3 A[3] = -2 A[4] = 0 A[5] = 1 A[6] = 0 A[7] = -3 A[8] = 2 A[9] = 3 Triplet (2, 3, 4) is
            Read more

            Costa Masnaga

            Image
            .mw-parser-output .avviso .mbox-text-div>div,.mw-parser-output .avviso .mbox-text-full-div>div{font-size:90%}.mw-parser-output .avviso .mbox-image div{width:52px}.mw-parser-output .avviso .mbox-text-full-div .hide-when-compact{display:block} Questa voce o sezione sull'argomento Lombardia non cita le fonti necessarie o quelle presenti sono insufficienti . Puoi migliorare questa voce aggiungendo citazioni da fonti attendibili secondo le linee guida sull'uso delle fonti. Segui i suggerimenti del progetto di riferimento. Costa Masnaga comune Localizzazione Stato   Italia Regione Lombardia Provincia Lecco Amministrazione Sindaco Sabina Panzeri (Al centro il cittadino) dall'08/06/2009 Territorio Coordinate 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Coordinate: 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Altitudine 318 m s.l.m
            Read more