Accessing 'this' (component instance) from a template
Suppose we need to bind some child component property to a component instance itself in a template:
<child-component parent="???"></child-component1>
Is there a way to do it except declaring a dedicated property on the parent component:
public thisInstance: ParentComponent = this;
and then using it:
<child-component parent="thisInstance"></child-component1>
?
UPDATE 1: I'm looking for a way which allows to definitely provide a parent to a child meaning that if the child has two or more parents of the same component type on different levels of hierarchy, we would be able to definitely specify which one has to be used.
UPDATE 2: I'm looking for an approach without limiting the child what exact type of the parent could be used. So, I'm not sure if injecting a parent into child's constructor using some base class (which is implemented by the parent) as token would work.
angular typescript angular-components
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
add a comment |
Suppose we need to bind some child component property to a component instance itself in a template:
<child-component parent="???"></child-component1>
Is there a way to do it except declaring a dedicated property on the parent component:
public thisInstance: ParentComponent = this;
and then using it:
<child-component parent="thisInstance"></child-component1>
?
UPDATE 1: I'm looking for a way which allows to definitely provide a parent to a child meaning that if the child has two or more parents of the same component type on different levels of hierarchy, we would be able to definitely specify which one has to be used.
UPDATE 2: I'm looking for an approach without limiting the child what exact type of the parent could be used. So, I'm not sure if injecting a parent into child's constructor using some base class (which is implemented by the parent) as token would work.
angular typescript angular-components
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
1
That's generally not good practice anyway. You should be communicating between the parent and the child using template bindings, not passing the entire object in.
– John Montgomery
Nov 27 '18 at 0:22
[parent]="this"should work
– yurzui
Nov 27 '18 at 3:45
@yurzui: That works, thank you! Could you post an answer so I'm able to accept it? I created a demo Stackblitz.
– Alexander Abakumov
Nov 28 '18 at 21:54
add a comment |
Suppose we need to bind some child component property to a component instance itself in a template:
<child-component parent="???"></child-component1>
Is there a way to do it except declaring a dedicated property on the parent component:
public thisInstance: ParentComponent = this;
and then using it:
<child-component parent="thisInstance"></child-component1>
?
UPDATE 1: I'm looking for a way which allows to definitely provide a parent to a child meaning that if the child has two or more parents of the same component type on different levels of hierarchy, we would be able to definitely specify which one has to be used.
UPDATE 2: I'm looking for an approach without limiting the child what exact type of the parent could be used. So, I'm not sure if injecting a parent into child's constructor using some base class (which is implemented by the parent) as token would work.
angular typescript angular-components
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
Suppose we need to bind some child component property to a component instance itself in a template:
<child-component parent="???"></child-component1>
Is there a way to do it except declaring a dedicated property on the parent component:
public thisInstance: ParentComponent = this;
and then using it:
<child-component parent="thisInstance"></child-component1>
?
UPDATE 1: I'm looking for a way which allows to definitely provide a parent to a child meaning that if the child has two or more parents of the same component type on different levels of hierarchy, we would be able to definitely specify which one has to be used.
UPDATE 2: I'm looking for an approach without limiting the child what exact type of the parent could be used. So, I'm not sure if injecting a parent into child's constructor using some base class (which is implemented by the parent) as token would work.
angular typescript angular-components
angular typescript angular-components
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
edited Nov 27 '18 at 15:16
Alexander Abakumov
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
asked Nov 27 '18 at 0:17
Alexander AbakumovAlexander Abakumov
4,65844269
4,65844269
1
That's generally not good practice anyway. You should be communicating between the parent and the child using template bindings, not passing the entire object in.
– John Montgomery
Nov 27 '18 at 0:22
[parent]="this"should work
– yurzui
Nov 27 '18 at 3:45
@yurzui: That works, thank you! Could you post an answer so I'm able to accept it? I created a demo Stackblitz.
– Alexander Abakumov
Nov 28 '18 at 21:54
add a comment |
1
That's generally not good practice anyway. You should be communicating between the parent and the child using template bindings, not passing the entire object in.
– John Montgomery
Nov 27 '18 at 0:22
[parent]="this"should work
– yurzui
Nov 27 '18 at 3:45
@yurzui: That works, thank you! Could you post an answer so I'm able to accept it? I created a demo Stackblitz.
– Alexander Abakumov
Nov 28 '18 at 21:54
1
1
That's generally not good practice anyway. You should be communicating between the parent and the child using template bindings, not passing the entire object in.
– John Montgomery
Nov 27 '18 at 0:22
That's generally not good practice anyway. You should be communicating between the parent and the child using template bindings, not passing the entire object in.
– John Montgomery
Nov 27 '18 at 0:22
[parent]="this" should work– yurzui
Nov 27 '18 at 3:45
[parent]="this" should work– yurzui
Nov 27 '18 at 3:45
@yurzui: That works, thank you! Could you post an answer so I'm able to accept it? I created a demo Stackblitz.
– Alexander Abakumov
Nov 28 '18 at 21:54
@yurzui: That works, thank you! Could you post an answer so I'm able to accept it? I created a demo Stackblitz.
– Alexander Abakumov
Nov 28 '18 at 21:54
add a comment |
2 Answers
2
active
oldest
votes
You can try binding HTML with #selector, for example:
<child-component1 #parent [parent]="parent"></child-component1>
And then you can declare a parent as @Input() in child-component1.
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
1
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
add a comment |
You can inject parent component inside child component constructor like this
export class childComponent{
constructor(private parent: ParentComponent){}
}
To accomodate both updates, you can create a service injectable class and assign the parent component instance in parent component oninit(), the same instance will be used in child component.
@Injectable()
export class Service{
private compInstance;
setComponentInstance(_instance){
this.compInstance = _instance;
}
getComponentInstance(_instance){
this.compInstance = _instance;
}
}
Parent Component
export class Parent{
this.service.setComponentInstance(this);
}
Child Component:
this.service.getComponentInstance();
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
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%2f53491003%2faccessing-this-component-instance-from-a-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can try binding HTML with #selector, for example:
<child-component1 #parent [parent]="parent"></child-component1>
And then you can declare a parent as @Input() in child-component1.
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
1
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
add a comment |
You can try binding HTML with #selector, for example:
<child-component1 #parent [parent]="parent"></child-component1>
And then you can declare a parent as @Input() in child-component1.
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
1
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
add a comment |
You can try binding HTML with #selector, for example:
<child-component1 #parent [parent]="parent"></child-component1>
And then you can declare a parent as @Input() in child-component1.
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
You can try binding HTML with #selector, for example:
<child-component1 #parent [parent]="parent"></child-component1>
And then you can declare a parent as @Input() in child-component1.
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
answered Nov 27 '18 at 0:24
Carlos OsielCarlos Osiel
1718
1718
1
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
add a comment |
1
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
1
1
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
How would you use this technique to pass the parent component to the child? In your example, you pass the child to itself (which is not very useful).
– ConnorsFan
Nov 27 '18 at 0:37
add a comment |
You can inject parent component inside child component constructor like this
export class childComponent{
constructor(private parent: ParentComponent){}
}
To accomodate both updates, you can create a service injectable class and assign the parent component instance in parent component oninit(), the same instance will be used in child component.
@Injectable()
export class Service{
private compInstance;
setComponentInstance(_instance){
this.compInstance = _instance;
}
getComponentInstance(_instance){
this.compInstance = _instance;
}
}
Parent Component
export class Parent{
this.service.setComponentInstance(this);
}
Child Component:
this.service.getComponentInstance();
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
add a comment |
You can inject parent component inside child component constructor like this
export class childComponent{
constructor(private parent: ParentComponent){}
}
To accomodate both updates, you can create a service injectable class and assign the parent component instance in parent component oninit(), the same instance will be used in child component.
@Injectable()
export class Service{
private compInstance;
setComponentInstance(_instance){
this.compInstance = _instance;
}
getComponentInstance(_instance){
this.compInstance = _instance;
}
}
Parent Component
export class Parent{
this.service.setComponentInstance(this);
}
Child Component:
this.service.getComponentInstance();
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
add a comment |
You can inject parent component inside child component constructor like this
export class childComponent{
constructor(private parent: ParentComponent){}
}
To accomodate both updates, you can create a service injectable class and assign the parent component instance in parent component oninit(), the same instance will be used in child component.
@Injectable()
export class Service{
private compInstance;
setComponentInstance(_instance){
this.compInstance = _instance;
}
getComponentInstance(_instance){
this.compInstance = _instance;
}
}
Parent Component
export class Parent{
this.service.setComponentInstance(this);
}
Child Component:
this.service.getComponentInstance();
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
You can inject parent component inside child component constructor like this
export class childComponent{
constructor(private parent: ParentComponent){}
}
To accomodate both updates, you can create a service injectable class and assign the parent component instance in parent component oninit(), the same instance will be used in child component.
@Injectable()
export class Service{
private compInstance;
setComponentInstance(_instance){
this.compInstance = _instance;
}
getComponentInstance(_instance){
this.compInstance = _instance;
}
}
Parent Component
export class Parent{
this.service.setComponentInstance(this);
}
Child Component:
this.service.getComponentInstance();
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
edited Nov 29 '18 at 4:04
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
answered Nov 27 '18 at 0:24
Suresh Kumar AriyaSuresh Kumar Ariya
4,7211215
4,7211215
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
add a comment |
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
Thank you and excuse me for not mentioning some details in the first place! Could you check both updates in my question to see if your approach would satisfy those requirements, please?
– Alexander Abakumov
Nov 27 '18 at 15:18
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
This approach won't fit this use case. Updated above.
– Suresh Kumar Ariya
Nov 29 '18 at 3:58
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%2f53491003%2faccessing-this-component-instance-from-a-template%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
That's generally not good practice anyway. You should be communicating between the parent and the child using template bindings, not passing the entire object in.
– John Montgomery
Nov 27 '18 at 0:22
[parent]="this"should work– yurzui
Nov 27 '18 at 3:45
@yurzui: That works, thank you! Could you post an answer so I'm able to accept it? I created a demo Stackblitz.
– Alexander Abakumov
Nov 28 '18 at 21:54