{"id":1328,"date":"2018-09-26T09:16:38","date_gmt":"2018-09-26T08:16:38","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1328"},"modified":"2018-09-26T09:16:38","modified_gmt":"2018-09-26T08:16:38","slug":"angular-advanced-control-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/angular-advanced-control-example\/","title":{"rendered":"Angular Advanced Control example"},"content":{"rendered":"<p>Source:\u00a0<a href=\"https:\/\/alligator.io\/angular\/custom-form-control\/\">https:\/\/alligator.io\/angular\/custom-form-control\/<\/a><\/p>\n<pre class=\"lang:js decode:true \">import { Component, forwardRef, HostBinding, Input } from '@angular\/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular\/forms';\r\n\r\n@Component({\r\n    selector: 'rating-input',\r\n    template: `\r\n    &lt;span\r\n      *ngFor=\"let starred of stars; let i = index\"\r\n      (click)=\"onTouched(); rate(i + (starred ? (value &gt; i + 1 ? 1 : 0) : 1))\"&gt;\r\n      &lt;ng-container *ngIf=\"starred; else noStar\"&gt;\u2b50&lt;\/ng-container&gt;\r\n      &lt;ng-template #noStar&gt;\u00b7&lt;\/ng-template&gt;\r\n    &lt;\/span&gt;\r\n  `,\r\n    styles: [`\r\n    span {\r\n      display: inline-block;\r\n      width: 25px;\r\n      line-height: 25px;\r\n      text-align: center;\r\n      cursor: pointer;\r\n    }\r\n  `],\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: forwardRef(() =&gt; RatingInputComponent),\r\n            multi: true\r\n        }\r\n    ]\r\n})\r\nexport class RatingInputComponent implements ControlValueAccessor {\r\n    stars: boolean[] = Array(5).fill(false);\r\n    @Input() disabled = false;\r\n    @HostBinding('style.opacity')\r\n    get opacity() {\r\n        return this.disabled ? 0.25 : 1;\r\n    }\r\n    onChange = (rating: number) =&gt; { };\r\n    onTouched = () =&gt; { };\r\n\r\n    get value(): number {\r\n        return this.stars.reduce((total, starred) =&gt; {\r\n            return total + (starred ? 1 : 0);\r\n        }, 0);\r\n    }\r\n\r\n    rate(rating: number) {\r\n        if (!this.disabled) {\r\n            this.writeValue(rating);\r\n        }\r\n    }\r\n\r\n    \/\/ ControlValueAccessor implementation\r\n    writeValue(rating: number): void {\r\n        this.stars = this.stars.map((_, i) =&gt; rating &gt; i);\r\n        this.onChange(this.value)\r\n    }\r\n    registerOnChange(fn: (rating: number) =&gt; void): void {\r\n        this.onChange = fn;\r\n    }\r\n    registerOnTouched(fn: () =&gt; void): void {\r\n        this.onTouched = fn;\r\n    }\r\n    setDisabledState(isDisabled: boolean): void {\r\n        this.disabled = isDisabled;\r\n    }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source:\u00a0https:\/\/alligator.io\/angular\/custom-form-control\/ import { Component, forwardRef, HostBinding, Input } from &#8216;@angular\/core&#8217;; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from &#8216;@angular\/forms&#8217;; @Component({ selector: &#8216;rating-input&#8217;, template: ` &lt;span *ngFor=&#8221;let starred of stars; let i = index&#8221; (click)=&#8221;onTouched(); rate(i + (starred ? (value &gt; i + 1 ? 1 : 0) : 1))&#8221;&gt; &lt;ng-container *ngIf=&#8221;starred; else noStar&#8221;&gt;\u2b50&lt;\/ng-container&gt; &lt;ng-template #noStar&gt;\u00b7&lt;\/ng-template&gt; &lt;\/span&gt; `, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1328","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1328"}],"version-history":[{"count":1,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1328\/revisions"}],"predecessor-version":[{"id":1329,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1328\/revisions\/1329"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}