ng-repeat pass to the component
Hi i am very new to angularjs web development with typescript and really stuck with a problem. I dont think it should be a hard problem yet i have spent two days on it.
I am trying to figure out how i can pass the value of an ng-repeat from a list to a child component when it's being constucted or initiated.
What i mean is, if i have a list([1, 2, 3, 4]) from the parent component that is used to generate 4 child components is there a way for each of the child components to assign a variable "id" to the value associated to the value of the repeat.
for example
<span ng-repeat=variable in list>
<child-tag></child-tag>
</span>
Is it possible to somehow pass the variable into the constructor of the component from the tags or something?
Just to reiterate, I have coded this using typesccript with angularjs not angular 2.
Cheers in advance for the help.
And sorry in advance for what is probably a very simple answer but cant find it anywhere.
angularjs angularjs-ng-repeat angularjs-components
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
asked Oct 28 '18 at 22:19
J.k
612
add a comment |
Hi i am very new to angularjs web development with typescript and really stuck with a problem. I dont think it should be a hard problem yet i have spent two days on it.
I am trying to figure out how i can pass the value of an ng-repeat from a list to a child component when it's being constucted or initiated.
What i mean is, if i have a list([1, 2, 3, 4]) from the parent component that is used to generate 4 child components is there a way for each of the child components to assign a variable "id" to the value associated to the value of the repeat.
for example
<span ng-repeat=variable in list>
<child-tag></child-tag>
</span>
Is it possible to somehow pass the variable into the constructor of the component from the tags or something?
Just to reiterate, I have coded this using typesccript with angularjs not angular 2.
Cheers in advance for the help.
And sorry in advance for what is probably a very simple answer but cant find it anywhere.
angularjs angularjs-ng-repeat angularjs-components
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
asked Oct 28 '18 at 22:19
J.k
612
Read about directives
– Aluan Haddad
Oct 28 '18 at 22:22
@AluanHaddad is that another way of saying its not possible :( ? Is it difficult to convert an already built component into a directive? oh and thanks for your comment
– J.k
Oct 28 '18 at 22:27
1
Components have inputs. That's how you pass information to them. docs.angularjs.org/guide/component
– JB Nizet
Oct 28 '18 at 22:27
@J.k quite the contrary, it is a way of saying that it is possible. A component is just a kind of directive
– Aluan Haddad
Oct 29 '18 at 12:43
add a comment |
Hi i am very new to angularjs web development with typescript and really stuck with a problem. I dont think it should be a hard problem yet i have spent two days on it.
I am trying to figure out how i can pass the value of an ng-repeat from a list to a child component when it's being constucted or initiated.
What i mean is, if i have a list([1, 2, 3, 4]) from the parent component that is used to generate 4 child components is there a way for each of the child components to assign a variable "id" to the value associated to the value of the repeat.
for example
<span ng-repeat=variable in list>
<child-tag></child-tag>
</span>
Is it possible to somehow pass the variable into the constructor of the component from the tags or something?
Just to reiterate, I have coded this using typesccript with angularjs not angular 2.
Cheers in advance for the help.
And sorry in advance for what is probably a very simple answer but cant find it anywhere.
angularjs angularjs-ng-repeat angularjs-components
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
asked Oct 28 '18 at 22:19
J.k
612
Hi i am very new to angularjs web development with typescript and really stuck with a problem. I dont think it should be a hard problem yet i have spent two days on it.
I am trying to figure out how i can pass the value of an ng-repeat from a list to a child component when it's being constucted or initiated.
What i mean is, if i have a list([1, 2, 3, 4]) from the parent component that is used to generate 4 child components is there a way for each of the child components to assign a variable "id" to the value associated to the value of the repeat.
for example
<span ng-repeat=variable in list>
<child-tag></child-tag>
</span>
Is it possible to somehow pass the variable into the constructor of the component from the tags or something?
Just to reiterate, I have coded this using typesccript with angularjs not angular 2.
Cheers in advance for the help.
And sorry in advance for what is probably a very simple answer but cant find it anywhere.
angularjs angularjs-ng-repeat angularjs-components
angularjs angularjs-ng-repeat angularjs-components
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
asked Oct 28 '18 at 22:19
J.k
612
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
asked Oct 28 '18 at 22:19
J.k
612
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
edited Oct 29 '18 at 13:51
georgeawg
32.7k104967
32.7k104967
asked Oct 28 '18 at 22:19
J.k
612
asked Oct 28 '18 at 22:19
J.k
612
asked Oct 28 '18 at 22:19
J.k
612
612
Read about directives
– Aluan Haddad
Oct 28 '18 at 22:22
@AluanHaddad is that another way of saying its not possible :( ? Is it difficult to convert an already built component into a directive? oh and thanks for your comment
– J.k
Oct 28 '18 at 22:27
1
Components have inputs. That's how you pass information to them. docs.angularjs.org/guide/component
– JB Nizet
Oct 28 '18 at 22:27
@J.k quite the contrary, it is a way of saying that it is possible. A component is just a kind of directive
– Aluan Haddad
Oct 29 '18 at 12:43
add a comment |
Read about directives
– Aluan Haddad
Oct 28 '18 at 22:22
@AluanHaddad is that another way of saying its not possible :( ? Is it difficult to convert an already built component into a directive? oh and thanks for your comment
– J.k
Oct 28 '18 at 22:27
1
Components have inputs. That's how you pass information to them. docs.angularjs.org/guide/component
– JB Nizet
Oct 28 '18 at 22:27
@J.k quite the contrary, it is a way of saying that it is possible. A component is just a kind of directive
– Aluan Haddad
Oct 29 '18 at 12:43
Read about directives
– Aluan Haddad
Oct 28 '18 at 22:22
Read about directives
– Aluan Haddad
Oct 28 '18 at 22:22
@AluanHaddad is that another way of saying its not possible :( ? Is it difficult to convert an already built component into a directive? oh and thanks for your comment
– J.k
Oct 28 '18 at 22:27
@AluanHaddad is that another way of saying its not possible :( ? Is it difficult to convert an already built component into a directive? oh and thanks for your comment
– J.k
Oct 28 '18 at 22:27
1
1
Components have inputs. That's how you pass information to them. docs.angularjs.org/guide/component
– JB Nizet
Oct 28 '18 at 22:27
Components have inputs. That's how you pass information to them. docs.angularjs.org/guide/component
– JB Nizet
Oct 28 '18 at 22:27
@J.k quite the contrary, it is a way of saying that it is possible. A component is just a kind of directive
– Aluan Haddad
Oct 29 '18 at 12:43
@J.k quite the contrary, it is a way of saying that it is possible. A component is just a kind of directive
– Aluan Haddad
Oct 29 '18 at 12:43
add a comment |
1 Answer
1
active
oldest
votes
You can pass the data from parent to child component using Input.
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since v1.5.
=: Two way binding. It uses dirty checking and can cause latency. It also watches bound properties in the component scope.
So if you need to pass some data to child component, you need to bind some attribute value to it . Ex:
<span ng-repeat="variable in list">
<child-tag variable-name="variable.name" ></child-tag>
</span>
Inside your child component declaration bind these values so that you can access them:
angular.module('myApp', ).component('childComponent', {
bindings: {
variableName: '<'
},
controller: ....
You can access these values inside your component class using: this.variableName
You can choose to have one way or two binding as needed and can have as many objects/attributes passed to child as you want.
edited Nov 20 '18 at 22:26
Stone
2,1621821
answered Nov 20 '18 at 21:48
nircraft
1,138118
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
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%2f53036576%2fng-repeat-pass-to-the-component%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
You can pass the data from parent to child component using Input.
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since v1.5.
=: Two way binding. It uses dirty checking and can cause latency. It also watches bound properties in the component scope.
So if you need to pass some data to child component, you need to bind some attribute value to it . Ex:
<span ng-repeat="variable in list">
<child-tag variable-name="variable.name" ></child-tag>
</span>
Inside your child component declaration bind these values so that you can access them:
angular.module('myApp', ).component('childComponent', {
bindings: {
variableName: '<'
},
controller: ....
You can access these values inside your component class using: this.variableName
You can choose to have one way or two binding as needed and can have as many objects/attributes passed to child as you want.
edited Nov 20 '18 at 22:26
Stone
2,1621821
answered Nov 20 '18 at 21:48
nircraft
1,138118
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
add a comment |
You can pass the data from parent to child component using Input.
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since v1.5.
=: Two way binding. It uses dirty checking and can cause latency. It also watches bound properties in the component scope.
So if you need to pass some data to child component, you need to bind some attribute value to it . Ex:
<span ng-repeat="variable in list">
<child-tag variable-name="variable.name" ></child-tag>
</span>
Inside your child component declaration bind these values so that you can access them:
angular.module('myApp', ).component('childComponent', {
bindings: {
variableName: '<'
},
controller: ....
You can access these values inside your component class using: this.variableName
You can choose to have one way or two binding as needed and can have as many objects/attributes passed to child as you want.
edited Nov 20 '18 at 22:26
Stone
2,1621821
answered Nov 20 '18 at 21:48
nircraft
1,138118
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
add a comment |
You can pass the data from parent to child component using Input.
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since v1.5.
=: Two way binding. It uses dirty checking and can cause latency. It also watches bound properties in the component scope.
So if you need to pass some data to child component, you need to bind some attribute value to it . Ex:
<span ng-repeat="variable in list">
<child-tag variable-name="variable.name" ></child-tag>
</span>
Inside your child component declaration bind these values so that you can access them:
angular.module('myApp', ).component('childComponent', {
bindings: {
variableName: '<'
},
controller: ....
You can access these values inside your component class using: this.variableName
You can choose to have one way or two binding as needed and can have as many objects/attributes passed to child as you want.
edited Nov 20 '18 at 22:26
Stone
2,1621821
answered Nov 20 '18 at 21:48
nircraft
1,138118
You can pass the data from parent to child component using Input.
Inputs should be using < and @ bindings. The < symbol denotes one-way bindings which are available since v1.5.
=: Two way binding. It uses dirty checking and can cause latency. It also watches bound properties in the component scope.
So if you need to pass some data to child component, you need to bind some attribute value to it . Ex:
<span ng-repeat="variable in list">
<child-tag variable-name="variable.name" ></child-tag>
</span>
Inside your child component declaration bind these values so that you can access them:
angular.module('myApp', ).component('childComponent', {
bindings: {
variableName: '<'
},
controller: ....
You can access these values inside your component class using: this.variableName
You can choose to have one way or two binding as needed and can have as many objects/attributes passed to child as you want.
edited Nov 20 '18 at 22:26
Stone
2,1621821
answered Nov 20 '18 at 21:48
nircraft
1,138118
edited Nov 20 '18 at 22:26
Stone
2,1621821
edited Nov 20 '18 at 22:26
Stone
2,1621821
edited Nov 20 '18 at 22:26
Stone
2,1621821
2,1621821
answered Nov 20 '18 at 21:48
nircraft
1,138118
answered Nov 20 '18 at 21:48
nircraft
1,138118
answered Nov 20 '18 at 21:48
nircraft
1,138118
1,138118
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
add a comment |
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
Thanks for the edit Stone!
– nircraft
Nov 21 '18 at 13:25
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53036576%2fng-repeat-pass-to-the-component%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
Read about directives
– Aluan Haddad
Oct 28 '18 at 22:22
@AluanHaddad is that another way of saying its not possible :( ? Is it difficult to convert an already built component into a directive? oh and thanks for your comment
– J.k
Oct 28 '18 at 22:27
1
Components have inputs. That's how you pass information to them. docs.angularjs.org/guide/component
– JB Nizet
Oct 28 '18 at 22:27
@J.k quite the contrary, it is a way of saying that it is possible. A component is just a kind of directive
– Aluan Haddad
Oct 29 '18 at 12:43