{"id":2946,"date":"2021-01-11T22:09:00","date_gmt":"2021-01-12T03:09:00","guid":{"rendered":"https:\/\/www.mymiller.name\/wordpress\/?p=2946"},"modified":"2021-01-01T11:00:55","modified_gmt":"2021-01-01T16:00:55","slug":"angular-material-checkbox","status":"publish","type":"post","link":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-checkbox\/","title":{"rendered":"Angular Material Checkbox"},"content":{"rendered":"\n<p>Angular Material offers a powerful set of features for building your Angular application on. It\u2019s time to take them to the next level. A project I\u2019m working on needed to be able to edit, view, and delete data. Not wanting to reinvent the wheel. I had an idea, what about reusable field components that combined the ability to Edit, Delete, and View a field.<\/p>\n\n\n\n<p>Please see my previous article in this series Angular Material String Component for the base class.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CheckboxFieldComponent<\/h2>\n\n\n\n<p>This time we are creating a Checkbox component.  I find a checkbox is my second most often used form-field that I use.  Below is the component code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Component({\r\n  selector: 'mymiller-checkbox-field',\r\n  templateUrl: '.\/checkbox-field.component.html',\r\n  styleUrls: &#91;'.\/checkbox-field.component.scss']\r\n\r\n})\r\nexport class CheckboxFieldComponent extends AbstractFieldComponent {\r\n\r\n  componentValue: boolean  = false;\r\n\r\n  @Output() valueChange: EventEmitter&lt;boolean> = new EventEmitter&lt;boolean>();\r\n  @Input()\r\n\r\n  get value() {\r\n    return this.componentValue;\r\n  }\r\n\r\n  set value(val) {\r\n    this.componentValue = val;\r\n    this.valueChange.emit(this.componentValue);\r\n  }\r\n\r\n  private backup: boolean = false;\r\n\r\n  constructor(public languageService:LanguageService) {\r\n    super(languageService);\r\n  }\r\n\r\n  backupValue():null {\r\n   this.backup = this.value;\r\n   return null;\r\n  }\r\n\r\n  restoreValue():null {\r\n    this.value = this.backup;\r\n    return null;\r\n  }\r\n}\n<\/code><\/pre>\n\n\n\n<p>We implement a [(value)] to pass in the data for this field, in this case a string. Next we implement the restoreValue(), and backupValue() from the base component. Can you get any simpler in your component file?<\/p>\n\n\n\n<p>Now we need to create the HTML to actually display the field.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ng-container *ngIf=\"mode ==='DISPLAY'\">\r\n  &lt;mat-checkbox &#91;(ngModel)]=\"value\" disabled>\r\n    {{label}}\r\n    &lt;mymiller-icon-button matSuffix icon=\"edit\" (click)=\"edit()\" *ngIf=\"allowEdit\" &#91;tooltip]=\"editLabel\">&lt;\/mymiller-icon-button>\r\n  &lt;\/mat-checkbox>\r\n&lt;\/ng-container>\r\n\r\n&lt;ng-container *ngIf=\"mode===EDIT_MODE\">\r\n  &lt;mat-checkbox &#91;(ngModel)]=\"value\">\r\n    {{label}}\r\n    &lt;mymiller-icon-button matSuffix icon=\"save\" (click)=\"save()\" &#91;tooltip]=\"saveLabel\">&lt;\/mymiller-icon-button>\r\n    &lt;mymiller-icon-button matSuffix icon=\"undo\" (click)=\"undo()\" color=\"warn\" &#91;tooltip]=\"undoLabel\">&lt;\/mymiller-icon-button>\r\n  &lt;\/mat-checkbox>\r\n&lt;\/ng-container><\/code><\/pre>\n\n\n\n<p>We switch based on the mode whether we are DISPLAY, or EDIT. Now we enter in the elements to show our field. You can see I just &#8220;disabled&#8221; the DISPLAY. However you will notice in this instance I did not add Delete or Clear, as they simply do not make sense in this case.  <\/p>\n\n\n\n<p>Also there is not full-width added to this component.  I found it looked best letting it use the room it needed.<\/p>\n\n\n\n<p>This is what the field will look like with no Label:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/CheckboxFieldComponent.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"214\" height=\"43\" src=\"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/CheckboxFieldComponent.png?resize=214%2C43&#038;ssl=1\" alt=\"\" class=\"wp-image-2960\"\/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Create a compnent for Display\/Edit of a checkbox using Angular Material mat-form-field.<\/p>\n","protected":false},"author":1,"featured_media":2947,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","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":"","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}},"categories":[281],"tags":[269,270],"series":[329],"class_list":["post-2946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-material","series-form-components"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/checklist-2549229_640.jpg?fit=640%2C426&ssl=1","jetpack-related-posts":[{"id":2943,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-string-component\/","url_meta":{"origin":2946,"position":0},"title":"Angular Material String Component","author":"Jeffery Miller","date":"January 4, 2021","format":false,"excerpt":"Create a compnent for Display\/Edit\/Delete of a string using Angular Material mat-form-field.","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/application-1883453_640.jpg?fit=640%2C426&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":2951,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-search-field\/","url_meta":{"origin":2946,"position":1},"title":"Angular Material Search Field","author":"Jeffery Miller","date":"January 25, 2021","format":false,"excerpt":"Angular Material Search Field component using mat-form-field to create a reusable component for searching.","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2020\/12\/search-bar-4999181_640.jpg?fit=640%2C225&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3029,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-loading-spinner\/","url_meta":{"origin":2946,"position":2},"title":"Angular Material Loading Spinner","author":"Jeffery Miller","date":"May 3, 2021","format":false,"excerpt":"Just about every project I need to have at least one loading spinner to indicate to the user that data is being loaded and to wait. My recent project I found that to be no exception. I wanted to come up with something that I thought was a little nicer\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2511,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-environment\/","url_meta":{"origin":2946,"position":3},"title":"Angular Environment","author":"Jeffery Miller","date":"March 11, 2019","format":false,"excerpt":"Building a website for today and tomorrow begins with Angular. Yes I am a proponent of Angular over many other client frameworks. Let's look over the goals of this post to help you get started. Node.jsAngular-CliAngular Workspace Angular Material Installing Node.js First step you need to do is to install\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2019\/03\/geometry-1023846_640.jpg?fit=640%2C359&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3022,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/page-component-for-mobile-desktop\/","url_meta":{"origin":2946,"position":4},"title":"Page Component for Mobile\/Desktop","author":"Jeffery Miller","date":"April 26, 2021","format":false,"excerpt":"I was recently building a set of pages, that I needed to be able to switch what was displayed based on whether I was on a Desktop or Mobile device. On a Mobile device I would change the layout of tables or limit certain features in order to provide a\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/04\/website-1597382_640.png?fit=640%2C558&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":3004,"url":"https:\/\/www.mymiller.name\/wordpress\/angular\/angular-material-calendar\/","url_meta":{"origin":2946,"position":5},"title":"Angular Material Calendar","author":"Jeffery Miller","date":"March 29, 2021","format":false,"excerpt":"Sometimes you need to have a calendar for showing information in your web application. After looking around at different implementations and finding none that work. I decided to create my own. This Calendar is not mobile optimized, For that, I created an Agenda that shows a single day at a\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/www.mymiller.name\/wordpress\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.mymiller.name\/wordpress\/wp-content\/uploads\/2021\/03\/january-2290045_640.jpg?fit=640%2C396&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/comments?post=2946"}],"version-history":[{"count":5,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2946\/revisions"}],"predecessor-version":[{"id":2972,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/posts\/2946\/revisions\/2972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media\/2947"}],"wp:attachment":[{"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/media?parent=2946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/categories?post=2946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/tags?post=2946"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.mymiller.name\/wordpress\/wp-json\/wp\/v2\/series?post=2946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}