{"id":359422,"date":"2024-05-21T00:32:20","date_gmt":"2024-05-21T00:32:20","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=359422"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=359422","title":{"rendered":"<span>\u041d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0433\u0438\u0431\u043a\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0434\u043b\u044f Angular<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u0430 \u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0442\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u0435\u043d \u0437\u0430 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b?<\/h3>\n<p>\u0421\u043f\u0435\u0440\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0447\u0442\u043e \u043f\u043e\u0434 UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442\u0441\u044f \u043b\u044e\u0431\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043d\u0435\u0435, Combobox, Checkbox, Checkbox Group, Chip, \u0438 \u0442.\u0434. \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 <code>NgModel<\/code> \u0438\u043b\u0438 <code>FormControl<\/code>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/00c\/27f\/c95\/00c27fc957fa4890c65a4cd8ae2afbb2.jpg\" width=\"780\" height=\"440\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/00c\/27f\/c95\/00c27fc957fa4890c65a4cd8ae2afbb2.jpg\" data-blurred=\"true\"\/><\/figure>\n<h2>\u041e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432  \u0432 \u0441\u0432\u043e\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0430 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. \u041c\u044b \u0438\u043c\u0435\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0441\u043b\u0443\u0447\u0430\u0438 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u044b\u043b\u043e \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0435\u0433\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 API. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0438\u0437 \u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u0435 UX, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c \u0442\u0430\u043a, \u0447\u0442\u043e \u0432 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u043c\u043e\u0433 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0431\u044b\u043b\u0438 \u043d\u0435 \u0440\u0435\u0434\u043a\u043e\u0441\u0442\u044c, \u0438 \u044f \u043d\u0430\u0447\u0430\u043b \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u0434 \u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e \u0431\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0438\u043c\u0435\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u044b \u043f\u0443\u0442\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u0442\u0435\u0433\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0432\u044b\u043d\u0435\u0441 \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<h2>\u0427\u0435\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0438\u0447\u044c?<\/h2>\n<p>\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0442\u043e \u0431\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043c\u0435\u043b\u0430 \u0443\u0436\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u043b \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e\u0435 API, \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u043e\u0433 \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u043b\u044e\u0431\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u043c\u043e\u0433 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;combobox [items]=[items] [ngModel]=\"model\">&lt;\/combobox><\/code><\/pre>\n<p>\u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0432\u0441\u0435 \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e \u0431\u044b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u043e\u043b\u043e\u0433\u043e HTML, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;combobox-host>   &lt;input inputDirective\/>   &lt;clear-button\/>   &lt;dropdown>     &lt;option *ngFor=\"let item of items\" [value]=\"item\">       {{ item.label }}     &lt;\/option>   &lt;\/dropdown> &lt;\/combobox-host><\/code><\/pre>\n<p>\u0422.\u0435. \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u043e\u043d \u043c\u043e\u0433 \u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0431\u0440\u0430\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 HTML, \u0438 \u0432\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435.<\/p>\n<h2>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/h2>\n<p>\u041f\u043e\u0434\u0445\u043e\u0434 \u0432\u044b\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c, \u0432\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Select \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material.<\/p>\n<pre><code class=\"xml\">&lt;mat-select>     &lt;mat-option *ngFor=\"let food of foods\" [value]=\"food.value\">       {{food.viewValue}}     &lt;\/mat-option> &lt;\/mat-select> <\/code><\/pre>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/add\/10d\/34a\/add10d34ace62e6e8287efa8a05f5be5.png\" width=\"243\" height=\"244\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/add\/10d\/34a\/add10d34ace62e6e8287efa8a05f5be5.png\"\/><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Input \u043f\u043e\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0418 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c NgControl<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e \u0432\u0441\u0435\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0442\u043e \u044f \u0432\u0438\u0434\u0435\u043b \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>mat-select<\/code>) \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 <code>dropdown<\/code>, \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0448\u0435 (\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 input \u043f\u043e\u043b\u044f, \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430).<\/p>\n<p>\u0422.\u0435. \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0436\u0435\u0441\u0442\u043a\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432<code>mat-select<\/code> \u0438 \u0447\u0442\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0447\u0442\u043e \u0442\u043e \u0441\u0432\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u044c <code>mat-select<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c <code>input<\/code> \u0438\u043b\u0438 <code>option<\/code> \u043d\u0430 \u0441\u0432\u043e\u0439, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0433\u043e typescript \u043a\u043e\u0434\u0430 \u0447\u0442\u043e \u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437 \u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430 \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u0435\u0434\u0438\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<h2>\u041f\u043e\u0434\u0445\u043e\u0434 di-controls<\/h2>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f \u0432\u044b\u043d\u0435\u0441 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>di-controls<\/code> . \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u043c\u0435\u043b \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u0439 \u0441\u0430\u043c\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u043c\u043e\u0433 \u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u0441\u0430\u043c \u0440\u0435\u0448\u0430\u043b \u043a\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0435\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Select, \u0435\u0441\u0442\u044c 3 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043e\u0442 \u043c\u043e\u0434\u0435\u043b\u0438, \u044d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>Option (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430)<\/p>\n<\/li>\n<li>\n<p>Input<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Select<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u043d\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c, \u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e \u0431\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p><code>di-controls<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 <code>NgModel<\/code> \u0438 <code>FormControl<\/code>, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Dependency Injection \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0412\u0441\u0435 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u043c, \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 <code>di-controls<\/code>.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e Select<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u0430. \u0418 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 Input.<\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u0442\u043e\u043d\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u0442\u044c \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 <code>input<\/code>, \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043e\u043d\u0438 \u043c\u043e\u0433\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u0441\u043a\u0438 \u0438 \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0442\u0435\u0433\u0430, \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <code>di-controls<\/code> \u0438\u043c\u0435\u0435\u0442 4 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u043e\u043d\u0438 \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0411\u043e\u043b\u044c\u0448\u0435 \u043e \u043d\u0438\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 <a href=\"https:\/\/skoropadas.github.io\/di-controls\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438\u043d\u043f\u0443\u0442\u0430, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441  \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043e\u0442 <code>DIControl<\/code> \u043a\u043b\u0430\u0441\u0441\u0430. \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432.<\/p>\n<pre><code class=\"typescript\">import { Directive, Input, ElementRef, HostListener, inject } from '@angular\/core'; import { DIControl, injectHostControl } from 'di-controls';  @Directive({   selector: 'input[inputString]',   standalone: true, }) export class InputStringDirective&lt;T = unknown> extends DIControl&lt;T> {   @Input()   stringifyFn: (value: T) => string = String;      protected readonly inputElement: HTMLInputElement = inject(ElementRef).nativeElement;    constructor() {     super({       \/\/ \u0418\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442       \/\/ \u0447\u0442\u043e \u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438       host: injectHostControl({ optional: true }),       \/\/ \u041f\u0440\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 input \u0442\u0435\u0433\u0430       onIncomingUpdate: (value: T | null) => {         this.inputElement.value = value ? this.stringifyFn(value) : '';       },     });   }    @HostListener('input')   protected onInput(): void {     \/\/ \u041f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c     this.updateModel(this.inputElement.value as unknown as T);   }    @HostListener('blur')   protected onBlur(): void {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 touched \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e NgControl     this.touch();   } } <\/code><\/pre>\n<p><code>DIControl<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u0430\u044e\u0442 \u0432\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u0438 \u0445\u0443\u043a\u0430\u043c, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a <code>updateModel<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u043b\u0438 <code>touch<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430. \u0410 \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0430 <code>super<\/code>, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c.<\/p>\n<ul>\n<li>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>host<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0447\u0435\u0440\u0435\u0437 Dependency Injection \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>injectHostControl<\/code> , \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u043d\u043f\u0443\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0425\u0443\u043a <code>onIncomingUpdate<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0438\u0437 \u0432\u043d\u0435, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 <code>FormControl.setValue<\/code> \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <code>updateModel<\/code> \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0445\u0443\u043a.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u044b \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <code>stringifyFn<\/code> \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0441 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a \u0441\u0442\u0440\u043e\u043a\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e Option (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430). \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d \u0438\u043b\u0438 \u043d\u0435\u0442. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>DIStateControl<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432.<\/p>\n<pre><code class=\"typescript\">import {ChangeDetectionStrategy, Component, HostListener, inject} from '@angular\/core'; import {DICompareHost, DIStateControl, injectHostControl} from 'di-controls';  @Component({   selector: 'option',   standalone: true,   template: `&lt;ng-content>&lt;\/ng-content>`,   styles: [     `       :host {         display: block;         cursor: pointer;         padding: 8px 16px;          &amp;:hover {           background-color: #e4ecff;         }          \/\/ \u041c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f         &amp;[aria-checked=\"true\"] {           color: #fff;           background-color: #8dafff;         }       }     `,   ],   changeDetection: ChangeDetectionStrategy.OnPush, }) export class OptionComponent&lt;T> extends DIStateControl&lt;T> {   constructor() {     super({       \/\/ \u0418\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442       \/\/ \u0447\u0442\u043e \u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438       host: injectHostControl({ optional: true }),       \/\/ \u0418\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0445\u043e\u0441\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 DICompareHost       \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 compareFn \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432       compareHost: inject(DICompareHost, { optional: true }),     });   }    @HostListener('click')   onClick() {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043b\u0438\u043a     this.check();   } } <\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>compareHost<\/code>, \u043e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>DIStateControl<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c <code>checked<\/code> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441\u0430.<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0438\u043b\u0438, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0434\u043b\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>aria-checked=\"true\"<\/code>  \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d <code>DIStateControl<\/code> \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0433\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044a\u0435\u0434\u0435\u043d\u0438\u0442 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0430 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0448\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>position: absolute<\/code> \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>dropdown<\/code>, \u043d\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0432\u0435\u0440\u043b\u0435\u0435\u0432 \u043e\u0442 Angular CDK.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>DIControl<\/code>, \u043d\u0430\u043c \u0442\u0430\u043a \u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>DICompareHost<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>option<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component, Input } from '@angular\/core'; import { CommonModule } from '@angular\/common'; import {   DICompareFunction,   DICompareHost,   DIControl,   DIStateControl,   provideCompareHost,   provideHostControl, } from 'di-controls'; import { InputStringDirective } from '.\/input-string.directive';  @Component({   selector: 'my-select',   standalone: true,   imports: [CommonModule, InputStringDirective],   template: `     &lt;input inputString [stringifyFn]=\"stringifyFn\" readonly=\"true\" (focus)=\"open()\" (blur)=\"touch()\" \/>      &lt;div class=\"dropdown\" *ngIf=\"opened\">       &lt;ng-content>&lt;\/ng-content>     &lt;\/div>   `,   styles: [     `       :host {         position: relative;         display: inline-block;       }        input {         cursor: pointer;       }        .dropdown {         position: absolute;         display: flex;         flex-direction: column;         width: 100%;         border: 1px solid #ccc;         border-radius: 4px;         background: #fff;         z-index: 1;       }     `,   ],   providers: [     \/\/ \u041f\u0440\u043e\u0432\u0430\u0439\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u0445\u043e\u0441\u0442, \u0447\u0442\u043e \u0431\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b     \/\/ \u043c\u043e\u0433\u043b\u0438 \u0435\u0433\u043e \u043d\u0430\u0439\u0442\u0438 \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u043c     provideHostControl(SelectComponent),     \/\/ \u0422\u0430\u043a \u0436\u0435 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0438\u043c \u0435\u0433\u043e \u043a\u0430\u043a DICompareHost, \u0434\u043b\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f     \/\/ \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a compareFn     provideCompareHost(SelectComponent),   ],   changeDetection: ChangeDetectionStrategy.OnPush, }) export class SelectComponent&lt;T> extends DIControl&lt;T> implements DICompareHost&lt;T> {   @Input()   compareFn: DICompareFunction&lt;T> = (a, b) => a === b;    @Input()   stringifyFn: (value: T) => string = String;    protected opened: boolean = false;    constructor() {     super({       onChildControlChange: (control: DIControl&lt;T>) => {         \/\/ \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430         if (control instanceof DIStateControl) {           this.close();         }       },     });   }    open(): void {     this.opened = true;   }    close(): void {     this.opened = false;   } }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435 \u043d\u0430 \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u044d\u0442\u043e \u0441\u0435\u043a\u0446\u0438\u044e <code>providers<\/code>, \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u0445\u043e\u0441\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0438 \u043a\u0430\u043a <code>DICompareHost<\/code> \u0447\u0442\u043e \u0431\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u043b\u0438 \u0435\u0433\u043e \u043d\u0430\u0439\u0442\u0438.<\/p>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <code>stringifyFn<\/code> \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <code>inputString<\/code> \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u0442\u0440\u043e\u043a\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0438\u043d\u043f\u0443\u0442 \u043f\u043e\u043b\u0435 <code>readonly<\/code>, \u0442.\u043a. \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>select<\/code> \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043f\u0443\u0442\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0447\u0442\u043e \u043c\u044b \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c <code>dropdown<\/code> \u0447\u0435\u0440\u0435\u0437 \u0445\u0443\u043a <code>onChildControlChange<\/code>, \u044d\u0442\u0430 \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u043d\u0430\u044f \u043c\u0435\u0440\u0430 \u0438\u0437 \u0437\u0430 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>dropdown<\/code>, \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0438\u043a\u0430 &#171;\u0432\u043e \u0432\u043d\u0435&#187;. \u0421\u043e\u0431\u044b\u0442\u0438\u0435 <code>blur<\/code> \u0443 \u0438\u043d\u043f\u0443\u0442\u0430 \u043c\u044b \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u043e \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0440\u0430\u043d\u044c\u0448\u0435 \u0447\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u043a\u043b\u0438\u043a \u043f\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441\u043f\u0438\u0441\u043a\u0430 \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c <code>dropdown<\/code> \u0437\u0430\u043a\u0440\u044b\u043b\u0441\u044f \u0431\u044b \u0431\u0435\u0437 \u0432\u044b\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0432 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"xml\">&lt;my-select [(ngModel)]=\"model\" [compareFn]=\"compareFruits\" [stringifyFn]=\"displayFruit\">   &lt;option *ngFor=\"let item of items\" [value]=\"item\">{{ item.name }}&lt;\/option> &lt;\/my-select><\/code><\/pre>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u043e\u0447\u0442\u0438 \u043a\u0430\u043a \u0432 Angular Material, \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u043c\u0435\u0441\u0442\u043e <code>option<\/code>, \u0432\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0440\u0430\u0434\u0438\u043e \u043a\u043d\u043e\u043f\u043a\u0438, \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u044b \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0410 \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u0442\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 <code>select<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0441\u043a\u0430\u0436\u0435\u043c <code>select-host<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0441\u0442\u0430\u043d\u0435\u0442\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c <code>&lt;ng-content><\/code> \u0432\u043c\u0435\u0441\u0442\u043e \u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0430 \u0438\u043d\u043f\u0443\u0442 \u043f\u043e\u043b\u044f \u0438 <code>dropdown<\/code> \u0432 \u0442\u0435\u043c\u043f\u043b\u0435\u0439\u0442\u0435, \u0442\u043e \u0432\u0430\u0448\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043f\u043e\u043b\u043d\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0435\u0437 \u0443\u0449\u0435\u0440\u0431\u0430 \u0434\u043b\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/6549548eff7a727696f97fdc\" data-style=\"\" id=\"6549548eff7a727696f97fdc\" width=\"\"><\/div>\n<h2>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c?<\/h2>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c <code>check()<\/code> \u043c\u0435\u0442\u043e\u0434 \u0443 <code>option<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u0434\u043b\u044f <code>@Input() value<\/code> \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u043e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0435\u0433\u043e \u043c\u043e\u0434\u0435\u043b\u0438, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u043e\u043d \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0441\u0432\u043e\u0435 <code>checked<\/code>  \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f <code>@Input() value === model<\/code> . \u0414\u0430\u043b\u0435\u0435 \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438 (<code>inputString<\/code> \u0438 <code>my-select<\/code>).<\/p>\n<p>\u0422\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442 \u0438 \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043d\u0443, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u043d\u043e\u0432\u0438\u043c \u043c\u043e\u0434\u0435\u043b\u044c <code>my-select<\/code> \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <code>ngModel<\/code>, \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u0430,  <code>option<\/code> ,<code>input<\/code>  \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u044f\u0442 \u043d\u043e\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 <code>di-controls<\/code> \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u0432\u0430\u0448\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b-\u0445\u043e\u0441\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b-\u0445\u043e\u0441\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>injectHostControl({ skipSelf: true })<\/code>, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u043c\u0435\u0436\u0434\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0434\u0435\u0440\u0435\u0432\u044c\u044f\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430!<\/p>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043a\u0438\u0439, \u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u043d\u0435\u0442, \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442 \u0432\u0430\u0441, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0432\u0430\u0441 \u043d\u0435 \u043a\u0430\u043a \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442.<\/p>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0432\u044b\u0448\u0435, \u0430 \u0441\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0435\u0435.<\/p>\n<p>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a \u0436\u0435 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c \u0443\u0436\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 <code>di-controls<\/code> \u0432\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043b\u0438\u0448\u044c \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443.<\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u043c\u043e\u0439 \u043e\u043f\u044b\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 UI \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0431\u044b\u043b \u0432\u0430\u043c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0438\u0445 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445! \u0422\u0430\u043a \u0436\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>Github &#8212; <a href=\"https:\/\/github.com\/skoropadas\/di-controls\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/skoropadas\/di-controls<\/a><br \/>Documentation &#8212; <a href=\"https:\/\/skoropadas.github.io\/di-controls\" rel=\"noopener noreferrer nofollow\">https:\/\/skoropadas.github.io\/di-controls<\/a><br \/>Stackblitz Demo &#8212; <a href=\"https:\/\/stackblitz.com\/edit\/di-controls-select?file=src%2Fmain.ts\" rel=\"noopener noreferrer nofollow\">https:\/\/stackblitz.com\/edit\/di-controls-select?file=src%2Fmain.ts<\/a><\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/772136\/\"> https:\/\/habr.com\/ru\/articles\/772136\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442, \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u0441\u0432\u043e\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u0430 \u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0442\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u0435\u043d \u0437\u0430 \u0441\u0432\u043e\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b?<\/h3>\n<p>\u0421\u043f\u0435\u0440\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0447\u0442\u043e \u043f\u043e\u0434 UI \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438 \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u044e\u0442\u0441\u044f \u043b\u044e\u0431\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u043d\u0435\u0435, Combobox, Checkbox, Checkbox Group, Chip, \u0438 \u0442.\u0434. \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 <code>NgModel<\/code> \u0438\u043b\u0438 <code>FormControl<\/code>.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u041e\u0442\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>\u042f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432  \u0432 \u0441\u0432\u043e\u0435\u0439 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043b\u0430 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. \u041c\u044b \u0438\u043c\u0435\u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0445 \u043e\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c \u0441\u043b\u0443\u0447\u0430\u0438 \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0431\u044b\u043b\u043e \u0434\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0435\u0433\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 API. \u042d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u0438\u0437 \u0437\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u0435 UX, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c \u0442\u0430\u043a, \u0447\u0442\u043e \u0432 \u0434\u0432\u0443\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u043c\u043e\u0433 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u0440\u0430\u0437\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0431\u044b\u043b\u0438 \u043d\u0435 \u0440\u0435\u0434\u043a\u043e\u0441\u0442\u044c, \u0438 \u044f \u043d\u0430\u0447\u0430\u043b \u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u0434 \u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e \u0431\u044b \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u0438\u043c\u0435\u043b\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0433\u043b\u0438 \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u044b \u043f\u0443\u0442\u0435\u043c \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u044c \u0442\u0435\u0433\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0432\u044b\u043d\u0435\u0441 \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0438\u0445 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f.<\/p>\n<h2>\u0427\u0435\u0433\u043e \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0434\u043e\u0441\u0442\u0438\u0447\u044c?<\/h2>\n<p>\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0447\u0442\u043e \u0431\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438\u043c\u0435\u043b\u0430 \u0443\u0436\u0435 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u043b \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e\u0435 API, \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u043e\u0433 \u0431\u044b\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d \u0432 \u043b\u044e\u0431\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u043c\u043e\u0433 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;combobox [items]=[items] [ngModel]=\"model\">&lt;\/combobox><\/code><\/pre>\n<p>\u041d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u044b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u0432\u0441\u0435 \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0447\u0442\u043e \u0431\u044b \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0433\u043e\u043b\u043e\u0433\u043e HTML, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;combobox-host>   &lt;input inputDirective\/>   &lt;clear-button\/>   &lt;dropdown>     &lt;option *ngFor=\"let item of items\" [value]=\"item\">       {{ item.label }}     &lt;\/option>   &lt;\/dropdown> &lt;\/combobox-host><\/code><\/pre>\n<p>\u0422.\u0435. \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441 \u043e\u043d \u043c\u043e\u0433 \u0431\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0431\u0440\u0430\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 HTML, \u0438 \u0432\u0441\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u0430\u043a \u0435\u0434\u0438\u043d\u043e\u0435 \u0446\u0435\u043b\u043e\u0435.<\/p>\n<h2>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434<\/h2>\n<p>\u041f\u043e\u0434\u0445\u043e\u0434 \u0432\u044b\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c, \u0432\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Select \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 Angular Material.<\/p>\n<pre><code class=\"xml\">&lt;mat-select>     &lt;mat-option *ngFor=\"let food of foods\" [value]=\"food.value\">       {{food.viewValue}}     &lt;\/mat-option> &lt;\/mat-select> <\/code><\/pre>\n<figure class=\"\"><\/figure>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043a\u043b\u0438\u043a\u0430\u0435\u0442 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 Input \u043f\u043e\u043b\u044f<\/p>\n<\/li>\n<li>\n<p>\u0418 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c NgControl<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e \u0432\u0441\u0435\u0445 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0442\u043e \u044f \u0432\u0438\u0434\u0435\u043b \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <code>mat-select<\/code>) \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0441\u0435 \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u043e\u0431\u0435\u0440\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 <code>dropdown<\/code>, \u043f\u043e\u0434\u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u0448\u0435 (\u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 input \u043f\u043e\u043b\u044f, \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430).<\/p>\n<p>\u0422.\u0435. \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0436\u0435\u0441\u0442\u043a\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b \u043e\u0442 \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432<code>mat-select<\/code> \u0438 \u0447\u0442\u043e \u0431\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0447\u0442\u043e \u0442\u043e \u0441\u0432\u043e\u0435 \u0432\u043d\u0443\u0442\u0440\u044c <code>mat-select<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c <code>input<\/code> \u0438\u043b\u0438 <code>option<\/code> \u043d\u0430 \u0441\u0432\u043e\u0439, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0435\u0433\u043e typescript \u043a\u043e\u0434\u0430 \u0447\u0442\u043e \u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437 \u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430 \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0434\u043d\u043e\u043c \u0435\u0434\u0438\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<h2>\u041f\u043e\u0434\u0445\u043e\u0434 di-controls<\/h2>\n<p>\u041a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u0441\u0432\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f \u0432\u044b\u043d\u0435\u0441 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <code>di-controls<\/code> . \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e \u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u043c\u0435\u043b \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u0439 \u0441\u0430\u043c\u043e\u0439 \u043c\u043e\u0434\u0435\u043b\u0438, \u043c\u043e\u0433 \u0435\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u0441\u0430\u043c \u0440\u0435\u0448\u0430\u043b \u043a\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u0435\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n<p>\u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 Select, \u0435\u0441\u0442\u044c 3 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435 \u043e\u0442 \u043c\u043e\u0434\u0435\u043b\u0438, \u044d\u0442\u043e:<\/p>\n<ul>\n<li>\n<p>Option (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430)<\/p>\n<\/li>\n<li>\n<p>Input<\/p>\n<\/li>\n<li>\n<p>\u0418 \u0441\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Select<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u043d\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u043b\u044c, \u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u0435\u043c\u0443 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0447\u0442\u043e \u0431\u044b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p><code>di-controls<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044b \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 <code>NgModel<\/code> \u0438 <code>FormControl<\/code>, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u044c \u043c\u0435\u0436\u0434\u0443 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Dependency Injection \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0412\u0441\u0435 \u0447\u0442\u043e \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u043c, \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0443, \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 <code>di-controls<\/code>.<\/p>\n<h2>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0435\u0433\u043e Select<\/h2>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u0430. \u0418 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u0441 Input.<\/p>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u043c \u0442\u043e\u043d\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u0442\u044c \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 <code>input<\/code>, \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043e\u043d\u0438 \u043c\u043e\u0433\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0430\u0441\u043a\u0438 \u0438 \u0438\u043c\u0435\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c \u0442\u0435\u0433\u0430, \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <code>di-controls<\/code> \u0438\u043c\u0435\u0435\u0442 4 \u043a\u043b\u0430\u0441\u0441\u0430 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 \u0432\u0430\u0448\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432, \u043e\u043d\u0438 \u0443\u043c\u0435\u044e\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0411\u043e\u043b\u044c\u0448\u0435 \u043e \u043d\u0438\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432 <a href=\"https:\/\/skoropadas.github.io\/di-controls\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438\u043d\u043f\u0443\u0442\u0430, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441  \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043e\u0442 <code>DIControl<\/code> \u043a\u043b\u0430\u0441\u0441\u0430. \u042d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432.<\/p>\n<pre><code class=\"typescript\">import { Directive, Input, ElementRef, HostListener, inject } from '@angular\/core'; import { DIControl, injectHostControl } from 'di-controls';  @Directive({   selector: 'input[inputString]',   standalone: true, }) export class InputStringDirective&lt;T = unknown> extends DIControl&lt;T> {   @Input()   stringifyFn: (value: T) => string = String;      protected readonly inputElement: HTMLInputElement = inject(ElementRef).nativeElement;    constructor() {     super({       \/\/ \u0418\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442       \/\/ \u0447\u0442\u043e \u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438       host: injectHostControl({ optional: true }),       \/\/ \u041f\u0440\u0438 \u0432\u0445\u043e\u0434\u044f\u0449\u0435\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 input \u0442\u0435\u0433\u0430       onIncomingUpdate: (value: T | null) => {         this.inputElement.value = value ? this.stringifyFn(value) : '';       },     });   }    @HostListener('input')   protected onInput(): void {     \/\/ \u041f\u0440\u0438 \u0432\u0432\u043e\u0434\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043c\u043e\u0434\u0435\u043b\u044c     this.updateModel(this.inputElement.value as unknown as T);   }    @HostListener('blur')   protected onBlur(): void {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 touched \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e NgControl     this.touch();   } } <\/code><\/pre>\n<p><code>DIControl<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0438\u0437 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u0430\u044e\u0442 \u0432\u0430\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u043c \u0438 \u0445\u0443\u043a\u0430\u043c, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a <code>updateModel<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438\u043b\u0438 <code>touch<\/code> \u0434\u043b\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430. \u0410 \u0442\u0430\u043a \u0436\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0430 <code>super<\/code>, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c.<\/p>\n<ul>\n<li>\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>host<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0447\u0435\u0440\u0435\u0437 Dependency Injection \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>injectHostControl<\/code> , \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u043d\u043f\u0443\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0441 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p>\u0425\u0443\u043a <code>onIncomingUpdate<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u043e\u0433\u0434\u0430 \u043c\u043e\u0434\u0435\u043b\u044c \u0431\u044b\u043b\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0438\u0437 \u0432\u043d\u0435, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 <code>FormControl.setValue<\/code> \u0438\u043b\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430. \u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <code>updateModel<\/code> \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u0445\u0443\u043a.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u044b \u0442\u0430\u043a \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 <code>stringifyFn<\/code> \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043c\u043e\u0447\u044c \u0441 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a \u0441\u0442\u0440\u043e\u043a\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u043e Option (\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430). \u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043f\u0438\u0441\u043a\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d \u0438\u043b\u0438 \u043d\u0435\u0442. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>DIStateControl<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432.<\/p>\n<pre><code class=\"typescript\">import {ChangeDetectionStrategy, Component, HostListener, inject} from '@angular\/core'; import {DICompareHost, DIStateControl, injectHostControl} from 'di-controls';  @Component({   selector: 'option',   standalone: true,   template: `&lt;ng-content>&lt;\/ng-content>`,   styles: [     `       :host {         display: block;         cursor: pointer;         padding: 8px 16px;          &amp;:hover {           background-color: #e4ecff;         }          \/\/ \u041c\u0435\u043d\u044f\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f         &amp;[aria-checked=\"true\"] {           color: #fff;           background-color: #8dafff;         }       }     `,   ],   changeDetection: ChangeDetectionStrategy.OnPush, }) export class OptionComponent&lt;T> extends DIStateControl&lt;T> {   constructor() {     super({       \/\/ \u0418\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442       \/\/ \u0447\u0442\u043e \u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0435\u043b\u0438       host: injectHostControl({ optional: true }),       \/\/ \u0418\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0445\u043e\u0441\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 DICompareHost       \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 compareFn \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432       compareHost: inject(DICompareHost, { optional: true }),     });   }    @HostListener('click')   onClick() {     \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043b\u0438\u043a     this.check();   } } <\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>compareHost<\/code>, \u043e\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <code>DIStateControl<\/code> \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c <code>checked<\/code> \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0438\u043c\u043c\u0443\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u0434\u0430\u043b\u0435\u0435 \u043c\u044b \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u0431\u043e\u0431\u043e\u043a\u0441\u0430.<\/p>\n<p>\u0422\u0430\u043a \u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0438\u043b\u0438, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0434\u043b\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>aria-checked=\"true\"<\/code>  \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d <code>DIStateControl<\/code> \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0442\u0435\u0433\u0430.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044a\u0435\u0434\u0435\u043d\u0438\u0442 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0430 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u044b\u0448\u0435. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u044f \u0431\u0443\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>position: absolute<\/code> \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>dropdown<\/code>, \u043d\u043e \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u044d\u0442\u043e \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u0432\u0435\u0440\u043b\u0435\u0435\u0432 \u043e\u0442 Angular CDK.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>DIControl<\/code>, \u043d\u0430\u043c \u0442\u0430\u043a \u0436\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <code>DICompareHost<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u043c \u0432\u043d\u0443\u0442\u0440\u0438 <code>option<\/code> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component, Input } from '@angular\/core'; import { CommonModule } from '@angular\/common'; import {   DICompareFunction,<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-359422","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/359422","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=359422"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/359422\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=359422"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=359422"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=359422"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}