How can i set a default value in component to a Mat-select triggering (change)
Hello i am trying to set a default value in a mat-select with multiple options in the component.ts, and i am managing to do so, but when i set a default value programatically the method that is supposed to execute when the value changes, does not execute, unless i change the value manually, i'm using (change) directive trigger to the method, is there anything else that i can use? like another directive.
I´m using ngModel to set the default value at the moment, setting a value to object.attribute
<mat-select [compareWith]="compareBasic" id="object" name="object"
[(ngModel)]="object.attribute" (change)="methodThatIWantToTrigger" class="full-width"
required> </mat-select>
I should have multiple options in the mat-select, but if there is only one option i want to select that value by default, and i need to know that value that is select in order to get some data from the database. i'm doing something like so:
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
}
but this leads to some errors or fails.
angular5 angular-material2
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
add a comment |
Hello i am trying to set a default value in a mat-select with multiple options in the component.ts, and i am managing to do so, but when i set a default value programatically the method that is supposed to execute when the value changes, does not execute, unless i change the value manually, i'm using (change) directive trigger to the method, is there anything else that i can use? like another directive.
I´m using ngModel to set the default value at the moment, setting a value to object.attribute
<mat-select [compareWith]="compareBasic" id="object" name="object"
[(ngModel)]="object.attribute" (change)="methodThatIWantToTrigger" class="full-width"
required> </mat-select>
I should have multiple options in the mat-select, but if there is only one option i want to select that value by default, and i need to know that value that is select in order to get some data from the database. i'm doing something like so:
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
}
but this leads to some errors or fails.
angular5 angular-material2
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
add a comment |
Hello i am trying to set a default value in a mat-select with multiple options in the component.ts, and i am managing to do so, but when i set a default value programatically the method that is supposed to execute when the value changes, does not execute, unless i change the value manually, i'm using (change) directive trigger to the method, is there anything else that i can use? like another directive.
I´m using ngModel to set the default value at the moment, setting a value to object.attribute
<mat-select [compareWith]="compareBasic" id="object" name="object"
[(ngModel)]="object.attribute" (change)="methodThatIWantToTrigger" class="full-width"
required> </mat-select>
I should have multiple options in the mat-select, but if there is only one option i want to select that value by default, and i need to know that value that is select in order to get some data from the database. i'm doing something like so:
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
}
but this leads to some errors or fails.
angular5 angular-material2
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
Hello i am trying to set a default value in a mat-select with multiple options in the component.ts, and i am managing to do so, but when i set a default value programatically the method that is supposed to execute when the value changes, does not execute, unless i change the value manually, i'm using (change) directive trigger to the method, is there anything else that i can use? like another directive.
I´m using ngModel to set the default value at the moment, setting a value to object.attribute
<mat-select [compareWith]="compareBasic" id="object" name="object"
[(ngModel)]="object.attribute" (change)="methodThatIWantToTrigger" class="full-width"
required> </mat-select>
I should have multiple options in the mat-select, but if there is only one option i want to select that value by default, and i need to know that value that is select in order to get some data from the database. i'm doing something like so:
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
}
but this leads to some errors or fails.
angular5 angular-material2
angular5 angular-material2
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
edited Nov 22 '18 at 17:29
coder Tester
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
asked Nov 22 '18 at 10:47
coder Testercoder Tester
538
538
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Since you have 2 way data binding with [(ngModel)] you can use (ngModelChange) instead of (change) . It fires when the value changes.
this is stackblitz example
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
|
show 2 more comments
It's because mat-select has selectionChange event and it's only fired up when user change it
Event emitted when the selected value has been changed by the user.
(angular material docs)
If you want to emit this selectionChange you would have to try with programatically fire event, but you should avoid it. Maybe you can call this method inside your code? Give us your use case, maybe there is a better way.
EDIT
Due to your use case, you could go with ChangeDetectorRef.detectChanges(), so basicly, if you set your default value and you want to be sure, that it is selected in UI you can do something like this. It's a bit hacky, but it will work.
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
// this will force to refresh value in mat-select
this.cdr.detectChanges()
// here you can call your `methodThatIWantToTrigger` becaucse the view is updated.
}
Also don't forget to add it in your constructor in component.ts and import it Change
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) { }
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
|
show 2 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%2f53429224%2fhow-can-i-set-a-default-value-in-component-to-a-mat-select-triggering-change%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
Since you have 2 way data binding with [(ngModel)] you can use (ngModelChange) instead of (change) . It fires when the value changes.
this is stackblitz example
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
|
show 2 more comments
Since you have 2 way data binding with [(ngModel)] you can use (ngModelChange) instead of (change) . It fires when the value changes.
this is stackblitz example
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
|
show 2 more comments
Since you have 2 way data binding with [(ngModel)] you can use (ngModelChange) instead of (change) . It fires when the value changes.
this is stackblitz example
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
Since you have 2 way data binding with [(ngModel)] you can use (ngModelChange) instead of (change) . It fires when the value changes.
this is stackblitz example
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
answered Nov 22 '18 at 11:12
AsankaAsanka
1,085416
1,085416
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
|
show 2 more comments
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Thank you for the help tho, but it is also not working, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
Dcan you show the exact mat-select code part.or stackblitz uploaded one?
– Asanka
Nov 22 '18 at 11:28
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
i have made a new edit
– coder Tester
Nov 22 '18 at 11:37
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Value should be => [value] and objcect.attribute should be "P" or "T" or "D" same type that bind to value
– Asanka
Nov 22 '18 at 11:43
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
Not object.attriburte in this case emitirGuia.tipoInterveniente
– Asanka
Nov 22 '18 at 11:46
|
show 2 more comments
It's because mat-select has selectionChange event and it's only fired up when user change it
Event emitted when the selected value has been changed by the user.
(angular material docs)
If you want to emit this selectionChange you would have to try with programatically fire event, but you should avoid it. Maybe you can call this method inside your code? Give us your use case, maybe there is a better way.
EDIT
Due to your use case, you could go with ChangeDetectorRef.detectChanges(), so basicly, if you set your default value and you want to be sure, that it is selected in UI you can do something like this. It's a bit hacky, but it will work.
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
// this will force to refresh value in mat-select
this.cdr.detectChanges()
// here you can call your `methodThatIWantToTrigger` becaucse the view is updated.
}
Also don't forget to add it in your constructor in component.ts and import it Change
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) { }
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
|
show 2 more comments
It's because mat-select has selectionChange event and it's only fired up when user change it
Event emitted when the selected value has been changed by the user.
(angular material docs)
If you want to emit this selectionChange you would have to try with programatically fire event, but you should avoid it. Maybe you can call this method inside your code? Give us your use case, maybe there is a better way.
EDIT
Due to your use case, you could go with ChangeDetectorRef.detectChanges(), so basicly, if you set your default value and you want to be sure, that it is selected in UI you can do something like this. It's a bit hacky, but it will work.
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
// this will force to refresh value in mat-select
this.cdr.detectChanges()
// here you can call your `methodThatIWantToTrigger` becaucse the view is updated.
}
Also don't forget to add it in your constructor in component.ts and import it Change
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) { }
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
|
show 2 more comments
It's because mat-select has selectionChange event and it's only fired up when user change it
Event emitted when the selected value has been changed by the user.
(angular material docs)
If you want to emit this selectionChange you would have to try with programatically fire event, but you should avoid it. Maybe you can call this method inside your code? Give us your use case, maybe there is a better way.
EDIT
Due to your use case, you could go with ChangeDetectorRef.detectChanges(), so basicly, if you set your default value and you want to be sure, that it is selected in UI you can do something like this. It's a bit hacky, but it will work.
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
// this will force to refresh value in mat-select
this.cdr.detectChanges()
// here you can call your `methodThatIWantToTrigger` becaucse the view is updated.
}
Also don't forget to add it in your constructor in component.ts and import it Change
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) { }
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
It's because mat-select has selectionChange event and it's only fired up when user change it
Event emitted when the selected value has been changed by the user.
(angular material docs)
If you want to emit this selectionChange you would have to try with programatically fire event, but you should avoid it. Maybe you can call this method inside your code? Give us your use case, maybe there is a better way.
EDIT
Due to your use case, you could go with ChangeDetectorRef.detectChanges(), so basicly, if you set your default value and you want to be sure, that it is selected in UI you can do something like this. It's a bit hacky, but it will work.
if (this.array.length == 1){ // if it has only one option
this.object.attribute = this.array[0];
// this will force to refresh value in mat-select
this.cdr.detectChanges()
// here you can call your `methodThatIWantToTrigger` becaucse the view is updated.
}
Also don't forget to add it in your constructor in component.ts and import it Change
import { ChangeDetectorRef } from '@angular/core';
constructor(private cdr: ChangeDetectorRef) { }
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
edited Nov 22 '18 at 11:30
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
answered Nov 22 '18 at 10:59
Patryk BrejdakPatryk Brejdak
1,025518
1,025518
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
|
show 2 more comments
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
i have tried selectionChange before, and it didnt work, i made some edits in my question
– coder Tester
Nov 22 '18 at 11:18
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Of course it won't work. because "Event emitted when the selected value has been changed by the user.", but Asanka answer should help you.
– Patryk Brejdak
Nov 22 '18 at 11:21
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
Asanka answer also does not work, the method is not getting triggered
– coder Tester
Nov 22 '18 at 11:24
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
@coderTester check my edit
– Patryk Brejdak
Nov 22 '18 at 11:33
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
yes that is kinda what i am doing now, it works sure, but i dont think its the best way of doing it. Im here just to see if there is a better option, maybe there is not.
– coder Tester
Nov 22 '18 at 11:42
|
show 2 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%2f53429224%2fhow-can-i-set-a-default-value-in-component-to-a-mat-select-triggering-change%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
