{"id":250,"date":"2023-07-12T19:27:01","date_gmt":"2023-07-12T21:27:01","guid":{"rendered":"https:\/\/blog.iordanov.info\/?p=250"},"modified":"2023-07-13T10:30:46","modified_gmt":"2023-07-13T12:30:46","slug":"pipes-utilization-to-display-friendly-labels-for-enums-in-angular","status":"publish","type":"post","link":"https:\/\/blog.iordanov.info\/?p=250","title":{"rendered":"Pipes utilization to display friendly labels for Enums in Angular"},"content":{"rendered":"\n
\n
\"\"<\/figure>
\n

In this article, I will show<\/em> a simple solution to display a user-friendly labels for enumerations in angular using Pipes. The solution is an example of reuse-based software engineering strategy<\/a>.  <\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n

It define a design pattern (template) that can be repeatedly applied to a commonly recurring situation in software design. The patterns ensure a good practice environment, quality assurance, and compatible test results. The development process involves implementing the design pattern in a reusable way, allowing for easier maintenance and updates in the future. This approach promotes efficiency, reduces redundancy, and enhances the overall software development lifecycle.<\/p>\n\n\n\n

For this purpose an common class EnumViewModel width following definition is used. <\/p>\n\n\n\n

export class EnumViewModel {\n    id: number;\n    name: string;\n\n    constructor(){\n        this.id = -1;\n        this.name = 'Default';\n    }\n}<\/code><\/pre>\n\n\n\n
An example enumeration:<\/p>\n\n\n\n
export enum AircraftStatus {\n    New = 1,\n    Operational = 2,\n    Maintenance = 3,\n    ForLeaseOrSale = 4,\n    Retired = 5\n}<\/code><\/pre>\n\n\n\n
 For each enumeration an option array of type EnumViewModel is defined<\/p>\n\n\n\n
export const AircraftStatusOpt: EnumViewModel[] = [\n    {\n        id: 1,\n        name: 'New'\n    },\n    {\n        id: 2,\n        name: 'Operational'\n    },\n    {\n        id: 3,\n        name: 'Maintenance'\n    },\n    {\n        id: 4,\n        name: 'For Lease Or Sale'\n    },\n    {\n        id: 5,\n        name: 'Retired'\n    },\n];<\/code><\/pre>\n\n\n\n
Next is a pipe definition:<\/p>\n\n\n\n
@Pipe({ name: 'acstatus' })\nexport class AcStatusDisplayPipe implements PipeTransform {\n    transform(value: number, args?: string[]): string {\n        let rv: string = AircraftStatus[value];\n        const data: EnumViewModel = AircraftStatusOpt.find(x => x.id === value);\n        if (data) {\n            rv = data.name;\n        }\n        return rv;\n    }\n}<\/code><\/pre>\n\n\n\n
Entire code of the solution can be found in this stackbiz<\/a> project.<\/p>\n\n\n\n
\n
\"\"<\/figure>
\n
This is an screenshot of my stackblitz <\/a>example where you can see utilization of this structural design-pattern in a table, select box and text. Described in this post pattern falls into Structural<\/strong> Design Pattern category.<\/p>\n<\/div><\/div>\n\n\n\n
Structural Design Pattern<\/mark><\/strong><\/p>\n\n\n\n
A design pattern is a description or template that can be repeatedly applied to a commonly recurring problem in software design. There are three pattern types which are creational, structural, and behavioral patterns. Described in this post pattern falls into Structural<\/strong> category, that focuses more on how classes and objects are composed using the different structural techniques, and to form structures with more or altered flexibility.<\/p>\n\n\n\n
Thank you.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
In this article, I will show a simple solution to display a user-friendly labels for enumerations in angular using Pipes. The solution is an example of reuse-based software engineering strategy.  It define a design pattern (template) that can be repeatedly applied to a …<\/p>\n
Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":253,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[41,31],"tags":[38,40,39,46,45,42,44],"class_list":["post-250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-javascript","tag-angular","tag-enums","tag-pipes","tag-stacjblitz-example","tag-stackblitz","tag-structural-design-pattern","tag-typescript"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p3jsZJ-42","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack_featured_media_url":"https:\/\/blog.iordanov.info\/wp-content\/uploads\/2023\/07\/vlog-img.png","_links":{"self":[{"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/posts\/250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=250"}],"version-history":[{"count":24,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/posts\/250\/revisions\/282"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=\/wp\/v2\/media\/253"}],"wp:attachment":[{"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.iordanov.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}