Force a component to re-render in ionic v4-beta
I have an app with several button components in a tab bar, serving as the app's navigation. I want the selected tab's button to have a solid fill instead of outline, so I used the following html:
<ion-tab-button #tab1 tab="home" href="/tabs/(home:home)">
<ion-button class="button-tab" fill="{{toggleState1}}" shape="round">
<ion-icon name="home"></ion-icon>
</ion-button>
</ion-tab-button>
this repeats two more times for the following tabs.
and the accompanying page.ts (everything is imported and declared above):
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
Through some experimentation, I've found that this script actually does everything I want it to do (even if it's not the prettiest code I've ever written). The only hangup is that after changing the toggleState variables in any combination, the buttons don't actually update. I've found a few ways of doing this in previous versions of ionic (using either NgZone or the now-deprecated ViewController), but I have yet to find a solution that works in ionic v4. If anyone knows how to force an individual component to redraw, or even an alternate method of changing the buttons' fill states that doesn't require a force redraw, please let me know.
ionic-framework ionic4
add a comment |
I have an app with several button components in a tab bar, serving as the app's navigation. I want the selected tab's button to have a solid fill instead of outline, so I used the following html:
<ion-tab-button #tab1 tab="home" href="/tabs/(home:home)">
<ion-button class="button-tab" fill="{{toggleState1}}" shape="round">
<ion-icon name="home"></ion-icon>
</ion-button>
</ion-tab-button>
this repeats two more times for the following tabs.
and the accompanying page.ts (everything is imported and declared above):
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
Through some experimentation, I've found that this script actually does everything I want it to do (even if it's not the prettiest code I've ever written). The only hangup is that after changing the toggleState variables in any combination, the buttons don't actually update. I've found a few ways of doing this in previous versions of ionic (using either NgZone or the now-deprecated ViewController), but I have yet to find a solution that works in ionic v4. If anyone knows how to force an individual component to redraw, or even an alternate method of changing the buttons' fill states that doesn't require a force redraw, please let me know.
ionic-framework ionic4
maybe changing the css instead would be a better idea, that way you wouldn't have to redraw the component
– Merve Sahin
Nov 28 '18 at 16:03
@MerveSahin Is it possible to change the fill property of a button with css? I don't think there's a fill property, so would I have to just manually do it with recoloring everything and adding a border?
– Gannon Kolding
Nov 29 '18 at 15:14
add a comment |
I have an app with several button components in a tab bar, serving as the app's navigation. I want the selected tab's button to have a solid fill instead of outline, so I used the following html:
<ion-tab-button #tab1 tab="home" href="/tabs/(home:home)">
<ion-button class="button-tab" fill="{{toggleState1}}" shape="round">
<ion-icon name="home"></ion-icon>
</ion-button>
</ion-tab-button>
this repeats two more times for the following tabs.
and the accompanying page.ts (everything is imported and declared above):
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
Through some experimentation, I've found that this script actually does everything I want it to do (even if it's not the prettiest code I've ever written). The only hangup is that after changing the toggleState variables in any combination, the buttons don't actually update. I've found a few ways of doing this in previous versions of ionic (using either NgZone or the now-deprecated ViewController), but I have yet to find a solution that works in ionic v4. If anyone knows how to force an individual component to redraw, or even an alternate method of changing the buttons' fill states that doesn't require a force redraw, please let me know.
ionic-framework ionic4
I have an app with several button components in a tab bar, serving as the app's navigation. I want the selected tab's button to have a solid fill instead of outline, so I used the following html:
<ion-tab-button #tab1 tab="home" href="/tabs/(home:home)">
<ion-button class="button-tab" fill="{{toggleState1}}" shape="round">
<ion-icon name="home"></ion-icon>
</ion-button>
</ion-tab-button>
this repeats two more times for the following tabs.
and the accompanying page.ts (everything is imported and declared above):
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
Through some experimentation, I've found that this script actually does everything I want it to do (even if it's not the prettiest code I've ever written). The only hangup is that after changing the toggleState variables in any combination, the buttons don't actually update. I've found a few ways of doing this in previous versions of ionic (using either NgZone or the now-deprecated ViewController), but I have yet to find a solution that works in ionic v4. If anyone knows how to force an individual component to redraw, or even an alternate method of changing the buttons' fill states that doesn't require a force redraw, please let me know.
ionic-framework ionic4
ionic-framework ionic4
asked Nov 28 '18 at 15:25
Gannon KoldingGannon Kolding
1
1
maybe changing the css instead would be a better idea, that way you wouldn't have to redraw the component
– Merve Sahin
Nov 28 '18 at 16:03
@MerveSahin Is it possible to change the fill property of a button with css? I don't think there's a fill property, so would I have to just manually do it with recoloring everything and adding a border?
– Gannon Kolding
Nov 29 '18 at 15:14
add a comment |
maybe changing the css instead would be a better idea, that way you wouldn't have to redraw the component
– Merve Sahin
Nov 28 '18 at 16:03
@MerveSahin Is it possible to change the fill property of a button with css? I don't think there's a fill property, so would I have to just manually do it with recoloring everything and adding a border?
– Gannon Kolding
Nov 29 '18 at 15:14
maybe changing the css instead would be a better idea, that way you wouldn't have to redraw the component
– Merve Sahin
Nov 28 '18 at 16:03
maybe changing the css instead would be a better idea, that way you wouldn't have to redraw the component
– Merve Sahin
Nov 28 '18 at 16:03
@MerveSahin Is it possible to change the fill property of a button with css? I don't think there's a fill property, so would I have to just manually do it with recoloring everything and adding a border?
– Gannon Kolding
Nov 29 '18 at 15:14
@MerveSahin Is it possible to change the fill property of a button with css? I don't think there's a fill property, so would I have to just manually do it with recoloring everything and adding a border?
– Gannon Kolding
Nov 29 '18 at 15:14
add a comment |
1 Answer
1
active
oldest
votes
Maybe you are updating the properties outside angular zone. To put it simply: there are some scenarios where angular does not detect changes.
To make sure angular detects the changes, put the logic which modifies the properties inside zone.run()
:
constructor(private zone:NgZone) {
}
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
this.zone.run(() => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
});
}
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%2f53522833%2fforce-a-component-to-re-render-in-ionic-v4-beta%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
Maybe you are updating the properties outside angular zone. To put it simply: there are some scenarios where angular does not detect changes.
To make sure angular detects the changes, put the logic which modifies the properties inside zone.run()
:
constructor(private zone:NgZone) {
}
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
this.zone.run(() => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
});
}
add a comment |
Maybe you are updating the properties outside angular zone. To put it simply: there are some scenarios where angular does not detect changes.
To make sure angular detects the changes, put the logic which modifies the properties inside zone.run()
:
constructor(private zone:NgZone) {
}
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
this.zone.run(() => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
});
}
add a comment |
Maybe you are updating the properties outside angular zone. To put it simply: there are some scenarios where angular does not detect changes.
To make sure angular detects the changes, put the logic which modifies the properties inside zone.run()
:
constructor(private zone:NgZone) {
}
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
this.zone.run(() => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
});
}
Maybe you are updating the properties outside angular zone. To put it simply: there are some scenarios where angular does not detect changes.
To make sure angular detects the changes, put the logic which modifies the properties inside zone.run()
:
constructor(private zone:NgZone) {
}
public highlightTab(myTabs) {
this.mainTabs.getSelected().then(data => {
this.zone.run(() => {
let selectedTab = data;
console.log(selectedTab.id);
if (selectedTab.id = "tab-view-home") {
this.toggleState1 = "solid";
this.toggleState2 = "outline";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-about") {
this.toggleState1 = "outline";
this.toggleState2 = "solid";
this.toggleState3 = "outline";
}
else if (selectedTab.id = "tab-view-contact") {
this.toggleState1 = "outline";
this.toggleState2 = "outline";
this.toggleState3 = "solid";
}
});
});
}
answered Dec 20 '18 at 19:07
Matti LehtinenMatti Lehtinen
484311
484311
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%2f53522833%2fforce-a-component-to-re-render-in-ionic-v4-beta%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
maybe changing the css instead would be a better idea, that way you wouldn't have to redraw the component
– Merve Sahin
Nov 28 '18 at 16:03
@MerveSahin Is it possible to change the fill property of a button with css? I don't think there's a fill property, so would I have to just manually do it with recoloring everything and adding a border?
– Gannon Kolding
Nov 29 '18 at 15:14