{"id":1012,"date":"2021-08-18T17:57:41","date_gmt":"2021-08-18T15:57:41","guid":{"rendered":"https:\/\/fileidea.com\/?p=1012"},"modified":"2021-08-18T17:58:06","modified_gmt":"2021-08-18T15:58:06","slug":"using-enums-in-angular-with-ngmodel","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/08\/18\/using-enums-in-angular-with-ngmodel\/","title":{"rendered":"Using enums in Angular with NgModel"},"content":{"rendered":"\n

Enums are really nice I think because you can have it to keep static data structured and easily work with it. Let us create a new enum type called LanguageTypes<\/strong>, it will hold some languages, we will use it in another class to set the language for that object. We will have a select element to try the enum out with the help of the ngModel property which binds the value from the enum to our object.<\/p>\n\n\n\n

First of all, create a new file called language.types.ts<\/strong> or something similar in your Angular project under your src folder. Fill it with values you want for each enum member. Let’s go with numbers.<\/p>\n\n\n

\nexport enum LanguageTypes {\n    English = 0,\n    Swedish = 1,\n  }\n<\/pre><\/div>\n\n\n
Okay good, we got some languages! Now, let’s create a Select form element to try it out, inside your component, have a myObject property or similar.<\/p>\n\n\n
\n<div class="form-group">\n  <label for="language">Language<\/label>\n  <select [(ngModel)]="myObject.language" class="form-control" name="language" id="language">\n    <option value="0">English<\/option>\n    <option value="1">Swedish<\/option>\n  <\/select>\n<\/div>\n<\/pre><\/div>\n\n\n
Pretend your myObject <\/strong>is of a class that contains the property language <\/strong>like this:<\/p>\n\n\n
\nimport { LanguageTypes } from ".\/languageTypes.model";\n\nexport class MyCoolObject {\n    name: string;\n    language: LanguageTypes = LanguageTypes.Custom;\n    constructor(name: string, lang: LanguageTypes = LanguageTypes.Swedish) {\n        this.name = name;\n        this.language = lang;\n    }\n}\n<\/pre><\/div>\n\n\n
Then now we are taking use of the LanguageType <\/strong>enum! Inside our class we have a constructor that take the default language Swedish (value 1), and we can easily change these up because enum is great in that way. We can take it a step further and replace the hardcoded values in our Select list to use the actual enum as well.<\/p>\n\n\n\n
Add in your component.ts file a getter:<\/p>\n\n\n
\n  public get language(): typeof LanguageTypes {\n    return LanguageTypes; \n  }\n<\/pre><\/div>\n\n\n
Now, whenever we call the language <\/strong>getter property we will retrieve the enum type and can use it as normal, so replace the hard coded values 0 1 to make use of the getter instead.<\/p>\n\n\n
\n<div class="form-group">\n  <label for="language">Language<\/label>\n  <select [(ngModel)]="myObject.language" class="form-control" name="language" id="language">\n    <option [value]="language.English">English<\/option>\n    <option [value]="language.Swedish">Swedish<\/option>\n  <\/select>\n<\/div>\n<\/pre><\/div>\n\n\n
And now our Angular app is using our own enum type.<\/p>\n","protected":false},"excerpt":{"rendered":"
Enums are really nice I think because you can have it to keep static data structured and easily work with it. Let us create a new enum type called LanguageTypes, it will hold some languages, we will use it in another class to set the language for that object. We will have a select element … <\/p>\n
Continue reading “Using enums in Angular with NgModel”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31,1,72],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1012"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=1012"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/1012\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=1012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=1012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=1012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}