How to force a component to reload, on state change with Angular 7 The Next CEO of Stack OverflowHow to force browser to reload cached CSS/JS files?How to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?How do I modify the URL without reloading the page?How to reload a page using JavaScriptjQuery checkbox checked state changed event@Directive v/s @Component in AngularHow to detect a route change in Angular?Angular - Use pipes in services and componentsAngular change detection after template render
How do I align (1) and (2)?
Why is information "lost" when it got into a black hole?
Would this house-rule that treats advantage as a +1 to the roll instead (and disadvantage as -1) and allows them to stack be balanced?
Why doesn't UK go for the same deal Japan has with EU to resolve Brexit?
Method for adding error messages to a dictionary given a key
Help understanding this unsettling image of Titan, Epimetheus, and Saturn's rings?
Is a distribution that is normal, but highly skewed considered Gaussian?
How to invert MapIndexed on a ragged structure? How to construct a tree from rules?
Running a General Election and the European Elections together
If Nick Fury and Coulson already knew about aliens (Kree and Skrull) why did they wait until Thor's appearance to start making weapons?
How is this set of matrices closed under multiplication?
Prepend last line of stdin to entire stdin
Can you be charged for obstruction for refusing to answer questions?
"misplaced omit" error when >centering columns
Can I use the load factor to estimate the lift?
Won the lottery - how do I keep the money?
WOW air has ceased operation, can I get my tickets refunded?
Is it my responsibility to learn a new technology in my own time my employer wants to implement?
What connection does MS Office have to Netscape Navigator?
Writing differences on a blackboard
The past simple of "gaslight" – "gaslighted" or "gaslit"?
Calculator final project in Python
Proper way to express "He disappeared them"
What happened in Rome, when the western empire "fell"?
How to force a component to reload, on state change with Angular 7
The Next CEO of Stack OverflowHow to force browser to reload cached CSS/JS files?How to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?How do I modify the URL without reloading the page?How to reload a page using JavaScriptjQuery checkbox checked state changed event@Directive v/s @Component in AngularHow to detect a route change in Angular?Angular - Use pipes in services and componentsAngular change detection after template render
I am coming from a React background (as far as my frontend skills are concerned) and need to do some work with Angular 7.
I want to change a variable in the class that declares the component(mycomponent.component.ts) and then to see the result in the browser, given the new values (which control, the elements that will be visible).
In React you would do that, by altering (in an immutable way) the this.state variable. I am trying to do this using the @Output directive as:
@Output() private hasResults: boolean = false;
//...
@Output()
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
if (item !== undefined)
this.hasResults = true;
else
this.hasResults = true;
console.log('item is ', item)
)
The service is doing a plain GET request.
Some elements in the respective html file depend on the value of hasResults to be printed and they are not reacting to the change.
What am I doing wrong?
javascript
angular angular7 asked Mar 8 at 15:42
py_scriptpy_script
46121230
add a comment |
I am coming from a React background (as far as my frontend skills are concerned) and need to do some work with Angular 7.
I want to change a variable in the class that declares the component(mycomponent.component.ts) and then to see the result in the browser, given the new values (which control, the elements that will be visible).
In React you would do that, by altering (in an immutable way) the this.state variable. I am trying to do this using the @Output directive as:
@Output() private hasResults: boolean = false;
//...
@Output()
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
if (item !== undefined)
this.hasResults = true;
else
this.hasResults = true;
console.log('item is ', item)
)
The service is doing a plain GET request.
Some elements in the respective html file depend on the value of hasResults to be printed and they are not reacting to the change.
What am I doing wrong?
javascript
angular angular7 asked Mar 8 at 15:42
py_scriptpy_script
46121230
add a comment |
I am coming from a React background (as far as my frontend skills are concerned) and need to do some work with Angular 7.
I want to change a variable in the class that declares the component(mycomponent.component.ts) and then to see the result in the browser, given the new values (which control, the elements that will be visible).
In React you would do that, by altering (in an immutable way) the this.state variable. I am trying to do this using the @Output directive as:
@Output() private hasResults: boolean = false;
//...
@Output()
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
if (item !== undefined)
this.hasResults = true;
else
this.hasResults = true;
console.log('item is ', item)
)
The service is doing a plain GET request.
Some elements in the respective html file depend on the value of hasResults to be printed and they are not reacting to the change.
What am I doing wrong?
javascript
angular angular7 asked Mar 8 at 15:42
py_scriptpy_script
46121230
I am coming from a React background (as far as my frontend skills are concerned) and need to do some work with Angular 7.
I want to change a variable in the class that declares the component(mycomponent.component.ts) and then to see the result in the browser, given the new values (which control, the elements that will be visible).
In React you would do that, by altering (in an immutable way) the this.state variable. I am trying to do this using the @Output directive as:
@Output() private hasResults: boolean = false;
//...
@Output()
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
if (item !== undefined)
this.hasResults = true;
else
this.hasResults = true;
console.log('item is ', item)
)
The service is doing a plain GET request.
Some elements in the respective html file depend on the value of hasResults to be printed and they are not reacting to the change.
What am I doing wrong?
javascript
angular angular7 javascript
angular angular7 asked Mar 8 at 15:42
py_scriptpy_script
46121230
asked Mar 8 at 15:42
py_scriptpy_script
46121230
asked Mar 8 at 15:42
py_scriptpy_script
46121230
asked Mar 8 at 15:42
py_scriptpy_script
46121230
asked Mar 8 at 15:42
py_scriptpy_script
46121230
46121230
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It has to do with scope, hasResults is marked as private which means the component's template does not have access to it. Remove the private access modifier and also you do not need @Output as that is used to broadcast events to subscribers.
hasResults: boolean = false;
//...
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
this.hasResults = item !== undefined;
console.log('item is ', item)
)
answered Mar 8 at 15:50
IgorIgor
42.2k453106
1
It worked, many thanks :)
– py_script
Mar 8 at 15:59
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%2f55066526%2fhow-to-force-a-component-to-reload-on-state-change-with-angular-7%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
It has to do with scope, hasResults is marked as private which means the component's template does not have access to it. Remove the private access modifier and also you do not need @Output as that is used to broadcast events to subscribers.
hasResults: boolean = false;
//...
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
this.hasResults = item !== undefined;
console.log('item is ', item)
)
answered Mar 8 at 15:50
IgorIgor
42.2k453106
1
It worked, many thanks :)
– py_script
Mar 8 at 15:59
add a comment |
It has to do with scope, hasResults is marked as private which means the component's template does not have access to it. Remove the private access modifier and also you do not need @Output as that is used to broadcast events to subscribers.
hasResults: boolean = false;
//...
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
this.hasResults = item !== undefined;
console.log('item is ', item)
)
answered Mar 8 at 15:50
IgorIgor
42.2k453106
1
It worked, many thanks :)
– py_script
Mar 8 at 15:59
add a comment |
It has to do with scope, hasResults is marked as private which means the component's template does not have access to it. Remove the private access modifier and also you do not need @Output as that is used to broadcast events to subscribers.
hasResults: boolean = false;
//...
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
this.hasResults = item !== undefined;
console.log('item is ', item)
)
answered Mar 8 at 15:50
IgorIgor
42.2k453106
It has to do with scope, hasResults is marked as private which means the component's template does not have access to it. Remove the private access modifier and also you do not need @Output as that is used to broadcast events to subscribers.
hasResults: boolean = false;
//...
buttonClick()
const result: Observable<Object> = this.myservice.queryData();
result.subscribe(item =>
this.hasResults = item !== undefined;
console.log('item is ', item)
)
answered Mar 8 at 15:50
IgorIgor
42.2k453106
answered Mar 8 at 15:50
IgorIgor
42.2k453106
answered Mar 8 at 15:50
IgorIgor
42.2k453106
answered Mar 8 at 15:50
IgorIgor
42.2k453106
42.2k453106
1
It worked, many thanks :)
– py_script
Mar 8 at 15:59
add a comment |
1
It worked, many thanks :)
– py_script
Mar 8 at 15:59
1
1
It worked, many thanks :)
– py_script
Mar 8 at 15:59
It worked, many thanks :)
– py_script
Mar 8 at 15:59
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%2f55066526%2fhow-to-force-a-component-to-reload-on-state-change-with-angular-7%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
