Component automatically change its position in angular 6
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 asked Nov 24 '18 at 8:42
ArthiArthi
478
|
show 6 more comments
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 asked Nov 24 '18 at 8:42
ArthiArthi
478
1
Move the*ngIfup onto thedivwith thecol-lg-4class
– 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 thed-flexandflex-fillclasses getbootstrap.com/docs/4.1/utilities/flex/#fill
– user184994
Nov 24 '18 at 10:11
|
show 6 more comments
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 asked Nov 24 '18 at 8:42
ArthiArthi
478
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 angular asked Nov 24 '18 at 8:42
ArthiArthi
478
asked Nov 24 '18 at 8:42
ArthiArthi
478
asked Nov 24 '18 at 8:42
ArthiArthi
478
asked Nov 24 '18 at 8:42
ArthiArthi
478
asked Nov 24 '18 at 8:42
ArthiArthi
478
478
1
Move the*ngIfup onto thedivwith thecol-lg-4class
– 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 thed-flexandflex-fillclasses getbootstrap.com/docs/4.1/utilities/flex/#fill
– user184994
Nov 24 '18 at 10:11
|
show 6 more comments
1
Move the*ngIfup onto thedivwith thecol-lg-4class
– 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 thed-flexandflex-fillclasses 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
|
show 6 more comments
1 Answer
1
active
oldest
votes
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.
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
add a comment |
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.
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
add a comment |
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.
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
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.
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
answered Dec 14 '18 at 9:01
Santhosh mpSanthosh mp
11418
11418
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
1
Move the
*ngIfup onto thedivwith thecol-lg-4class– 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-flexandflex-fillclasses getbootstrap.com/docs/4.1/utilities/flex/#fill– user184994
Nov 24 '18 at 10:11