Component automatically change its position in angular 6












0















Currently I am developing angular application.More Than 6 components are loaded in dashboard based on user roles.I am used col to split the components size in dashboard.The problem is some component is hidden for users based on role.If the component is removed the space is still maintain,its not aligned.I want to replace the space by next component currently available.



dashboard.html:



<div class="row">
<div class="col-lg-4">
<app-date-update *ngIf="isAdminLogin"></app-date-update>
</div>
<div class="col-lg-4">
<app-missing-alert></app-missing-alert>
</div>
<div class="col-lg-4">
<app-answers></app-answers>
</div>
</div>

<div class="row">
<div class="col-lg-4">
<app-due-date-alerts *ngIf="isPermittedRoleForDuedate"></app-due-date-alerts>
</div>
</div>


If the col is splitted so the space is still maintained when the component is hidden.How to achieve this in html or angular??










share|improve this question


















  • 1





    Move the *ngIf up onto the div with the col-lg-4 class

    – user184994
    Nov 24 '18 at 8:48











  • Your solution is working little bit.But the problem is In the first row last col is hidden means the space is still maintain because the col is in that row.How to fix it

    – Arthi
    Nov 24 '18 at 8:56











  • Use a single div.row and put ll your div.col-lg-4 inside.

    – JB Nizet
    Nov 24 '18 at 8:56













  • Hey I have more than 5 components how to split into .col-lg-4 in a single row.

    – Arthi
    Nov 24 '18 at 8:59






  • 1





    @Arthi Then use the d-flex and flex-fill classes getbootstrap.com/docs/4.1/utilities/flex/#fill

    – user184994
    Nov 24 '18 at 10:11


















0















Currently I am developing angular application.More Than 6 components are loaded in dashboard based on user roles.I am used col to split the components size in dashboard.The problem is some component is hidden for users based on role.If the component is removed the space is still maintain,its not aligned.I want to replace the space by next component currently available.



dashboard.html:



<div class="row">
<div class="col-lg-4">
<app-date-update *ngIf="isAdminLogin"></app-date-update>
</div>
<div class="col-lg-4">
<app-missing-alert></app-missing-alert>
</div>
<div class="col-lg-4">
<app-answers></app-answers>
</div>
</div>

<div class="row">
<div class="col-lg-4">
<app-due-date-alerts *ngIf="isPermittedRoleForDuedate"></app-due-date-alerts>
</div>
</div>


If the col is splitted so the space is still maintained when the component is hidden.How to achieve this in html or angular??










share|improve this question


















  • 1





    Move the *ngIf up onto the div with the col-lg-4 class

    – user184994
    Nov 24 '18 at 8:48











  • Your solution is working little bit.But the problem is In the first row last col is hidden means the space is still maintain because the col is in that row.How to fix it

    – Arthi
    Nov 24 '18 at 8:56











  • Use a single div.row and put ll your div.col-lg-4 inside.

    – JB Nizet
    Nov 24 '18 at 8:56













  • Hey I have more than 5 components how to split into .col-lg-4 in a single row.

    – Arthi
    Nov 24 '18 at 8:59






  • 1





    @Arthi Then use the d-flex and flex-fill classes getbootstrap.com/docs/4.1/utilities/flex/#fill

    – user184994
    Nov 24 '18 at 10:11
















0












0








0








Currently I am developing angular application.More Than 6 components are loaded in dashboard based on user roles.I am used col to split the components size in dashboard.The problem is some component is hidden for users based on role.If the component is removed the space is still maintain,its not aligned.I want to replace the space by next component currently available.



dashboard.html:



<div class="row">
<div class="col-lg-4">
<app-date-update *ngIf="isAdminLogin"></app-date-update>
</div>
<div class="col-lg-4">
<app-missing-alert></app-missing-alert>
</div>
<div class="col-lg-4">
<app-answers></app-answers>
</div>
</div>

<div class="row">
<div class="col-lg-4">
<app-due-date-alerts *ngIf="isPermittedRoleForDuedate"></app-due-date-alerts>
</div>
</div>


If the col is splitted so the space is still maintained when the component is hidden.How to achieve this in html or angular??










share|improve this question














Currently I am developing angular application.More Than 6 components are loaded in dashboard based on user roles.I am used col to split the components size in dashboard.The problem is some component is hidden for users based on role.If the component is removed the space is still maintain,its not aligned.I want to replace the space by next component currently available.



dashboard.html:



<div class="row">
<div class="col-lg-4">
<app-date-update *ngIf="isAdminLogin"></app-date-update>
</div>
<div class="col-lg-4">
<app-missing-alert></app-missing-alert>
</div>
<div class="col-lg-4">
<app-answers></app-answers>
</div>
</div>

<div class="row">
<div class="col-lg-4">
<app-due-date-alerts *ngIf="isPermittedRoleForDuedate"></app-due-date-alerts>
</div>
</div>


If the col is splitted so the space is still maintained when the component is hidden.How to achieve this in html or angular??







angular






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 24 '18 at 8:42









ArthiArthi

478




478








  • 1





    Move the *ngIf up onto the div with the col-lg-4 class

    – user184994
    Nov 24 '18 at 8:48











  • Your solution is working little bit.But the problem is In the first row last col is hidden means the space is still maintain because the col is in that row.How to fix it

    – Arthi
    Nov 24 '18 at 8:56











  • Use a single div.row and put ll your div.col-lg-4 inside.

    – JB Nizet
    Nov 24 '18 at 8:56













  • Hey I have more than 5 components how to split into .col-lg-4 in a single row.

    – Arthi
    Nov 24 '18 at 8:59






  • 1





    @Arthi Then use the d-flex and flex-fill classes getbootstrap.com/docs/4.1/utilities/flex/#fill

    – user184994
    Nov 24 '18 at 10:11
















  • 1





    Move the *ngIf up onto the div with the col-lg-4 class

    – user184994
    Nov 24 '18 at 8:48











  • Your solution is working little bit.But the problem is In the first row last col is hidden means the space is still maintain because the col is in that row.How to fix it

    – Arthi
    Nov 24 '18 at 8:56











  • Use a single div.row and put ll your div.col-lg-4 inside.

    – JB Nizet
    Nov 24 '18 at 8:56













  • Hey I have more than 5 components how to split into .col-lg-4 in a single row.

    – Arthi
    Nov 24 '18 at 8:59






  • 1





    @Arthi Then use the d-flex and flex-fill classes getbootstrap.com/docs/4.1/utilities/flex/#fill

    – user184994
    Nov 24 '18 at 10:11










1




1





Move the *ngIf up onto the div with the col-lg-4 class

– user184994
Nov 24 '18 at 8:48





Move the *ngIf up onto the div with the col-lg-4 class

– user184994
Nov 24 '18 at 8:48













Your solution is working little bit.But the problem is In the first row last col is hidden means the space is still maintain because the col is in that row.How to fix it

– Arthi
Nov 24 '18 at 8:56





Your solution is working little bit.But the problem is In the first row last col is hidden means the space is still maintain because the col is in that row.How to fix it

– Arthi
Nov 24 '18 at 8:56













Use a single div.row and put ll your div.col-lg-4 inside.

– JB Nizet
Nov 24 '18 at 8:56







Use a single div.row and put ll your div.col-lg-4 inside.

– JB Nizet
Nov 24 '18 at 8:56















Hey I have more than 5 components how to split into .col-lg-4 in a single row.

– Arthi
Nov 24 '18 at 8:59





Hey I have more than 5 components how to split into .col-lg-4 in a single row.

– Arthi
Nov 24 '18 at 8:59




1




1





@Arthi Then use the d-flex and flex-fill classes getbootstrap.com/docs/4.1/utilities/flex/#fill

– user184994
Nov 24 '18 at 10:11







@Arthi Then use the d-flex and flex-fill classes getbootstrap.com/docs/4.1/utilities/flex/#fill

– user184994
Nov 24 '18 at 10:11














1 Answer
1






active

oldest

votes


















0














This requirement is not achievable using bootstrap classes.
This can be achieved through angular attribute directives (ngStyle/ngClass/custom directives).
Based on the conditions appropriate classes need to be added to the div to decide their width.



Hope this helps.






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%2f53456563%2fcomponent-automatically-change-its-position-in-angular-6%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









    0














    This requirement is not achievable using bootstrap classes.
    This can be achieved through angular attribute directives (ngStyle/ngClass/custom directives).
    Based on the conditions appropriate classes need to be added to the div to decide their width.



    Hope this helps.






    share|improve this answer




























      0














      This requirement is not achievable using bootstrap classes.
      This can be achieved through angular attribute directives (ngStyle/ngClass/custom directives).
      Based on the conditions appropriate classes need to be added to the div to decide their width.



      Hope this helps.






      share|improve this answer


























        0












        0








        0







        This requirement is not achievable using bootstrap classes.
        This can be achieved through angular attribute directives (ngStyle/ngClass/custom directives).
        Based on the conditions appropriate classes need to be added to the div to decide their width.



        Hope this helps.






        share|improve this answer













        This requirement is not achievable using bootstrap classes.
        This can be achieved through angular attribute directives (ngStyle/ngClass/custom directives).
        Based on the conditions appropriate classes need to be added to the div to decide their width.



        Hope this helps.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Dec 14 '18 at 9:01









        Santhosh mpSanthosh mp

        11418




        11418
































            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%2f53456563%2fcomponent-automatically-change-its-position-in-angular-6%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

            Costa Masnaga

            Fotorealismo

            Sidney Franklin