Here, I would like to discuss about scenario where I choose to create my own observable.<\/p>\n
While developing one application I created one observable which was intended to store numeric value, and I used to store that numeric value in database using WebApi. It was going all ok but suddenly I started facing typecasting error while storing that value using my WebApi, then I realized that the value I am passing is in string format. This was happening because I started taking value from user using Textbox which always gives me value in string format. So, I decided to create my own observable which will always have numeric value even it is coming from Textbox.<\/p>\n
Let\u2019s create our own numericObservable<\/strong><\/h4>\nLook at the below Before and After outputs<\/p>\n
Before applying numericObservable<\/p>\n
![\"String\"](\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=\")
<\/p>\n
After applying numericObservable<\/p>\n
<\/p>\n
Below is the code which will create your personalized observable<\/p>\n
ko.numericObservable = function (initialValue) {\r\n var actual = ko.observable(initialValue);\r\n var result = ko.dependentObservable({\r\n read: function () {\r\n return actual();\r\n },\r\n write: function (newValue) {\r\n var parsedValue = parseFloat(newValue);\r\n actual(isNaN(parsedValue) ? newValue : parsedValue);\r\n }\r\n });\r\n return result;\r\n };<\/pre>\nUse below code to declare your own numericObservable<\/p>\n
self.Number = ko.numericObservable();<\/pre>\nFull example:<\/p>\n
<html>\r\n<head>\r\n <title> <\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/knockout\/3.4.2\/knockout-min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"MainDIV\">\r\n <input type='text' data-bind=\"value: Number\"\/>\r\n\t\t<input type='button' data-bind=\"click: checkType\" value='Check'\/>\r\n\t\t<\/div>\r\n <script>\r\n ko.numericObservable = function (initialValue) {\r\n var actual = ko.observable(initialValue);\r\n var result = ko.dependentObservable({\r\n read: function () {\r\n return actual();\r\n },\r\n write: function (newValue) {\r\n var parsedValue = parseFloat(newValue);\r\n actual(isNaN(parsedValue) ? newValue : parsedValue);\r\n }\r\n });\r\n return result;\r\n };\r\n\tvar KOModel = function () {\r\n var self = this;\r\n self.Number = ko.numericObservable();\r\n\t\tself.checkType = function(){\r\n\t\t\talert(typeof (self.Number()));\r\n\t\t};\r\n }\r\n ko.applyBindings(KOModel, document.getElementById('MainDIV'));\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Knockout JS is famous and widely used for its two-way binding concept. While developing application we uses ko.observable() to declare a knockout object. Here we will discuss how to create…<\/p>\n","protected":false},"author":4,"featured_media":2878,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[34],"tags":[],"powerkit_post_featured":[],"class_list":{"0":"post-2873","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-knockout"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/07\/knockoutjs.png?fit=200%2C200&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Kl","jetpack-related-posts":[{"id":3818,"url":"https:\/\/code4developers.com\/slicepipe-jsonpipe-asyncpipe\/","url_meta":{"origin":2873,"position":0},"title":"Pipes in Angular Part \u2013 4 : SlicePipe, JSONPipe, AsyncPipe","author":"Yatendrasinh Joddha","date":"August 19, 2018","format":false,"excerpt":"Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3758,"url":"https:\/\/code4developers.com\/datepipe-in-angular\/","url_meta":{"origin":2873,"position":1},"title":"Pipes in Angular Part – 2 : DatePipe","author":"Yatendrasinh Joddha","date":"July 1, 2018","format":false,"excerpt":"This is the second part of angular pipe series, in this part we will discuss about DatePipe. Date pipe is used to format the date value according to a locale rules. Before digging more information you can read first part of\u00a0pipe series here which includes details of lowercase, uppercase, and\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"DatePipeFinalOutput","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/FinalOutput.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/FinalOutput.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/FinalOutput.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":2873,"position":2},"title":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch","author":"Arif Khoja","date":"August 30, 2020","format":false,"excerpt":"In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in the Angular web application. Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"connect-angular-firebase","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4091,"url":"https:\/\/code4developers.com\/create-custom-pipes-aka-filters-in-angular-2-x\/","url_meta":{"origin":2873,"position":3},"title":"Create Custom Pipes – Filters in Angular 2.X +","author":"Arif Khoja","date":"March 10, 2019","format":false,"excerpt":"Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time). For such small and repeated\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":2873,"position":4},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3097,"url":"https:\/\/code4developers.com\/angularjs-10-best-practices-create-custom-directives\/","url_meta":{"origin":2873,"position":5},"title":"AngularJS – 10 Best Practices to Create Custom Directives","author":"Arif Khoja","date":"September 2, 2017","format":false,"excerpt":"This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment\/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is listed the best practices for creating custom directives: Naming Convention: Prefer\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2873"}],"version-history":[{"count":1,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2873\/revisions"}],"predecessor-version":[{"id":2876,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2873\/revisions\/2876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2878"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2873"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"String\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2017\/07\/1.png\")
<\/p>\n![\"Number\"](\"https:\/\/code4developers.com\/wp-content\/uploads\/2017\/07\/2.png\")
<\/p>\nUse below code to declare your own numericObservable<\/p>\n
self.Number = ko.numericObservable();<\/pre>\nFull example:<\/p>\n
<html>\r\n<head>\r\n <title> <\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/knockout\/3.4.2\/knockout-min.js\"><\/script>\r\n<\/head>\r\n<body>\r\n <div id=\"MainDIV\">\r\n <input type='text' data-bind=\"value: Number\"\/>\r\n\t\t<input type='button' data-bind=\"click: checkType\" value='Check'\/>\r\n\t\t<\/div>\r\n <script>\r\n ko.numericObservable = function (initialValue) {\r\n var actual = ko.observable(initialValue);\r\n var result = ko.dependentObservable({\r\n read: function () {\r\n return actual();\r\n },\r\n write: function (newValue) {\r\n var parsedValue = parseFloat(newValue);\r\n actual(isNaN(parsedValue) ? newValue : parsedValue);\r\n }\r\n });\r\n return result;\r\n };\r\n\tvar KOModel = function () {\r\n var self = this;\r\n self.Number = ko.numericObservable();\r\n\t\tself.checkType = function(){\r\n\t\t\talert(typeof (self.Number()));\r\n\t\t};\r\n }\r\n ko.applyBindings(KOModel, document.getElementById('MainDIV'));\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Knockout JS is famous and widely used for its two-way binding concept. While developing application we uses ko.observable() to declare a knockout object. Here we will discuss how to create…<\/p>\n","protected":false},"author":4,"featured_media":2878,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[34],"tags":[],"powerkit_post_featured":[],"class_list":{"0":"post-2873","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-knockout"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/07\/knockoutjs.png?fit=200%2C200&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Kl","jetpack-related-posts":[{"id":3818,"url":"https:\/\/code4developers.com\/slicepipe-jsonpipe-asyncpipe\/","url_meta":{"origin":2873,"position":0},"title":"Pipes in Angular Part \u2013 4 : SlicePipe, JSONPipe, AsyncPipe","author":"Yatendrasinh Joddha","date":"August 19, 2018","format":false,"excerpt":"Here is the fourth part of angular pipe series in this part we will discuss about SlicePipe, JSONPipe, and AsyncPipe. If you have not read previous articles here is the link for previous articles. Pipes in Angular Part \u2013 1 : lowercase, uppercase, and titlecase pipes Pipes in Angular Part\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3758,"url":"https:\/\/code4developers.com\/datepipe-in-angular\/","url_meta":{"origin":2873,"position":1},"title":"Pipes in Angular Part – 2 : DatePipe","author":"Yatendrasinh Joddha","date":"July 1, 2018","format":false,"excerpt":"This is the second part of angular pipe series, in this part we will discuss about DatePipe. Date pipe is used to format the date value according to a locale rules. Before digging more information you can read first part of\u00a0pipe series here which includes details of lowercase, uppercase, and\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"DatePipeFinalOutput","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/FinalOutput.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/FinalOutput.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/FinalOutput.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":12847,"url":"https:\/\/code4developers.com\/connect-firebase-database-and-angular-app\/","url_meta":{"origin":2873,"position":2},"title":"Connect Firebase Realtime NoSQL Database with Angular App from Scratch","author":"Arif Khoja","date":"August 30, 2020","format":false,"excerpt":"In this tutorial, We are going to learn\u00a0How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We\u2019ll be using\u00a0AngularFire library for setting up Firebase database in the Angular web application. Firebase is a Google product, It is a real-time NoSQL cloud database that allows you to\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"connect-angular-firebase","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/08\/connect-angular-firebase.jpg?fit=715%2C350&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4091,"url":"https:\/\/code4developers.com\/create-custom-pipes-aka-filters-in-angular-2-x\/","url_meta":{"origin":2873,"position":3},"title":"Create Custom Pipes – Filters in Angular 2.X +","author":"Arif Khoja","date":"March 10, 2019","format":false,"excerpt":"Our applications may have a lot of data for presentation, But for creating a good user experience it is preferable to see in a more understandable format like March 12, 2010 is better to read then Mon Mar 12 2010 15:23:40 GMT-0700 (Pacific Daylight Time). For such small and repeated\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular-2.png?fit=240%2C240&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3340,"url":"https:\/\/code4developers.com\/top-angularjs-interview-question\/","url_meta":{"origin":2873,"position":4},"title":"Top AngularJS interview questions","author":"Arif Khoja","date":"March 23, 2018","format":false,"excerpt":"Read Angular js interview questions including topic advanced topics like Dependency injection, Two-way binding, scope in angular js and many more. 1.Explain Directive scopes? There are three types of directive scopes available in Angular. Parent Scope: is default scope Child Scope: If the properties and functions you set on the\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3097,"url":"https:\/\/code4developers.com\/angularjs-10-best-practices-create-custom-directives\/","url_meta":{"origin":2873,"position":5},"title":"AngularJS – 10 Best Practices to Create Custom Directives","author":"Arif Khoja","date":"September 2, 2017","format":false,"excerpt":"This article represents top 10 best practices that one may want to apply while creating custom directives. Please feel free to comment\/suggest if I missed to mention one or more important points. Also, sorry for the typos. Following is listed the best practices for creating custom directives: Naming Convention: Prefer\u2026","rel":"","context":"In "AngularJs"","block_context":{"text":"AngularJs","link":"https:\/\/code4developers.com\/category\/angularjs\/"},"img":{"alt_text":"AngularJs LOGO","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/angular.png?fit=500%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=2873"}],"version-history":[{"count":1,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2873\/revisions"}],"predecessor-version":[{"id":2876,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/2873\/revisions\/2876"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/2878"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=2873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=2873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=2873"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=2873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}