To display 1st list-item value from mat-selection-list in another component by default
I have 2 components called:
1)list (used to display customer list)
2)detail (used to display customer details)
These two components are generic components,So i am re using these components inside another component called customer.which will be displayed as shown in below image:
Here on clicking particular customer name(ex customer one) on list component, I am displaying that customer values(ex Name and age) on details component(i,e Customer details).This scenario working fine.
But i want first list-item(i,e customer one) to be highlighted and its value(i,e name and age) to be displayed on the details component by default. like this:
Stackblitz Link
angular typescript angular6 angular-components
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
add a comment |
I have 2 components called:
1)list (used to display customer list)
2)detail (used to display customer details)
These two components are generic components,So i am re using these components inside another component called customer.which will be displayed as shown in below image:
Here on clicking particular customer name(ex customer one) on list component, I am displaying that customer values(ex Name and age) on details component(i,e Customer details).This scenario working fine.
But i want first list-item(i,e customer one) to be highlighted and its value(i,e name and age) to be displayed on the details component by default. like this:
Stackblitz Link
angular typescript angular6 angular-components
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
add a comment |
I have 2 components called:
1)list (used to display customer list)
2)detail (used to display customer details)
These two components are generic components,So i am re using these components inside another component called customer.which will be displayed as shown in below image:
Here on clicking particular customer name(ex customer one) on list component, I am displaying that customer values(ex Name and age) on details component(i,e Customer details).This scenario working fine.
But i want first list-item(i,e customer one) to be highlighted and its value(i,e name and age) to be displayed on the details component by default. like this:
Stackblitz Link
angular typescript angular6 angular-components
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
I have 2 components called:
1)list (used to display customer list)
2)detail (used to display customer details)
These two components are generic components,So i am re using these components inside another component called customer.which will be displayed as shown in below image:
Here on clicking particular customer name(ex customer one) on list component, I am displaying that customer values(ex Name and age) on details component(i,e Customer details).This scenario working fine.
But i want first list-item(i,e customer one) to be highlighted and its value(i,e name and age) to be displayed on the details component by default. like this:
Stackblitz Link
angular typescript angular6 angular-components
angular typescript angular6 angular-components
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
asked Nov 14 '18 at 9:01
PrashanthPrashanth
357213
357213
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can emit the first value once the ListComponent is loaded.
ts
export class ListComponent {
ngOnInit()
if (this.contacts && this.contacts.length > 0)
this.select.emit(this.contacts[0]); //<-- emit the first value
html
<mat-selection-list #contact>
<mat-list-option
[ngClass]="selected : contact.name == currentContact.name"
*ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)"><span> contact.name </span> </a>
</mat-list-option>
</mat-selection-list>
Here is the working copy - https://stackblitz.com/edit/list-examples-mine-mgshnt
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
In the list component, Means thefirst list-item (i,e customer-one)should beselected/highlightedby default..
– Prashanth
Nov 14 '18 at 9:20
Check the updated answer and link. I added the classselectedinmat-list-optionbut you can change as per requirement.
– Sunil Singh
Nov 14 '18 at 9:24
I have seen thestackblitzlink,it's not highlighting the first customer.
– Prashanth
Nov 14 '18 at 9:26
|
show 8 more comments
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%2f53296357%2fto-display-1st-list-item-value-from-mat-selection-list-in-another-component-by-d%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 emit the first value once the ListComponent is loaded.
ts
export class ListComponent {
ngOnInit()
if (this.contacts && this.contacts.length > 0)
this.select.emit(this.contacts[0]); //<-- emit the first value
html
<mat-selection-list #contact>
<mat-list-option
[ngClass]="selected : contact.name == currentContact.name"
*ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)"><span> contact.name </span> </a>
</mat-list-option>
</mat-selection-list>
Here is the working copy - https://stackblitz.com/edit/list-examples-mine-mgshnt
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
In the list component, Means thefirst list-item (i,e customer-one)should beselected/highlightedby default..
– Prashanth
Nov 14 '18 at 9:20
Check the updated answer and link. I added the classselectedinmat-list-optionbut you can change as per requirement.
– Sunil Singh
Nov 14 '18 at 9:24
I have seen thestackblitzlink,it's not highlighting the first customer.
– Prashanth
Nov 14 '18 at 9:26
|
show 8 more comments
You can emit the first value once the ListComponent is loaded.
ts
export class ListComponent {
ngOnInit()
if (this.contacts && this.contacts.length > 0)
this.select.emit(this.contacts[0]); //<-- emit the first value
html
<mat-selection-list #contact>
<mat-list-option
[ngClass]="selected : contact.name == currentContact.name"
*ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)"><span> contact.name </span> </a>
</mat-list-option>
</mat-selection-list>
Here is the working copy - https://stackblitz.com/edit/list-examples-mine-mgshnt
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
In the list component, Means thefirst list-item (i,e customer-one)should beselected/highlightedby default..
– Prashanth
Nov 14 '18 at 9:20
Check the updated answer and link. I added the classselectedinmat-list-optionbut you can change as per requirement.
– Sunil Singh
Nov 14 '18 at 9:24
I have seen thestackblitzlink,it's not highlighting the first customer.
– Prashanth
Nov 14 '18 at 9:26
|
show 8 more comments
You can emit the first value once the ListComponent is loaded.
ts
export class ListComponent {
ngOnInit()
if (this.contacts && this.contacts.length > 0)
this.select.emit(this.contacts[0]); //<-- emit the first value
html
<mat-selection-list #contact>
<mat-list-option
[ngClass]="selected : contact.name == currentContact.name"
*ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)"><span> contact.name </span> </a>
</mat-list-option>
</mat-selection-list>
Here is the working copy - https://stackblitz.com/edit/list-examples-mine-mgshnt
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
You can emit the first value once the ListComponent is loaded.
ts
export class ListComponent {
ngOnInit()
if (this.contacts && this.contacts.length > 0)
this.select.emit(this.contacts[0]); //<-- emit the first value
html
<mat-selection-list #contact>
<mat-list-option
[ngClass]="selected : contact.name == currentContact.name"
*ngFor="let contact of contacts">
<a mat-list-item (click)="onSelect(contact)"><span> contact.name </span> </a>
</mat-list-option>
</mat-selection-list>
Here is the working copy - https://stackblitz.com/edit/list-examples-mine-mgshnt
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
edited Nov 14 '18 at 9:23
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
answered Nov 14 '18 at 9:12
Sunil SinghSunil Singh
6,2772626
6,2772626
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
In the list component, Means thefirst list-item (i,e customer-one)should beselected/highlightedby default..
– Prashanth
Nov 14 '18 at 9:20
Check the updated answer and link. I added the classselectedinmat-list-optionbut you can change as per requirement.
– Sunil Singh
Nov 14 '18 at 9:24
I have seen thestackblitzlink,it's not highlighting the first customer.
– Prashanth
Nov 14 '18 at 9:26
|
show 8 more comments
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
In the list component, Means thefirst list-item (i,e customer-one)should beselected/highlightedby default..
– Prashanth
Nov 14 '18 at 9:20
Check the updated answer and link. I added the classselectedinmat-list-optionbut you can change as per requirement.
– Sunil Singh
Nov 14 '18 at 9:24
I have seen thestackblitzlink,it's not highlighting the first customer.
– Prashanth
Nov 14 '18 at 9:26
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
Thanks for the answer, is it possible highlight the first customer??
– Prashanth
Nov 14 '18 at 9:15
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
What class and where you want to put for highlighting ?
– Sunil Singh
Nov 14 '18 at 9:19
In the list component, Means the
first list-item (i,e customer-one) should be selected/highlighted by default..– Prashanth
Nov 14 '18 at 9:20
In the list component, Means the
first list-item (i,e customer-one) should be selected/highlighted by default..– Prashanth
Nov 14 '18 at 9:20
Check the updated answer and link. I added the class
selected in mat-list-option but you can change as per requirement.– Sunil Singh
Nov 14 '18 at 9:24
Check the updated answer and link. I added the class
selected in mat-list-option but you can change as per requirement.– Sunil Singh
Nov 14 '18 at 9:24
I have seen the
stackblitz link,it's not highlighting the first customer.– Prashanth
Nov 14 '18 at 9:26
I have seen the
stackblitz link,it's not highlighting the first customer.– Prashanth
Nov 14 '18 at 9:26
|
show 8 more comments
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%2f53296357%2fto-display-1st-list-item-value-from-mat-selection-list-in-another-component-by-d%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
