Re using the components in angular
I have a component called list
and it has fab-button
with icon
and tooltip-text
it looks like this:
I thought of making it as generic component, so that i can re-use this component again.So I am reusing the list
component in another components called SCHOOL & COLLEGE like this:
I am re-using list
component fine,but i want to change the fab-button's
icon and the the tooltip text(i,e add-school)
according the component in which it is present.
Means
1) If the list
component is present in SCHOOL
component the fab-button
icon
and tooltip-text
should be different.
2) If the list
component is present in COLLEGE
component the fab-button
icon
and tooltip-text
should be different.
How can i change icons
and tooltip-text
dynamically according to the component ?? I didn't found any resources for components reusability.
Here is the stackblitz DEMO.
angular angular-material angular6
add a comment |
I have a component called list
and it has fab-button
with icon
and tooltip-text
it looks like this:
I thought of making it as generic component, so that i can re-use this component again.So I am reusing the list
component in another components called SCHOOL & COLLEGE like this:
I am re-using list
component fine,but i want to change the fab-button's
icon and the the tooltip text(i,e add-school)
according the component in which it is present.
Means
1) If the list
component is present in SCHOOL
component the fab-button
icon
and tooltip-text
should be different.
2) If the list
component is present in COLLEGE
component the fab-button
icon
and tooltip-text
should be different.
How can i change icons
and tooltip-text
dynamically according to the component ?? I didn't found any resources for components reusability.
Here is the stackblitz DEMO.
angular angular-material angular6
Add yourhtml
and ts to check more information about it
– Rahul
Nov 12 at 6:43
Use an@Input
to pass the value into the list component
– user184994
Nov 12 at 6:44
Since the code is long because of many components, i have createdstackblitz
link. @RahulSwamynathan
– Empty_Soul
Nov 12 at 6:46
This concept is new for for me, if possible please edit instackblitz
.@user184994
– Empty_Soul
Nov 12 at 6:47
We can pass input to the your list component for icon and tooltip
– Sachink
Nov 12 at 6:55
add a comment |
I have a component called list
and it has fab-button
with icon
and tooltip-text
it looks like this:
I thought of making it as generic component, so that i can re-use this component again.So I am reusing the list
component in another components called SCHOOL & COLLEGE like this:
I am re-using list
component fine,but i want to change the fab-button's
icon and the the tooltip text(i,e add-school)
according the component in which it is present.
Means
1) If the list
component is present in SCHOOL
component the fab-button
icon
and tooltip-text
should be different.
2) If the list
component is present in COLLEGE
component the fab-button
icon
and tooltip-text
should be different.
How can i change icons
and tooltip-text
dynamically according to the component ?? I didn't found any resources for components reusability.
Here is the stackblitz DEMO.
angular angular-material angular6
I have a component called list
and it has fab-button
with icon
and tooltip-text
it looks like this:
I thought of making it as generic component, so that i can re-use this component again.So I am reusing the list
component in another components called SCHOOL & COLLEGE like this:
I am re-using list
component fine,but i want to change the fab-button's
icon and the the tooltip text(i,e add-school)
according the component in which it is present.
Means
1) If the list
component is present in SCHOOL
component the fab-button
icon
and tooltip-text
should be different.
2) If the list
component is present in COLLEGE
component the fab-button
icon
and tooltip-text
should be different.
How can i change icons
and tooltip-text
dynamically according to the component ?? I didn't found any resources for components reusability.
Here is the stackblitz DEMO.
angular angular-material angular6
angular angular-material angular6
edited Nov 12 at 7:37
asked Nov 12 at 6:41
Empty_Soul
14610
14610
Add yourhtml
and ts to check more information about it
– Rahul
Nov 12 at 6:43
Use an@Input
to pass the value into the list component
– user184994
Nov 12 at 6:44
Since the code is long because of many components, i have createdstackblitz
link. @RahulSwamynathan
– Empty_Soul
Nov 12 at 6:46
This concept is new for for me, if possible please edit instackblitz
.@user184994
– Empty_Soul
Nov 12 at 6:47
We can pass input to the your list component for icon and tooltip
– Sachink
Nov 12 at 6:55
add a comment |
Add yourhtml
and ts to check more information about it
– Rahul
Nov 12 at 6:43
Use an@Input
to pass the value into the list component
– user184994
Nov 12 at 6:44
Since the code is long because of many components, i have createdstackblitz
link. @RahulSwamynathan
– Empty_Soul
Nov 12 at 6:46
This concept is new for for me, if possible please edit instackblitz
.@user184994
– Empty_Soul
Nov 12 at 6:47
We can pass input to the your list component for icon and tooltip
– Sachink
Nov 12 at 6:55
Add your
html
and ts to check more information about it– Rahul
Nov 12 at 6:43
Add your
html
and ts to check more information about it– Rahul
Nov 12 at 6:43
Use an
@Input
to pass the value into the list component– user184994
Nov 12 at 6:44
Use an
@Input
to pass the value into the list component– user184994
Nov 12 at 6:44
Since the code is long because of many components, i have created
stackblitz
link. @RahulSwamynathan– Empty_Soul
Nov 12 at 6:46
Since the code is long because of many components, i have created
stackblitz
link. @RahulSwamynathan– Empty_Soul
Nov 12 at 6:46
This concept is new for for me, if possible please edit in
stackblitz
.@user184994– Empty_Soul
Nov 12 at 6:47
This concept is new for for me, if possible please edit in
stackblitz
.@user184994– Empty_Soul
Nov 12 at 6:47
We can pass input to the your list component for icon and tooltip
– Sachink
Nov 12 at 6:55
We can pass input to the your list component for icon and tooltip
– Sachink
Nov 12 at 6:55
add a comment |
3 Answers
3
active
oldest
votes
As per your current requirement, you need to have 3 @input
and 1 @Output
@Input()
public tooltip; //<-- pass tooltip text
@Input()
public buttonType; //<-- pass button style class
@Input()
public contacts; //<-- pass contact from the college or school
@Input()
public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.
Working demo is here - https://stackblitz.com/edit/angular-material2-issue-udhiaz
Thanks for the answer, still the the icon insidefab-button
is not changing. i,e<i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
I don't want to change the button, I just want to change theicon
inside the button according to the component.
– Empty_Soul
Nov 12 at 7:33
Changed it tofab-button
– Sunil Singh
Nov 12 at 7:34
Sorry i am bit confused, if possible edit instackblitz
.
– Empty_Soul
Nov 12 at 7:35
1
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
|
show 4 more comments
You should use @Input
for this.
In your list component TS file, add the input property:
@Input()
public tooltip;
In the template, use this value instead of the hardcoded value
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>
Then, you can pass the value in, like so:
<app-list tooltip="Add School"></app-list>
Here is a Stackblitz demo
toltiptip
is changing fine but theicons
are not changing.
– Empty_Soul
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
add a comment |
You can pass data to the list
component as @Input()
property - if its a tooltip
you can just add as string and bind it in your html
- if it icon you can send the icon directly
@Input() tooltips;
while passing from parent <app-list tooltips="Add School"></app-list>
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>
Now the case you want to pass the icon - you can add using content projection
list.component.html
<div>
<mat-selection-list #contact>
<mat-list-option *ngFor="let contact of contacts">
<a mat-list-item><span>{{ contact }}</span> </a>
</mat-list-option>
</mat-selection-list>
<ng-content></ng-content>
</div>
Passing your icon when loading the component
<app-list>
<button mat-fab color="primary" id="add-button" matTooltip="Add School"><i
class="material-icons" >person_add</i></button>
</app-list>
In this way you can change the icons even the tool tips based on the component loaded - if you are changing the icons based on the class
names you can just pass the class name as another @Input()
property to the child
Hope this helps you - Happy coding :)
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%2f53257043%2fre-using-the-components-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
As per your current requirement, you need to have 3 @input
and 1 @Output
@Input()
public tooltip; //<-- pass tooltip text
@Input()
public buttonType; //<-- pass button style class
@Input()
public contacts; //<-- pass contact from the college or school
@Input()
public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.
Working demo is here - https://stackblitz.com/edit/angular-material2-issue-udhiaz
Thanks for the answer, still the the icon insidefab-button
is not changing. i,e<i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
I don't want to change the button, I just want to change theicon
inside the button according to the component.
– Empty_Soul
Nov 12 at 7:33
Changed it tofab-button
– Sunil Singh
Nov 12 at 7:34
Sorry i am bit confused, if possible edit instackblitz
.
– Empty_Soul
Nov 12 at 7:35
1
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
|
show 4 more comments
As per your current requirement, you need to have 3 @input
and 1 @Output
@Input()
public tooltip; //<-- pass tooltip text
@Input()
public buttonType; //<-- pass button style class
@Input()
public contacts; //<-- pass contact from the college or school
@Input()
public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.
Working demo is here - https://stackblitz.com/edit/angular-material2-issue-udhiaz
Thanks for the answer, still the the icon insidefab-button
is not changing. i,e<i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
I don't want to change the button, I just want to change theicon
inside the button according to the component.
– Empty_Soul
Nov 12 at 7:33
Changed it tofab-button
– Sunil Singh
Nov 12 at 7:34
Sorry i am bit confused, if possible edit instackblitz
.
– Empty_Soul
Nov 12 at 7:35
1
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
|
show 4 more comments
As per your current requirement, you need to have 3 @input
and 1 @Output
@Input()
public tooltip; //<-- pass tooltip text
@Input()
public buttonType; //<-- pass button style class
@Input()
public contacts; //<-- pass contact from the college or school
@Input()
public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.
Working demo is here - https://stackblitz.com/edit/angular-material2-issue-udhiaz
As per your current requirement, you need to have 3 @input
and 1 @Output
@Input()
public tooltip; //<-- pass tooltip text
@Input()
public buttonType; //<-- pass button style class
@Input()
public contacts; //<-- pass contact from the college or school
@Input()
public add = new EventEmitter(); //<-- Emit Add event so that it can capture in the respective component College or School.
Working demo is here - https://stackblitz.com/edit/angular-material2-issue-udhiaz
edited Nov 12 at 7:43
answered Nov 12 at 7:29
Sunil Singh
6,1372626
6,1372626
Thanks for the answer, still the the icon insidefab-button
is not changing. i,e<i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
I don't want to change the button, I just want to change theicon
inside the button according to the component.
– Empty_Soul
Nov 12 at 7:33
Changed it tofab-button
– Sunil Singh
Nov 12 at 7:34
Sorry i am bit confused, if possible edit instackblitz
.
– Empty_Soul
Nov 12 at 7:35
1
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
|
show 4 more comments
Thanks for the answer, still the the icon insidefab-button
is not changing. i,e<i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
I don't want to change the button, I just want to change theicon
inside the button according to the component.
– Empty_Soul
Nov 12 at 7:33
Changed it tofab-button
– Sunil Singh
Nov 12 at 7:34
Sorry i am bit confused, if possible edit instackblitz
.
– Empty_Soul
Nov 12 at 7:35
1
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
Thanks for the answer, still the the icon inside
fab-button
is not changing. i,e <i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
Thanks for the answer, still the the icon inside
fab-button
is not changing. i,e <i class="material-icons" >person_add</i>
– Empty_Soul
Nov 12 at 7:32
I don't want to change the button, I just want to change the
icon
inside the button according to the component.– Empty_Soul
Nov 12 at 7:33
I don't want to change the button, I just want to change the
icon
inside the button according to the component.– Empty_Soul
Nov 12 at 7:33
Changed it to
fab-button
– Sunil Singh
Nov 12 at 7:34
Changed it to
fab-button
– Sunil Singh
Nov 12 at 7:34
Sorry i am bit confused, if possible edit in
stackblitz
.– Empty_Soul
Nov 12 at 7:35
Sorry i am bit confused, if possible edit in
stackblitz
.– Empty_Soul
Nov 12 at 7:35
1
1
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
Updated, check here stackblitz.com/edit/angular-material2-issue-udhiaz
– Sunil Singh
Nov 12 at 7:41
|
show 4 more comments
You should use @Input
for this.
In your list component TS file, add the input property:
@Input()
public tooltip;
In the template, use this value instead of the hardcoded value
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>
Then, you can pass the value in, like so:
<app-list tooltip="Add School"></app-list>
Here is a Stackblitz demo
toltiptip
is changing fine but theicons
are not changing.
– Empty_Soul
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
add a comment |
You should use @Input
for this.
In your list component TS file, add the input property:
@Input()
public tooltip;
In the template, use this value instead of the hardcoded value
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>
Then, you can pass the value in, like so:
<app-list tooltip="Add School"></app-list>
Here is a Stackblitz demo
toltiptip
is changing fine but theicons
are not changing.
– Empty_Soul
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
add a comment |
You should use @Input
for this.
In your list component TS file, add the input property:
@Input()
public tooltip;
In the template, use this value instead of the hardcoded value
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>
Then, you can pass the value in, like so:
<app-list tooltip="Add School"></app-list>
Here is a Stackblitz demo
You should use @Input
for this.
In your list component TS file, add the input property:
@Input()
public tooltip;
In the template, use this value instead of the hardcoded value
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltip"><i class="material-icons" >person_add</i></button>
Then, you can pass the value in, like so:
<app-list tooltip="Add School"></app-list>
Here is a Stackblitz demo
answered Nov 12 at 6:52
user184994
11k11727
11k11727
toltiptip
is changing fine but theicons
are not changing.
– Empty_Soul
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
add a comment |
toltiptip
is changing fine but theicons
are not changing.
– Empty_Soul
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
toltiptip
is changing fine but the icons
are not changing.– Empty_Soul
Nov 12 at 6:54
toltiptip
is changing fine but the icons
are not changing.– Empty_Soul
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
Yep, I just gave an example. You just need to do exactly the same thing but for the icons
– user184994
Nov 12 at 6:54
add a comment |
You can pass data to the list
component as @Input()
property - if its a tooltip
you can just add as string and bind it in your html
- if it icon you can send the icon directly
@Input() tooltips;
while passing from parent <app-list tooltips="Add School"></app-list>
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>
Now the case you want to pass the icon - you can add using content projection
list.component.html
<div>
<mat-selection-list #contact>
<mat-list-option *ngFor="let contact of contacts">
<a mat-list-item><span>{{ contact }}</span> </a>
</mat-list-option>
</mat-selection-list>
<ng-content></ng-content>
</div>
Passing your icon when loading the component
<app-list>
<button mat-fab color="primary" id="add-button" matTooltip="Add School"><i
class="material-icons" >person_add</i></button>
</app-list>
In this way you can change the icons even the tool tips based on the component loaded - if you are changing the icons based on the class
names you can just pass the class name as another @Input()
property to the child
Hope this helps you - Happy coding :)
add a comment |
You can pass data to the list
component as @Input()
property - if its a tooltip
you can just add as string and bind it in your html
- if it icon you can send the icon directly
@Input() tooltips;
while passing from parent <app-list tooltips="Add School"></app-list>
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>
Now the case you want to pass the icon - you can add using content projection
list.component.html
<div>
<mat-selection-list #contact>
<mat-list-option *ngFor="let contact of contacts">
<a mat-list-item><span>{{ contact }}</span> </a>
</mat-list-option>
</mat-selection-list>
<ng-content></ng-content>
</div>
Passing your icon when loading the component
<app-list>
<button mat-fab color="primary" id="add-button" matTooltip="Add School"><i
class="material-icons" >person_add</i></button>
</app-list>
In this way you can change the icons even the tool tips based on the component loaded - if you are changing the icons based on the class
names you can just pass the class name as another @Input()
property to the child
Hope this helps you - Happy coding :)
add a comment |
You can pass data to the list
component as @Input()
property - if its a tooltip
you can just add as string and bind it in your html
- if it icon you can send the icon directly
@Input() tooltips;
while passing from parent <app-list tooltips="Add School"></app-list>
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>
Now the case you want to pass the icon - you can add using content projection
list.component.html
<div>
<mat-selection-list #contact>
<mat-list-option *ngFor="let contact of contacts">
<a mat-list-item><span>{{ contact }}</span> </a>
</mat-list-option>
</mat-selection-list>
<ng-content></ng-content>
</div>
Passing your icon when loading the component
<app-list>
<button mat-fab color="primary" id="add-button" matTooltip="Add School"><i
class="material-icons" >person_add</i></button>
</app-list>
In this way you can change the icons even the tool tips based on the component loaded - if you are changing the icons based on the class
names you can just pass the class name as another @Input()
property to the child
Hope this helps you - Happy coding :)
You can pass data to the list
component as @Input()
property - if its a tooltip
you can just add as string and bind it in your html
- if it icon you can send the icon directly
@Input() tooltips;
while passing from parent <app-list tooltips="Add School"></app-list>
<button mat-fab color="primary" id="add-button" [matTooltip]="tooltips"><i class="material-icons" >person_add</i></button>
Now the case you want to pass the icon - you can add using content projection
list.component.html
<div>
<mat-selection-list #contact>
<mat-list-option *ngFor="let contact of contacts">
<a mat-list-item><span>{{ contact }}</span> </a>
</mat-list-option>
</mat-selection-list>
<ng-content></ng-content>
</div>
Passing your icon when loading the component
<app-list>
<button mat-fab color="primary" id="add-button" matTooltip="Add School"><i
class="material-icons" >person_add</i></button>
</app-list>
In this way you can change the icons even the tool tips based on the component loaded - if you are changing the icons based on the class
names you can just pass the class name as another @Input()
property to the child
Hope this helps you - Happy coding :)
answered Nov 12 at 7:01
Rahul
9631315
9631315
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.
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%2f53257043%2fre-using-the-components-in-angular%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
Add your
html
and ts to check more information about it– Rahul
Nov 12 at 6:43
Use an
@Input
to pass the value into the list component– user184994
Nov 12 at 6:44
Since the code is long because of many components, i have created
stackblitz
link. @RahulSwamynathan– Empty_Soul
Nov 12 at 6:46
This concept is new for for me, if possible please edit in
stackblitz
.@user184994– Empty_Soul
Nov 12 at 6:47
We can pass input to the your list component for icon and tooltip
– Sachink
Nov 12 at 6:55