Set selected item in Dropdown List

-1

simple question ,
how to set the selected item in dropdown list !!

in plain Html is easy https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected

but when Angular came in every thing begin to be messy !!

here is a live Demo of my question

https://stackblitz.com/edit/angular-jrvpus?embed=1&file=src/app/app.component.html

asked Dec 27 '18 at 14:55

Mohamed

407

you can just set your [(ngModel)] value and it should work
– nircraft
Dec 27 '18 at 14:58

Remove 2 way binding
– xyz
Dec 27 '18 at 14:58

setting ngmodule value works thanks
– Mohamed
Dec 27 '18 at 15:02

add a comment |

-1

simple question ,
how to set the selected item in dropdown list !!

in plain Html is easy https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected

but when Angular came in every thing begin to be messy !!

here is a live Demo of my question

https://stackblitz.com/edit/angular-jrvpus?embed=1&file=src/app/app.component.html

asked Dec 27 '18 at 14:55

Mohamed

407

you can just set your [(ngModel)] value and it should work
– nircraft
Dec 27 '18 at 14:58

Remove 2 way binding
– xyz
Dec 27 '18 at 14:58

setting ngmodule value works thanks
– Mohamed
Dec 27 '18 at 15:02

add a comment |

-1

simple question ,
how to set the selected item in dropdown list !!

in plain Html is easy https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected

but when Angular came in every thing begin to be messy !!

here is a live Demo of my question

https://stackblitz.com/edit/angular-jrvpus?embed=1&file=src/app/app.component.html

asked Dec 27 '18 at 14:55

Mohamed

407

simple question ,
how to set the selected item in dropdown list !!

in plain Html is easy https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected

but when Angular came in every thing begin to be messy !!

here is a live Demo of my question

https://stackblitz.com/edit/angular-jrvpus?embed=1&file=src/app/app.component.html

angular html-select

asked Dec 27 '18 at 14:55

Mohamed

407

asked Dec 27 '18 at 14:55

Mohamed

407

asked Dec 27 '18 at 14:55

Mohamed

407

asked Dec 27 '18 at 14:55

Mohamed

407

asked Dec 27 '18 at 14:55

Mohamed

407

you can just set your [(ngModel)] value and it should work
– nircraft
Dec 27 '18 at 14:58

Remove 2 way binding
– xyz
Dec 27 '18 at 14:58

setting ngmodule value works thanks
– Mohamed
Dec 27 '18 at 15:02

add a comment |

you can just set your [(ngModel)] value and it should work
– nircraft
Dec 27 '18 at 14:58

Remove 2 way binding
– xyz
Dec 27 '18 at 14:58

setting ngmodule value works thanks
– Mohamed
Dec 27 '18 at 15:02

you can just set your [(ngModel)] value and it should work
– nircraft
Dec 27 '18 at 14:58

Remove 2 way binding
– xyz
Dec 27 '18 at 14:58

setting ngmodule value works thanks
– Mohamed
Dec 27 '18 at 15:02

add a comment |

2 Answers
2

active

oldest

votes

<select class="form-control" [(ngModel)]="ItemId" (change)="DoSomeThingMethods()"

                    name="itemsfromServer" required>

                <option *ngFor="let item of itemsfromServer" value="{{ item.ItemId }}" [selected]="item.ItemId == 0 ">{{ item.type }} {{ item.ItemId }}</option>

            </select>

now set your [(ngModel)] value in component.

If you set ItemId to 0.
{ItemId : 0 ,selected : true ,type:"Type default"} will be selected in dropdown.

edited Dec 27 '18 at 15:04

answered Dec 27 '18 at 15:00

nircraft

1,122115

it's working thanks
– Mohamed
Dec 27 '18 at 15:03

can you accept the answer.
– nircraft
Dec 27 '18 at 15:04

sure but the site setting time limit , after 5 minutes from accepting it
– Mohamed
Dec 27 '18 at 15:06

add a comment |

You can set it via ngModel.

Consider your template HTML;

<select [(ngModel)]="id" (change)="change()" name="item" required>

    <option *ngFor="let item of items" value="{{ item.id }}">

        {{ item.type }}

    </option>

</select>

And in you component.ts;

this.id = 5; //or whatever

Now if the items collection is like;

[

    {type:"t1", id:"1"},

    {type:"t2", id:"2"},

    {type:"t3", id:"3"},

    {type:"t4", id:"4"},

    {type:"t5", id:"5"},

    {type:"t6", id:"6"},

    {type:"t7", id:"7"},

]

Now the type : t5 should be selected by default.

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53946940%2fset-selected-item-in-dropdown-list%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

<select class="form-control" [(ngModel)]="ItemId" (change)="DoSomeThingMethods()"

                    name="itemsfromServer" required>

                <option *ngFor="let item of itemsfromServer" value="{{ item.ItemId }}" [selected]="item.ItemId == 0 ">{{ item.type }} {{ item.ItemId }}</option>

            </select>

now set your [(ngModel)] value in component.

If you set ItemId to 0.
{ItemId : 0 ,selected : true ,type:"Type default"} will be selected in dropdown.

edited Dec 27 '18 at 15:04

answered Dec 27 '18 at 15:00

nircraft

1,122115

it's working thanks
– Mohamed
Dec 27 '18 at 15:03

can you accept the answer.
– nircraft
Dec 27 '18 at 15:04

sure but the site setting time limit , after 5 minutes from accepting it
– Mohamed
Dec 27 '18 at 15:06

add a comment |

<select class="form-control" [(ngModel)]="ItemId" (change)="DoSomeThingMethods()"

                    name="itemsfromServer" required>

                <option *ngFor="let item of itemsfromServer" value="{{ item.ItemId }}" [selected]="item.ItemId == 0 ">{{ item.type }} {{ item.ItemId }}</option>

            </select>

now set your [(ngModel)] value in component.

If you set ItemId to 0.
{ItemId : 0 ,selected : true ,type:"Type default"} will be selected in dropdown.

edited Dec 27 '18 at 15:04

answered Dec 27 '18 at 15:00

nircraft

1,122115

it's working thanks
– Mohamed
Dec 27 '18 at 15:03

can you accept the answer.
– nircraft
Dec 27 '18 at 15:04

sure but the site setting time limit , after 5 minutes from accepting it
– Mohamed
Dec 27 '18 at 15:06

add a comment |

<select class="form-control" [(ngModel)]="ItemId" (change)="DoSomeThingMethods()"

                    name="itemsfromServer" required>

                <option *ngFor="let item of itemsfromServer" value="{{ item.ItemId }}" [selected]="item.ItemId == 0 ">{{ item.type }} {{ item.ItemId }}</option>

            </select>

now set your [(ngModel)] value in component.

If you set ItemId to 0.
{ItemId : 0 ,selected : true ,type:"Type default"} will be selected in dropdown.

edited Dec 27 '18 at 15:04

answered Dec 27 '18 at 15:00

nircraft

1,122115

<select class="form-control" [(ngModel)]="ItemId" (change)="DoSomeThingMethods()"

                    name="itemsfromServer" required>

                <option *ngFor="let item of itemsfromServer" value="{{ item.ItemId }}" [selected]="item.ItemId == 0 ">{{ item.type }} {{ item.ItemId }}</option>

            </select>

now set your [(ngModel)] value in component.

If you set ItemId to 0.
{ItemId : 0 ,selected : true ,type:"Type default"} will be selected in dropdown.

edited Dec 27 '18 at 15:04

answered Dec 27 '18 at 15:00

nircraft

1,122115

edited Dec 27 '18 at 15:04

answered Dec 27 '18 at 15:00

nircraft

1,122115

answered Dec 27 '18 at 15:00

nircraft

1,122115

answered Dec 27 '18 at 15:00

nircraft

1,122115

it's working thanks
– Mohamed
Dec 27 '18 at 15:03

can you accept the answer.
– nircraft
Dec 27 '18 at 15:04

sure but the site setting time limit , after 5 minutes from accepting it
– Mohamed
Dec 27 '18 at 15:06

add a comment |

it's working thanks
– Mohamed
Dec 27 '18 at 15:03

can you accept the answer.
– nircraft
Dec 27 '18 at 15:04

sure but the site setting time limit , after 5 minutes from accepting it
– Mohamed
Dec 27 '18 at 15:06

it's working thanks
– Mohamed
Dec 27 '18 at 15:03

can you accept the answer.
– nircraft
Dec 27 '18 at 15:04

sure but the site setting time limit , after 5 minutes from accepting it
– Mohamed
Dec 27 '18 at 15:06

add a comment |

You can set it via ngModel.

Consider your template HTML;

<select [(ngModel)]="id" (change)="change()" name="item" required>

    <option *ngFor="let item of items" value="{{ item.id }}">

        {{ item.type }}

    </option>

</select>

And in you component.ts;

this.id = 5; //or whatever

Now if the items collection is like;

[

    {type:"t1", id:"1"},

    {type:"t2", id:"2"},

    {type:"t3", id:"3"},

    {type:"t4", id:"4"},

    {type:"t5", id:"5"},

    {type:"t6", id:"6"},

    {type:"t7", id:"7"},

]

Now the type : t5 should be selected by default.

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

add a comment |

You can set it via ngModel.

Consider your template HTML;

<select [(ngModel)]="id" (change)="change()" name="item" required>

    <option *ngFor="let item of items" value="{{ item.id }}">

        {{ item.type }}

    </option>

</select>

And in you component.ts;

this.id = 5; //or whatever

Now if the items collection is like;

[

    {type:"t1", id:"1"},

    {type:"t2", id:"2"},

    {type:"t3", id:"3"},

    {type:"t4", id:"4"},

    {type:"t5", id:"5"},

    {type:"t6", id:"6"},

    {type:"t7", id:"7"},

]

Now the type : t5 should be selected by default.

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

add a comment |

You can set it via ngModel.

Consider your template HTML;

<select [(ngModel)]="id" (change)="change()" name="item" required>

    <option *ngFor="let item of items" value="{{ item.id }}">

        {{ item.type }}

    </option>

</select>

And in you component.ts;

this.id = 5; //or whatever

Now if the items collection is like;

[

    {type:"t1", id:"1"},

    {type:"t2", id:"2"},

    {type:"t3", id:"3"},

    {type:"t4", id:"4"},

    {type:"t5", id:"5"},

    {type:"t6", id:"6"},

    {type:"t7", id:"7"},

]

Now the type : t5 should be selected by default.

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

You can set it via ngModel.

Consider your template HTML;

<select [(ngModel)]="id" (change)="change()" name="item" required>

    <option *ngFor="let item of items" value="{{ item.id }}">

        {{ item.type }}

    </option>

</select>

And in you component.ts;

this.id = 5; //or whatever

Now if the items collection is like;

[

    {type:"t1", id:"1"},

    {type:"t2", id:"2"},

    {type:"t3", id:"3"},

    {type:"t4", id:"4"},

    {type:"t5", id:"5"},

    {type:"t6", id:"6"},

    {type:"t7", id:"7"},

]

Now the type : t5 should be selected by default.

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

answered Dec 27 '18 at 15:05

KOUSIK MANDAL

1,111929

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk