From 5f51b00f230e99f7e4b81e6d9c400d508c242874 Mon Sep 17 00:00:00 2001
From: RomanTsukanov <sergeich16@gmail.com>
Date: Wed, 22 Nov 2023 13:25:49 +0400
Subject: [PATCH] Update the Third-Party Angular Component Integration help
 topic

---
 ...ird-party-component-integration-angular.md | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/customize-question-types-third-party-component-integration-angular.md b/docs/customize-question-types-third-party-component-integration-angular.md
index 25449cd8b9..5fe199925e 100644
--- a/docs/customize-question-types-third-party-component-integration-angular.md
+++ b/docs/customize-question-types-third-party-component-integration-angular.md
@@ -155,13 +155,13 @@ The component's template should render different color picker elements based upo
 
 ```html
 <ng-container *ngIf="model.colorPickerType === 'Sketch'">
-  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)"></color-sketch>
+  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-sketch>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Slider'">
-  <color-slider (onChange)="handleChange($event)"></color-slider>
+  <color-slider (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-slider>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Compact'">
-  <color-compact (onChange)="handleChange($event)"></color-compact>
+  <color-compact (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-compact>
 </ng-container>
 ```
 
@@ -264,13 +264,13 @@ Serializer.addClass(
 ```html
 <!-- color-picker.component.html -->
 <ng-container *ngIf="model.colorPickerType === 'Sketch'">
-  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)"></color-sketch>
+  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-sketch>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Slider'">
-  <color-slider (onChange)="handleChange($event)"></color-slider>
+  <color-slider (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-slider>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Compact'">
-  <color-compact (onChange)="handleChange($event)"></color-compact>
+  <color-compact (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-compact>
 </ng-container>
 ```
 
@@ -388,13 +388,13 @@ locale.pe.disableAlpha = "Disable alpha channel";
 ```html
 <!-- color-picker.component.html -->
 <ng-container *ngIf="model.colorPickerType === 'Sketch'">
-  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)"></color-sketch>
+  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-sketch>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Slider'">
-  <color-slider (onChange)="handleChange($event)"></color-slider>
+  <color-slider (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-slider>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Compact'">
-  <color-compact (onChange)="handleChange($event)"></color-compact>
+  <color-compact (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-compact>
 </ng-container>
 ```
 
@@ -529,13 +529,13 @@ SvgRegistry.registerIconFromSvg(
 ```html
 <!-- color-picker.component.html -->
 <ng-container *ngIf="model.colorPickerType === 'Sketch'">
-  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)"></color-sketch>
+  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-sketch>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Slider'">
-  <color-slider (onChange)="handleChange($event)"></color-slider>
+  <color-slider (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-slider>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Compact'">
-  <color-compact (onChange)="handleChange($event)"></color-compact>
+  <color-compact (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-compact>
 </ng-container>
 ```
 
@@ -735,13 +735,13 @@ PropertyGridEditorCollection.register({
 ```html
 <!-- color-picker.component.html -->
 <ng-container *ngIf="model.colorPickerType === 'Sketch'">
-  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)"></color-sketch>
+  <color-sketch [disableAlpha]="model.disableAlpha" (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-sketch>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Slider'">
-  <color-slider (onChange)="handleChange($event)"></color-slider>
+  <color-slider (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-slider>
 </ng-container>
 <ng-container *ngIf="model.colorPickerType === 'Compact'">
-  <color-compact (onChange)="handleChange($event)"></color-compact>
+  <color-compact (onChange)="handleChange($event)" [color]="model.value || '#fff'"></color-compact>
 </ng-container>
 ```