{"id":443626,"date":"2024-12-28T03:00:17","date_gmt":"2024-12-28T03:00:17","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443626"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443626","title":{"rendered":"<span>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432 Angular: \u0441\u043e\u0432\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043b\u0438<\/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\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 Angular\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043d\u043e\u00a0\u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0432\u0430\u0443\u2011\u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441\u00a0\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438: \u0441\u0442\u0438\u043b\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0435\u00a0\u0442\u0430\u043a, \u043a\u0430\u043a\u00a0\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0444\u043e\u0440\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0430\u00a0\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u00a0\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043d\u0430\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0417\u043d\u0430\u043a\u043e\u043c\u043e? \u042d\u0442\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437\u00a0\u0443\u0447\u0435\u0442\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 Angular.<\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u043a\u0430\u043a\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0432\u00a0Angular. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0442\u0438\u043b\u044c\u043d\u043e\u0435, \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0441\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a Angular.<\/p>\n<p><strong>\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a?<\/strong><\/p>\n<p>\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0441\u043e\u043c\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong>\u00a0\u2014 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435\u00a0\u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u00a0\u0442\u0440\u0430\u0442\u044f \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430<\/strong>\u00a0\u2014 \u043d\u0435\u00a0\u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u00a0\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0435 \u0432\u043b\u0430\u0434\u0435\u044e\u0442 CSS, \u0430\u00a0\u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u00a0\u0441\u0442\u0438\u043b\u044f\u0445 \u0438 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0427\u0443\u0432\u0441\u0442\u0432\u043e \u0432\u043a\u0443\u0441\u0430<\/strong>\u00a0\u2014 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0432\u00a0\u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043d\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u044f\u0442 \u0437\u0430\u00a0\u0435\u0434\u0438\u043d\u044b\u043c \u0441\u0442\u0438\u043b\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u00a0\u2014 \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u044b\u0431\u043e\u0440.<\/p>\n<p><strong>\u041c\u043e\u0436\u043d\u043e\u00a0\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb Angular?<\/strong><\/p>\n<p>\u0414\u0430, \u043c\u043e\u0436\u043d\u043e, \u0438 \u044d\u0442\u043e <strong>Angular Material<\/strong>.<\/p>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u00a0\u043b\u0438 \u043e\u043d?<\/strong><\/p>\n<p>\u0412\u00a0\u0446\u0435\u043b\u043e\u043c, \u0434\u0430, \u043d\u043e\u00a0\u0441\u00a0\u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u00a0\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u043a\u0435 Material Design, \u0442\u043e Angular Material \u0432\u0430\u043c \u0432\u0440\u044f\u0434\u00a0\u043b\u0438 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442. <\/p>\n<blockquote>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u0442\u044c \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0447\u043d\u043e \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f\u00a0\u2014 <a href=\"https:\/\/material.angular.io\/cdk\/categories\" rel=\"noopener noreferrer nofollow\">@angular\/cdk<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0430\u0448\u0438\u043c \u043b\u0443\u0447\u0448\u0438\u043c \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u043e\u043c \u0432\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u00a0Angular.<\/p>\n<\/blockquote>\n<p><strong>\u041a\u0430\u043a\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u00a0\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430?<\/strong><\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0432\u0435\u0441\u0442\u0438 \u043a\u00a0\u0442\u0440\u0435\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c:<\/p>\n<ol>\n<li>\n<p><strong>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/strong>. Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u0432\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u043d\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0445 CSS \u043f\u0440\u0430\u0432\u0438\u043b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441\u00a0\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438<\/strong>. \u041d\u0443\u0436\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u0447\u0442\u043e\u00a0\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u043c\u0435\u0448\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0447\u0435\u0440\u0435\u0437 TypeScript.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f\u00a0JavaScript\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong>. \u041c\u043d\u043e\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u00a0JavaScript \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\u00a0\u2014 \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u043f\u043e\u043f\u0430\u043f\u044b, \u0442\u0443\u043b\u0442\u0438\u043f\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0440\u0443\u0434\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u00a0Angular, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437\u00a0CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438<\/strong><\/p>\n<p>\u041c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044f <a href=\"https:\/\/materializeweb.com\/\" rel=\"noopener noreferrer nofollow\">Materialize<\/a> \u0432 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0442\u0438\u043b\u044c \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 Materialize.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u044f\u043c\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432 Angular<\/h2>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a?<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0442\u0430\u0438\u0442 \u0432\u00a0\u0441\u0435\u0431\u0435 \u0440\u044f\u0434 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ol>\n<li>\n<p><strong>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/strong> CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438\u00a0\u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043b\u0438\u00a0\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0434\u043b\u044f\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u00a0\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u0441\u00a0\u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u043c, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0441 error, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430\u00a0\u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0447\u0435\u0440\u0435\u0437 javascript.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0435\u0439 \u0441\u0442\u0438\u043b\u0435\u0439.<\/strong> Angular \u043f\u043e\u00a0\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u044f \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e CSS\u2011\u043f\u0440\u0430\u0432\u0438\u043b, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430\u00a0DOM\u2011\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a:host \u0438:host\u2011context. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435::ng\u2011deep \u0434\u043b\u044f\u00a0\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u043d\u0435\u00a0\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u043a\u0430\u043a\u00a0\u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 (deprecated).<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u044f \u0438\u043c\u0435\u043d.<\/strong> \u0415\u0441\u043b\u0438 \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u043b\u0438\u00a0\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0447\u0442\u043e\u00a0\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a\u00a0\u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c JavaScript.<\/strong> \u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0\u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u043f\u043e\u043f\u0430\u043f\u044b \u0438\u043b\u0438\u00a0\u0442\u0443\u043b\u0442\u0438\u043f\u044b, \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f JavaScript. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u0437\u00a0CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u043d\u0435\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u00a0Angular \u0438\u0437\u2011\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0435\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0DOM.<\/p>\n<\/li>\n<li>\n<p><strong>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0438\u0445 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/strong> \u041f\u0440\u044f\u043c\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0447\u0442\u043e\u00a0\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a\u00a0\u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u00a0\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 (SSR).<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f?<\/h4>\n<p>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u00a0\u0443\u0447\u0435\u0442\u043e\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Angular.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0438\u043c\u0435\u043d \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u00a0\u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0JavaScript\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043e\u0442\u00a0\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u00a0\u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a <a href=\"https:\/\/materializeweb.com\/getting-started.html\" rel=\"noopener noreferrer nofollow\"><strong>Materialize<\/strong><\/a> \u0432\u00a0Angular \u043d\u0430\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 Angular, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435. \u0414\u0430\u043d\u043d\u0430\u044f \u0433\u043b\u0430\u0432\u0430 \u043d\u0443\u0436\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438.\u00a0\u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 github, \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 &#8212;\u00a0<a href=\"https:\/\/github.com\/Fafnur\/angular-materialize\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Fafnur\/angular-materialize<\/a><\/p>\n<\/blockquote>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\">npx -p @angular\/cli ng new angular-materialize<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ed3\/b9c\/b43\/ed3b9cb4391fb76573ff9ae73b5e996e.png\" alt=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Angular\" title=\"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Angular\" width=\"1449\" height=\"631\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ed3\/b9c\/b43\/ed3b9cb4391fb76573ff9ae73b5e996e.png\"\/><\/p>\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Angular<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c \u0432\u0435\u043d\u0434\u043e\u0440\u044b:<\/p>\n<pre><code class=\"bash\">rm -rf node_modules rm package-lock.json<\/code><\/pre>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c <code>yarn<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<pre><code class=\"bash\">yarn set version stable yarn config set nodeLinker node-modules<\/code><\/pre>\n<p>\u0418\u0441\u043a\u043b\u044e\u0447\u0438\u043c \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 <code>.gitignore<\/code>:<\/p>\n<pre><code># Custom .yarn .angular *.patch .husky\/* junit.xml \/junit .env package-lock.json yarn.lock .nx src\/i18n\/source.xlf<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>eslint<\/code>:<\/p>\n<pre><code class=\"bash\">yarn ng add @angular-eslint\/schematics<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432:<\/p>\n<pre><code class=\"bash\">yarn add -D eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ @ts-check const eslint = require('@eslint\/js'); const tseslint = require('typescript-eslint'); const angular = require('angular-eslint'); const eslintPluginSimpleImportSort = require('eslint-plugin-simple-import-sort'); const eslintPluginImport = require('eslint-plugin-import'); const eslintConfigPrettier = require('eslint-config-prettier');  module.exports = tseslint.config(   {     ignores: ['**\/dist', '**\/public'],   },   {     files: ['**\/*.ts'],     extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended],     processor: angular.processInlineTemplates,     plugins: {       'simple-import-sort': eslintPluginSimpleImportSort,       import: eslintPluginImport,     },     rules: {       '@typescript-eslint\/naming-convention': [         'error',         {           selector: 'default',           format: ['camelCase'],           leadingUnderscore: 'allow',           trailingUnderscore: 'allow',         },         {           selector: 'variable',           format: ['camelCase', 'UPPER_CASE'],           leadingUnderscore: 'allow',           trailingUnderscore: 'allow',         },         {           selector: 'typeLike',           format: ['PascalCase'],         },         {           selector: 'enumMember',           format: ['PascalCase'],         },         {           selector: 'property',           format: null,           filter: {             regex: '^(host)$',             match: false,           },         },       ],       complexity: 'error',       'max-len': ['error', { code: 140 }],       'no-new-wrappers': 'error',       'no-throw-literal': 'error',       'sort-imports': 'off',       'import\/no-unresolved': 'off',       'import\/named': 'off',       'import\/first': 'off',       'simple-import-sort\/exports': 'error',       'simple-import-sort\/imports': [         'error',         {           groups: [['^\\\\u0000'], ['^@?(?!amz)\\\\w'], ['^@amz?\\\\w'], ['^\\\\w'], ['^[^.]'], ['^\\\\.']],         },       ],       'import\/newline-after-import': 'error',       'import\/no-duplicates': 'error',       '@typescript-eslint\/consistent-type-definitions': 'error',       'no-shadow': 'off',       '@typescript-eslint\/no-shadow': 'error',       'no-invalid-this': 'off',       '@typescript-eslint\/no-invalid-this': ['warn'],       '@angular-eslint\/no-host-metadata-property': 'off',       'no-extra-semi': 'off',       '@angular-eslint\/directive-selector': [         'error',         {           type: 'attribute',           prefix: 'app',           style: 'camelCase',         },       ],       '@angular-eslint\/component-selector': [         'error',         {           type: 'element',           prefix: 'app',           style: 'kebab-case',         },       ],       '@typescript-eslint\/consistent-type-imports': 'error',     },   },   {     files: ['**\/*.html'],     extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],     rules: {},   },   eslintConfigPrettier, );<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>prettier<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add -D prettier<\/code><\/pre>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 <code>.prettierrc.json<\/code>:<\/p>\n<pre><code class=\"json\">{   \"bracketSpacing\": true,   \"printWidth\": 140,   \"semi\": true,   \"singleQuote\": true,   \"tabWidth\": 2,   \"useTabs\": false }<\/code><\/pre>\n<p>\u0418\u0441\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 <code>.prettierignore<\/code>:<\/p>\n<pre><code># Add files here to ignore them from prettier formatting \/dist \/coverage .angular<\/code><\/pre>\n<p>\u0412\u00a0IDE \u0432\u00a0\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 <code>prettier<\/code>\u00a0\u2014 <code>**\/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}<\/code>.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 <code>devDependencies<\/code>.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>@angular\/cdk<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add -D @angular\/cdk<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e:<\/p>\n<pre><code class=\"bash\">yarn ng add @angular\/localize<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5f1\/860\/b87\/5f1860b874633de82326c9e087c4d49d.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Angular\" title=\"\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Angular\" width=\"915\" height=\"297\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f1\/860\/b87\/5f1860b874633de82326c9e087c4d49d.png\"\/><\/p>\n<div><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Angular<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u043a\u0430\u0436\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c \u0432 <code>angular.json<\/code>:<\/p>\n<pre><code class=\"json\">    \"i18n\": {         \"sourceLocale\": \"en-US\",         \"locales\": {           \"ru\": {             \"translation\": \"src\/i18n\/messages.xlf\",             \"baseHref\": \"\"           }         }       },       \"architect\": {         \"build\": {           \"builder\": \"@angular-devkit\/build-angular:application\",           \"options\": {             \"localize\": [\"ru\"], <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>src\/i18n\/messages.xlf<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt; &lt;xliff version=\"1.2\" xmlns=\"urn:oasis:names:tc:xliff:document:1.2\"&gt;   &lt;file source-language=\"en-US\" datatype=\"plaintext\" original=\"ng2.template\"&gt;     &lt;body&gt;     &lt;\/body&gt;   &lt;\/file&gt; &lt;\/xliff&gt;<\/code><\/pre>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c boilerplate \u0438\u0437 <code>AppComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component } from '@angular\/core'; import { RouterOutlet } from '@angular\/router';  @Component({   selector: 'app-root',   imports: [RouterOutlet],   template: '&lt;router-outlet\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppComponent {}<\/code><\/pre>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<pre><code class=\"bash\">rm src\/app\/app.component.html rm src\/app\/app.component.scss<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"bash\">yarn ng serve <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/360\/69c\/74b\/36069c74b8752177a0dec93725db47ce.png\" alt=\"\u0427\u0438\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\" title=\"\u0427\u0438\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\" width=\"1140\" height=\"1154\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/360\/69c\/74b\/36069c74b8752177a0dec93725db47ce.png\"\/><\/p>\n<div><figcaption>\u0427\u0438\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043e\u043c\u0430\u0448\u043d\u044e\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0441\u0445\u0435\u043c\u0430\u0442\u0438\u043a \u0432 <code>angular.json<\/code>:<\/p>\n<pre><code class=\"json\">{   \"$schema\": \".\/node_modules\/@angular\/cli\/lib\/config\/schema.json\",   \"version\": 1,   \"newProjectRoot\": \"projects\",   \"projects\": {     \"angular-materialize\": {       \"projectType\": \"application\",       \"schematics\": {         \"@schematics\/angular:component\": {           \"style\": \"scss\",           \"changeDetection\": \"OnPush\",           \"skipTests\": true         }       },<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"bash\">yarn ng g c home-page<\/code><\/pre>\n<p>\u0427\u0443\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:<\/p>\n<pre><code class=\"bash\">mkdir src\/app\/home mkdir src\/app\/home\/page mkdir src\/app\/home\/page\/lib echo &gt;src\/app\/home\/page\/index.ts<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 <code>src\/app\/home\/page<\/code>.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0432 <code>src\/app\/home\/page\/index.ts<\/code>:<\/p>\n<pre><code class=\"typescript\">import { HomePageComponent } from '.\/lib\/home-page.component'; export default { HomePageComponent };<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0430\u043b\u0438\u0430\u0441 \u0432 <code>tsconfig.json<\/code>:<\/p>\n<pre><code class=\"json\">    \"baseUrl\": \".\",     \"paths\": {       \"@amz\/home\/page\": [\"src\/app\/home\/page\/index.ts\"],     } <\/code><\/pre>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>standalore strict<\/code>:<\/p>\n<pre><code class=\"json\">\"angularCompilerOptions\": {   \u2026   \"strictStandalone\": true } <\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043d\u0430\u0448\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 <code>app.routes.ts<\/code>:<\/p>\n<pre><code class=\"typescript\">import type { Route } from '@angular\/router';  export const routes: Route[] = [   {     path: '',     loadComponent: () =&gt; import('@amz\/home\/page'),   }, ]; <\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6ad\/485\/501\/6ad4855019c12739012960ff3bc9619a.png\" alt=\"\u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\" title=\"\u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443\" width=\"1140\" height=\"1154\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ad\/485\/501\/6ad4855019c12739012960ff3bc9619a.png\"\/><\/p>\n<div><figcaption>\u0414\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/figcaption><\/div>\n<\/figure>\n<h2>\u041f\u0440\u044f\u043c\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f Materialize<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 CSS \u0438\u0437 <code>node_modules<\/code> \u0438 \u043d\u0430\u0443\u0447\u0438\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b CSS:<\/p>\n<p>\u0412 <code>angular.json<\/code> \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 SCSS:<\/p>\n<pre><code class=\"json\">   \"architect\": {         \"build\": {           \"builder\": \"@angular-devkit\/build-angular:application\",           \"options\": {                \u2026               \"stylePreprocessorOptions\": {                 \"includePaths\": [\"node_modules\", \".\/\"]                }, <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 <code>materialize<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add -D @materializecss\/materialize<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a <a href=\"https:\/\/m3.material.io\/\" rel=\"noopener noreferrer nofollow\">Material Design<\/a> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0448\u0440\u0438\u0444\u0442 Roboto, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0435\u0433\u043e \u0432 <code>index.html<\/code>:<\/p>\n<pre><code class=\"xml\">  &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/&gt;   &lt;link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/&gt;   &lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@300;400;500;700&amp;display=swap\" rel=\"stylesheet\" \/&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c materialize \u0432 <code>styles.scss<\/code>:<\/p>\n<pre><code class=\"css\">@import '@materializecss\/materialize\/dist\/css\/materialize.min';<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/486\/9bd\/575\/4869bd575e38ff19ec1b7c929eccdd4a.png\" alt=\"\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 Materialize\" title=\"\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 Materialize\" width=\"2209\" height=\"1255\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/486\/9bd\/575\/4869bd575e38ff19ec1b7c929eccdd4a.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 Materialize<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0447\u0442\u043e \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u043b\u0438\u0441\u044c \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0441\u0442\u0438\u043b\u0438. <\/p>\n<blockquote>\n<p>\u0414\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044d\u0442\u043e \u043d\u0435 \u0441\u0442\u0440\u0430\u0448\u043d\u043e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435, \u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439.<\/p>\n<\/blockquote>\n<p>\u041e\u0442\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e import \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u043a\u0430\u043a \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c20\/dd6\/617\/c20dd6617d8c56c9aa41927c07f1b8d8.png\" width=\"790\" height=\"620\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c20\/dd6\/617\/c20dd6617d8c56c9aa41927c07f1b8d8.png\"\/><\/figure>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0412\u043e\u0437\u044c\u043c\u0435\u043c <a href=\"https:\/\/materializeweb.com\/text-inputs.html\" rel=\"noopener noreferrer nofollow\">input<\/a> \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e:<\/p>\n<pre><code class=\"xml\">&lt;form class=\"row\" style=\"gap: 1em;\"&gt;   &lt;div class=\"s12 m6 input-field\"&gt;     &lt;input id=\"first_name\" type=\"text\" placeholder=\" \" maxlength=\"20\"&gt;     &lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;     &lt;span class=\"supporting-text\"&gt;Supporting Text&lt;\/span&gt;   &lt;\/div&gt;    &lt;div class=\"s12 m6 input-field outlined\"&gt;     &lt;input id=\"last_name\" type=\"text\" placeholder=\" \" maxlength=\"20\"&gt;     &lt;label for=\"last_name\"&gt;Last Name&lt;\/label&gt;     &lt;!--&lt;span class=\"supporting-text\"&gt;Supporting Text&lt;\/span&gt;--&gt;   &lt;\/div&gt;    &lt;div class=\"s12 m6 input-field\"&gt;     &lt;input id=\"disabled\" type=\"text\" placeholder=\" \" value=\"I am not editable\" disabled&gt;     &lt;label for=\"disabled\"&gt;Disabled&lt;\/label&gt;   &lt;\/div&gt;    &lt;div class=\"s12 m6 input-field outlined\"&gt;     &lt;input id=\"disabled\" type=\"text\" placeholder=\" \" value=\"Not editable too\" disabled&gt;     &lt;label for=\"disabled\"&gt;Disabled&lt;\/label&gt;   &lt;\/div&gt;    &lt;div class=\"s12 m6 input-field\"&gt;     &lt;div class=\"prefix\"&gt;&lt;i class=\"material-icons\"&gt;place&lt;\/i&gt;&lt;\/div&gt;     &lt;div class=\"suffix\"&gt;&lt;i class=\"material-icons\"&gt;gps_fixed&lt;\/i&gt;&lt;\/div&gt;     &lt;input id=\"inp-location\" type=\"text\" placeholder=\" \" value=\"Planet Earth\"&gt;     &lt;label for=\"inp-location\"&gt;Location&lt;\/label&gt;   &lt;\/div&gt;    &lt;div class=\"s12 m6 input-field outlined error\" maxlength=\"20\"&gt;     &lt;div class=\"prefix\"&gt;&lt;i class=\"material-icons\"&gt;bubble_chart&lt;\/i&gt;&lt;\/div&gt;     &lt;div class=\"suffix\"&gt;&lt;i class=\"material-icons\"&gt;error&lt;\/i&gt;&lt;\/div&gt;     &lt;input id=\"inp-error\" type=\"text\" placeholder=\" \" value=\"$%\/'#sdf\"&gt;     &lt;label for=\"inp-error\"&gt;Failing Input&lt;\/label&gt;     &lt;span class=\"supporting-text\"&gt;Invalid characters! Please use 0-9 only.&lt;\/span&gt;   &lt;\/div&gt; &lt;\/form&gt; <\/code><\/pre>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0443\u0435\u043c \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443:<\/p>\n<pre><code class=\"css\">.container {   max-width: 1200px;   margin: 0 auto; }<\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/117\/bd4\/4ce\/117bd44cedaaf28a5841a0aa408fa79d.png\" alt=\"Text input \u0438\u0437 Materialize\" title=\"Text input \u0438\u0437 Materialize\" width=\"1794\" height=\"672\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/117\/bd4\/4ce\/117bd44cedaaf28a5841a0aa408fa79d.png\"\/><\/p>\n<div><figcaption>Text input \u0438\u0437 Materialize<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u043e, \u043a\u0440\u043e\u043c\u0435 \u0438\u043a\u043e\u043d\u043e\u043a. \u041d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0448\u0440\u0438\u0444\u0442.<\/p>\n<p>\u0412\u0441\u0442\u0430\u0432\u0438\u043c \u0432 <code>index.html<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons&amp;display=swap\" rel=\"stylesheet\" \/&gt;<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9c6\/bf2\/548\/9c6bf25481a9ebad9935a1f0b4059112.png\" alt=\"\u0418\u043a\u043e\u043d\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f\" title=\"\u0418\u043a\u043e\u043d\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f\" width=\"1794\" height=\"672\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9c6\/bf2\/548\/9c6bf25481a9ebad9935a1f0b4059112.png\"\/><\/p>\n<div><figcaption>\u0418\u043a\u043e\u043d\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043f\u043e\u0449\u0435\u043b\u043a\u0430\u0442\u044c \u043f\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u0430\u0445.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h2>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u0441 Materialize<\/h2>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"bash\">yarn ng g c input-direct<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0435\u0433\u043e \u0432 <code>src\/app\/home\/page\/lib<\/code>.<\/p>\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0437\u0430\u0434\u0430\u0434\u0438\u043c <code>input<\/code> \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"input-field\"&gt;   &lt;input id=\"first_name\" type=\"text\" placeholder=\" \" maxlength=\"20\" \/&gt;   &lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;   &lt;span class=\"supporting-text\"&gt;Supporting Text&lt;\/span&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 <code>HomePageComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component } from '@angular\/core';  import { InputDirectComponent } from '.\/input-direct\/input-direct.component';  @Component({   selector: 'app-home-page',   imports: [InputDirectComponent],   templateUrl: '.\/home-page.component.html',   styleUrl: '.\/home-page.component.scss',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomePageComponent {}<\/code><\/pre>\n<p>\u0418 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0435\u0433\u043e \u0432 <code>home-page.component.html<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"container\"&gt;   &lt;form class=\"row\" style=\"gap: 1em\"&gt;     &lt;app-input-direct class=\"s12 m6\" \/&gt;   &lt;\/form&gt; &lt;\/div&gt;<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/558\/a72\/4eb\/558a724ebb1508d638eaa450612788b3.png\" alt=\"\u0412\u044b\u0432\u0435\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0438\u043d\u043f\u0443\u0442\" title=\"\u0412\u044b\u0432\u0435\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0438\u043d\u043f\u0443\u0442\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/558\/a72\/4eb\/558a724ebb1508d638eaa450612788b3.png\"\/><\/p>\n<div><figcaption>\u0412\u044b\u0432\u0435\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0438\u043d\u043f\u0443\u0442<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443, \u0437\u0430\u0442\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0441 \u043f\u043e\u043a\u0430\u0437\u043e\u043c \u043e\u0448\u0438\u0431\u043e\u043a.<\/p>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u043e\u0440\u043c\u0443 \u0432 <code>HomePageComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component } from '@angular\/core'; import { FormControl, FormGroup, Validators } from '@angular\/forms';  import { InputDirectComponent } from '.\/input-direct\/input-direct.component';  @Component({   selector: 'app-home-page',   imports: [InputDirectComponent],   templateUrl: '.\/home-page.component.html',   styleUrl: '.\/home-page.component.scss',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomePageComponent {   readonly form = new FormGroup({     email: new FormControl&lt;string&gt;('', {       nonNullable: true,       validators: [Validators.required, Validators.email],     }),   }); }  <\/code><\/pre>\n<p>\u0412 <code>InputDirectComponent<\/code> \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>control<\/code>:<\/p>\n<pre><code class=\"typescript\">export class InputDirectComponent {   readonly control = input.required&lt;UntypedFormControl&gt;(); }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 <code>HomePageComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">&lt;app-input-direct class=\"s12 m6\" [control]=\"form.controls.email\" \/&gt;<\/code><\/pre>\n<p>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c <code>ReactiveFormsModule<\/code> \u0432 <code>InputDirectComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">mport { ChangeDetectionStrategy, Component, input } from '@angular\/core'; import type { UntypedFormControl } from '@angular\/forms'; import { ReactiveFormsModule } from '@angular\/forms';  @Component({   selector: 'app-input-direct',   imports: [ReactiveFormsModule],   templateUrl: '.\/input-direct.component.html',   styleUrl: '.\/input-direct.component.scss',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class InputDirectComponent {   readonly control = input.required&lt;UntypedFormControl&gt;(); } <\/code><\/pre>\n<p>\u0421\u0432\u044f\u0436\u0435\u043c <code>FormControl<\/code> \u0441 <img loading=\"lazy\" decoding=\"async\" class=\"formula inline\" source=\"input\" alt=\"input\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d1a\/24a\/685\/d1a24a685765f54ea282356baf5f9413.svg\" width=\"0\" height=\"0\"\/><code>nput<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;input id=\"first_name\" type=\"text\" placeholder=\" \" maxlength=\"20\" [formControl]=\"control()\" \/&gt;<\/code><\/pre>\n<p>\u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0443:<\/p>\n<pre><code class=\"typescript\">export class HomePageComponent implements OnInit {   private readonly destroyRef = inject(DestroyRef);    readonly form = new FormGroup({     email: new FormControl&lt;string&gt;('', {       nonNullable: true,       validators: [Validators.required, Validators.email],     }),   });    ngOnInit(): void {     this.form.valueChanges.pipe(tap(console.log), takeUntilDestroyed(this.destroyRef)).subscribe();   } } <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/202\/4db\/4ea\/2024db4ead130b54ef831eac1cdfa2ff.png\" alt=\"\u0421\u0432\u044f\u0437\u044c \u0444\u043e\u0440\u043c\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\" title=\"\u0421\u0432\u044f\u0437\u044c \u0444\u043e\u0440\u043c\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/202\/4db\/4ea\/2024db4ead130b54ef831eac1cdfa2ff.png\"\/><\/p>\n<div><figcaption>\u0421\u0432\u044f\u0437\u044c \u0444\u043e\u0440\u043c\u044b \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"input-field\" [class.error]=\"control().touched &amp;&amp; control().errors\"&gt;<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e34\/241\/e95\/e34241e95eedf19f38660f0467edc358.png\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e34\/241\/e95\/e34241e95eedf19f38660f0467edc358.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435, \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438.<\/p>\n<p>\u041f\u043e\u043f\u0440\u0430\u0432\u0438\u043c \u044d\u0442\u043e \u0432 <code>input-direct.component.scss<\/code>:<\/p>\n<pre><code class=\"css\">.error {   background-color: transparent; }<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ffc\/f44\/0d0\/ffcf440d010d6f23b04659f526cd815c.png\" alt=\"\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438\" title=\"\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ffc\/f44\/0d0\/ffcf440d010d6f23b04659f526cd815c.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c, \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 <code>input-direct.component.html<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"input-field\" [class.error]=\"control().touched &amp;&amp; control().errors\"&gt;   &lt;input id=\"first_name\" type=\"text\" placeholder=\" \" maxlength=\"20\" [formControl]=\"control()\" \/&gt;   &lt;label for=\"first_name\"&gt;First Name&lt;\/label&gt;    @if (control().touched &amp;&amp; control().errors) {     &lt;span class=\"supporting-text\"&gt;       @if (control().hasError('required')) {         \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435       } @else if (control().hasError('email')) {         \u041d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u0439 email       } @else {         \u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430       }     &lt;\/span&gt;   } @else {     &lt;span class=\"supporting-text\"&gt;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 email&lt;\/span&gt;   } &lt;\/div&gt;<\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2e0\/e7a\/657\/2e0e7a657497f7e6fb23ac6c28c6faa6.png\" alt=\"\u0412\u044b\u0432\u043e\u0434 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438\" title=\"\u0412\u044b\u0432\u043e\u0434 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2e0\/e7a\/657\/2e0e7a657497f7e6fb23ac6c28c6faa6.png\"\/><\/p>\n<div><figcaption>\u0412\u044b\u0432\u043e\u0434 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043e\u0448\u0438\u0431\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0432\u0435\u0434\u0435\u043c \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 <code>emai<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/880\/881\/342\/880881342aef6a32b1090b409d338352.png\" alt=\"\u041d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email\" title=\"\u041d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/880\/881\/342\/880881342aef6a32b1090b409d338352.png\"\/><\/p>\n<div><figcaption>\u041d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u043a\u0430\u0436\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f <code>email<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a69\/5db\/f0b\/a695dbf0b5acfe19418d06f099b887a0.png\" alt=\"\u0412\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email\" title=\"\u0412\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a69\/5db\/f0b\/a695dbf0b5acfe19418d06f099b887a0.png\"\/><\/p>\n<div><figcaption>\u0412\u0430\u043b\u0438\u0434\u043d\u044b\u0439 email<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u043d\u043f\u0443\u0442\u0430.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 <code>type<\/code>:<\/p>\n<pre><code class=\"typescript\">type InputMode = 'default' | 'outlined';<\/code><\/pre>\n<p>\u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>mode<\/code>:<\/p>\n<pre><code class=\"typescript\">  readonly mode = input&lt;InputMode&gt;('default');<\/code><\/pre>\n<p>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0442\u0438\u043f:<\/p>\n<pre><code class=\"xml\">&lt;div class=\"input-field\" [class.error]=\"control().touched &amp;&amp; control().errors\" [class.outlined]=\"mode() === 'outlined'\"&gt;<\/code><\/pre>\n<p>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0444\u043e\u0440\u043c\u044b \u0432\u044b\u0431\u0435\u0440\u0435\u043c <code>outlined<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b48\/5c6\/7fd\/b485c67fd8e634ca44eb219de38f497a.png\" alt=\"\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f\" title=\"\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f\" width=\"1423\" height=\"581\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b48\/5c6\/7fd\/b485c67fd8e634ca44eb219de38f497a.png\"\/><\/p>\n<div><figcaption>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/99d\/4cb\/58e\/99d4cb58e7af4fa4f994ab8b7960bd18.png\" alt=\"\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439\" title=\"\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439\" width=\"1462\" height=\"452\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/99d\/4cb\/58e\/99d4cb58e7af4fa4f994ab8b7960bd18.png\"\/><\/p>\n<div><figcaption>\u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7bd\/42b\/4d9\/7bd42b4d99287ca0889d1d9b55a8c318.png\" alt=\"\u041e\u0448\u0438\u0431\u043a\u0430 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439\" title=\"\u041e\u0448\u0438\u0431\u043a\u0430 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439\" width=\"1295\" height=\"374\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7bd\/42b\/4d9\/7bd42b4d99287ca0889d1d9b55a8c318.png\"\/><\/p>\n<div><figcaption>\u041e\u0448\u0438\u0431\u043a\u0430 \u0441 \u043e\u0431\u0432\u043e\u0434\u043a\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n<blockquote>\n<p>\u0412\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<\/blockquote>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u043c\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 <code>text input<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p>\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u0432\u0432\u043e\u0434\u0430 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u043e\u0434\u0438\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a\u00a0\u2014 \u044d\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u042d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a\u00a0\u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0435\u0433\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0414\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u0441\u00a0\u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u00a0\u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445, \u0442\u043e \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"bash\">yarn ng g c input-field<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043c \u0435\u0433\u043e \u0432 <code>src\/app\/home\/page\/lib<\/code>.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"bash\">yarn ng g c input yarn ng g c input-prefix yarn ng g c input-suffix yarn ng g c input-label yarn ng g c input-hint yarn ng g c input-character-counter<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043c \u0432\u0441\u0435 \u0432 <code>src\/app\/home\/page\/lib\/input-field<\/code>.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 <code>InputComponent<\/code>.<\/p>\n<p><strong>\u041e\u0434\u0438\u043d \u0438\u0437 \u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0441\u0435\u043a\u0440\u0435\u0442\u043e\u0432 \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 &#8212; \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043e\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0434 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438.<\/strong>\u00a0<\/p>\n<p>\u0422\u0440\u044e\u043a \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u043a \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 Angular:<\/p>\n<pre><code class=\"typescript\">selector: 'input[appInput][formControl],input[appInput][formControlName]'<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442\u00a0 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Angular, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component, inject } from '@angular\/core'; import { NgControl } from '@angular\/forms';  @Component({   selector:   \/\/ eslint-disable-next-line @angular-eslint\/component-selector  'input[appInput][formControl],input[appInput][formControlName],textarea[appInput][formControl],textarea[appInput][formControlName]',   template: '&lt;ng-content\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush }) export class InputComponent {   readonly ngControl = inject(NgControl); }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u043a \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 <code>input<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;input [formControl]=\"control()\" appInput \/&gt;<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0443\u00a0\u2014 <code>InputFieldComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">import { coerceBooleanProperty } from '@angular\/cdk\/coercion'; import { ChangeDetectionStrategy, Component, contentChild,input } from '@angular\/core';  import { InputComponent } from '.\/input\/input.component';  type InputMode = 'default' | 'outlined';  type CoerceBoolean = boolean | string | undefined | null;  @Component({   selector: 'app-input-field',   template: '&lt;ng-content\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush,   host: {      class: 'input-field',     '[class.inline]': `inline()`,     '[class.outlined]': `mode() === 'outlined'`,     '[class.error]': 'input().ngControl.touched &amp;&amp; input().ngControl.errors',   }, }) export class InputFieldComponent {   readonly inline = input&lt;CoerceBoolean, CoerceBoolean&gt;(false, { transform: coerceBooleanProperty });   readonly mode = input&lt;InputMode&gt;('default');   readonly input = contentChild.required&lt;InputComponent&gt;(InputComponent); } <\/code><\/pre>\n<p>\u041a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>host<\/code>.<\/p>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043d\u0430 mode, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>inline<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c <code>inline-block<\/code> \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f\u00a0\u0432\u0441\u0442\u0430\u0432\u043e\u043a \u0441\u043b\u0435\u0432\u0430 \u0438 \u0441\u043f\u0440\u0430\u0432\u0430 \u0432\u00a0\u0438\u043d\u043f\u0443\u0442\u0430\u0445\u00a0\u2014 <code>InputPrefixComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">@Component({   selector: 'app-input-prefix',   template: '&lt;ng-content\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush,   host: {     class: 'prefix',   }, }) export class InputPrefixComponent {} <\/code><\/pre>\n<pre><code class=\"typescript\">@Component({   selector: 'app-input-suffix',   template: '&lt;ng-content\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush,   host: {     class: 'suffix',   }, }) export class InputSuffixComponent {}<\/code><\/pre>\n<p>\u0421\u0430\u043c\u044b\u0439 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439\u00a0\u2014 <code>InputLabelComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">@Component({   \/\/ eslint-disable-next-line @angular-eslint\/component-selector   selector: 'label[appInputLabel]',   template: '&lt;ng-content\/&gt;',   styleUrl: '.\/input-label.component.scss',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class InputLabelComponent {}<\/code><\/pre>\n<p>\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438\u00a0\u2014 <code>InputHintComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">@Component({   selector: 'app-input-hint',   template: '&lt;ng-content\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush,   host: {     class: 'supporting-text',   }, }) export class InputHintComponent {}<\/code><\/pre>\n<p>\u0421\u0447\u0435\u0442\u0447\u0438\u043a \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component } from '@angular\/core';  @Component({   selector: 'app-input-character-counter',   template: '&lt;ng-content\/&gt;',   changeDetection: ChangeDetectionStrategy.OnPush,   host: {     class: 'character-counter',   }, }) export class InputCharacterCounterComponent {}<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435 <code>code<\/code> \u0432 <code>HomePageComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">  readonly form = new FormGroup({     email: new FormControl&lt;string&gt;('', {       nonNullable: true,       validators: [Validators.required, Validators.email],     }),     code: new FormControl&lt;string&gt;('', {       nonNullable: true,       validators: [Validators.required, Validators.minLength(4)],     }),   }); <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f <code>code<\/code>:<\/p>\n<pre><code class=\"bash\">yarn ng g c home-code<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c <code>input field<\/code>:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component, input } from '@angular\/core'; import type { FormControl } from '@angular\/forms'; import { ReactiveFormsModule } from '@angular\/forms';  import { InputComponent } from '..\/input-field\/input.component'; import { InputCharacterCounterComponent } from '..\/input-field\/input-character-counter.component'; import { InputFieldComponent } from '..\/input-field\/input-field.component'; import { InputHintComponent } from '..\/input-field\/input-hint.component'; import { InputLabelComponent } from '..\/input-field\/input-label.component'; import { InputPrefixComponent } from '..\/input-field\/input-prefix.component'; import { InputSuffixComponent } from '..\/input-field\/input-suffix.component';  @Component({   selector: 'app-home-code',   imports: [     ReactiveFormsModule,     InputFieldComponent,     InputLabelComponent,     InputComponent,     InputHintComponent,     InputCharacterCounterComponent,     InputSuffixComponent,     InputPrefixComponent,   ],   templateUrl: '.\/home-code.component.html',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomeCodeComponent {   readonly control = input.required&lt;FormControl&lt;string&gt;&gt;(); }<\/code><\/pre>\n<p>\u0412\u044b\u0432\u0435\u0434\u0435\u043c <code>input<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;app-input-field mode=\"outlined\"&gt;   &lt;app-input-prefix&gt;&lt;i class=\"material-icons\"&gt;place&lt;\/i&gt;&lt;\/app-input-prefix&gt;   &lt;app-input-suffix&gt;&lt;i class=\"material-icons\"&gt;gps_fixed&lt;\/i&gt;&lt;\/app-input-suffix&gt;   &lt;input id=\"first_name\" [formControl]=\"control()\" type=\"text\" placeholder=\" \" maxlength=\"4\" appInput \/&gt;   &lt;label for=\"first_name\" appInputLabel&gt;First Name&lt;\/label&gt;   &lt;app-input-hint&gt;Supporting Text&lt;\/app-input-hint&gt;   &lt;app-input-character-counter&gt;{{ control().value.length }}\/4&lt;\/app-input-character-counter&gt; &lt;\/app-input-field&gt;<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0438 \u0432\u044b\u0432\u0435\u0434\u0435\u043c \u0432 \u0444\u043e\u0440\u043c\u0435 <code>HomeCodeComponent<\/code>:<\/p>\n<pre><code class=\"bash\">&lt;div class=\"container\"&gt;   &lt;form class=\"row\" style=\"gap: 1em\"&gt;     &lt;div class=\"s12 m6\"&gt;       &lt;p&gt;         &lt;app-input-direct [control]=\"form.controls.email\" mode=\"outlined\" \/&gt;       &lt;\/p&gt;       &lt;p&gt;         &lt;app-home-code [control]=\"form.controls.code\" \/&gt;       &lt;\/p&gt;     &lt;\/div&gt;   &lt;\/form&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b48\/a2d\/65c\/b48a2d65c76c413ab3d52d2a879c6f2f.png\" alt=\"\u0412\u044b\u0432\u043e\u0434 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\" title=\"\u0412\u044b\u0432\u043e\u0434 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\" width=\"748\" height=\"318\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b48\/a2d\/65c\/b48a2d65c76c413ab3d52d2a879c6f2f.png\"\/><\/p>\n<div><figcaption>\u0412\u044b\u0432\u043e\u0434 \u0434\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043e\u043a:<\/p>\n<pre><code class=\"xml\">  @if (control().touched &amp;&amp; control().errors) {     &lt;app-input-hint&gt;       @if (control().hasError('required')) {         \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u0435       } @else if (control().hasError('minlength')) {         \u041a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c 4 \u0446\u0438\u0444\u0440\u044b       } @else {         \u041d\u0435\u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430       }     &lt;\/app-input-hint&gt;   } @else if (control().invalid) {     &lt;app-input-hint&gt;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u0434&lt;\/app-input-hint&gt;   } <\/code><\/pre>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ccf\/63e\/78f\/ccf63e78f9c437465cca03a37b1714d6.png\" alt=\"\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a\" title=\"\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a\" width=\"748\" height=\"318\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ccf\/63e\/78f\/ccf63e78f9c437465cca03a37b1714d6.png\"\/><\/p>\n<div><figcaption>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0448\u0438\u0431\u043e\u043a<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0432\u0441\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<h2>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/h2>\n<p>\u0414\u0435\u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0445\u043e\u0440\u043e\u0448\u0430 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043d\u043e \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u041a\u0430\u043a \u0431\u044b \u0432\u044b \u043d\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0438\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c. \u0414\u0430 \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0432\u0435\u0441\u044c CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.\u00a0<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u0435 \u043b\u0443\u0447\u0448\u0435\u0435 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u0435, \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b.\u00a0<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u0441\u044f \u043e\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0442\u043e \u044d\u0442\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b tag \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u0435 &#8212; <code>global-styles<\/code>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/85a\/61b\/5fa\/85a61b5fa8d0725e71b7b141111cfa29.png\" width=\"1807\" height=\"295\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/85a\/61b\/5fa\/85a61b5fa8d0725e71b7b141111cfa29.png\"\/><\/figure>\n<blockquote>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442\u0435 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u0441\u044c \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u0442\u0435\u0433\u00a0\u2014 <code>global-styles<\/code>.<\/p>\n<\/blockquote>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0432 Angular \u043d\u0435\u0442\u0443 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c <code>normalize.css<\/code>. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c\u0443 \u043a\u043e\u043c\u043c\u0438\u0442\u0443 \u0443\u0436\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 6 \u043b\u0435\u0442, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/01e\/fe5\/9dc\/01efe59dcd193af28acf8257ee16a246.png\" alt=\"normalize.css\" title=\"normalize.css\" width=\"1172\" height=\"947\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/01e\/fe5\/9dc\/01efe59dcd193af28acf8257ee16a246.png\"\/><\/p>\n<div><figcaption>normalize.css<\/figcaption><\/div>\n<\/figure>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 <code>src\/stylesheets\/normalize.scss<\/code>:<\/p>\n<pre><code class=\"css\">@mixin init() {   *,   *::before,   *::after {     box-sizing: border-box;   }    html {     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;   }    blockquote {     margin: 0;     padding: 1rem;   }    h1 {     margin-block-start: 1.45rem;     margin-block-end: 1.45rem;   }    h2 {     margin-block-start: 1.25rem;     margin-block-end: 1.25rem;   }    h3 {     margin-block-start: 1.175rem;     margin-block-end: 1.175rem;   }    h4 {     margin-block-start: 1.15rem;     margin-block-end: 1.15rem;   }    figure {     margin: 0;   }    p {     margin-block-start: 1rem;     margin-block-end: 1rem;   }    ul[role='list'],   ol[role='list'] {     list-style: none;   }    body {     margin: 0;     min-height: 100vh;     line-height: 1.5;     font-family:       Arial,       ui-sans-serif,       system-ui,       -apple-system,       BlinkMacSystemFont,       sans-serif;     font-size: 16px;   }    h1,   h2,   h3,   h4,   button,   input,   label {     line-height: 1.1;   }    h1,   h2,   h3,   h4 {     text-wrap: balance;   }    a:not([class]) {     text-decoration-skip-ink: auto;     color: currentColor;   }    img,   picture {     max-width: 100%;     display: block;   }    input,   button,   textarea,   select {     font: inherit;   }    textarea:not([rows]) {     min-height: 10rem;   }    :target {     scroll-margin-block: 5ex;   } } <\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 <code>styles.scss<\/code>:<\/p>\n<pre><code class=\"css\">@use '.\/stylesheets\/normalize' as normalize;  @include normalize.init();<\/code><\/pre>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/materializeweb.com\/getting-started.html\" rel=\"noopener noreferrer nofollow\">Materialize<\/a> \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043e \u0432 <a href=\"https:\/\/github.com\/materializecss\/materialize\/blob\/main\/sass\/materialize.scss\" rel=\"noopener noreferrer nofollow\">materialize.scss<\/a>:<\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0444\u0430\u0439\u043b\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438\u0437 <a href=\"https:\/\/m3.material.io\/\" rel=\"noopener noreferrer nofollow\">Material Design 3<\/a>.<\/p>\n<pre><code class=\"css\">@import \"components\/tokens.module\"; @import \"components\/theme.module\"; \/\/@import \"components\/_theme_variables\"; @import \"components\/colors.module\"; @import \"components\/typography.module\";<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0435\u0440\u0441\u043e\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0438\u0445 \u043a \u0441\u0435\u0431\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442.<\/p>\n<blockquote>\n<p>\u041e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043e\u0431\u0435\u0440\u043d\u0435\u043c \u0432 <code>@mixin init() {}<\/code>. \u042d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0443\u0433\u0430\u043b\u0441\u044f \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440.<\/p>\n<\/blockquote>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b\u044b:<\/p>\n<p><strong>colors.module.scss:<\/strong><\/p>\n<pre><code class=\"css\">@mixin init() {   .primary {     background-color: var(--md-sys-color-primary);   }   .primary-text {     color: var(--md-sys-color-primary);   }   .on-primary {     background-color: var(--md-sys-color-on-primary);   }   .on-primary-text {     color: var(--md-sys-color-on-primary);   }   .primary-container {     background-color: var(--md-sys-color-primary-container);   }   .primary-container-text {     color: var(--md-sys-color-primary-container);   }   .on-primary-container {     background-color: var(--md-sys-color-on-primary-container);   }   .on-primary-container-text {     color: var(--md-sys-color-on-primary-container);   }    .secondary {     background-color: var(--md-sys-color-secondary);   }   .secondary-text {     color: var(--md-sys-color-secondary);   }   .on-secondary {     background-color: var(--md-sys-color-on-secondary);   }   .on-secondary-text {     color: var(--md-sys-color-on-secondary);   }   .secondary-container {     background-color: var(--md-sys-color-secondary-container);   }   .secondary-container-text {     color: var(--md-sys-color-secondary-container);   }   .on-secondary-container {     background-color: var(--md-sys-color-on-secondary-container);   }   .on-secondary-container-text {     color: var(--md-sys-color-on-secondary-container);   }    .tertiary {     background-color: var(--md-sys-color-tertiary);   }   .tertiary-text {     color: var(--md-sys-color-tertiary);   }   .on-tertiary {     background-color: var(--md-sys-color-on-tertiary);   }   .on-tertiary-text {     color: var(--md-sys-color-on-tertiary);   }   .tertiary-container {     background-color: var(--md-sys-color-tertiary-container);   }   .tertiary-container-text {     color: var(--md-sys-color-tertiary-container);   }   .on-tertiary-container {     background-color: var(--md-sys-color-on-tertiary-container);   }   .on-tertiary-container-text {     color: var(--md-sys-color-on-tertiary-container);   }    .error {     background-color: var(--md-sys-color-error);   }   .error-text {     color: var(--md-sys-color-error);   }   .on-error {     background-color: var(--md-sys-color-on-error);   }   .on-error-text {     color: var(--md-sys-color-on-error);   }   .error-container {     background-color: var(--md-sys-color-error-container);   }   .error-container-text {     color: var(--md-sys-color-error-container);   }   .on-error-container {     background-color: var(--md-sys-color-on-error-container);   }   .on-error-container-text {     color: var(--md-sys-color-on-error-container);   }    .background {     background-color: var(--md-sys-color-background);   }   .background-text {     color: var(--md-sys-color-background);   }   .on-background {     background-color: var(--md-sys-color-on-background);   }   .on-background-text {     color: var(--md-sys-color-on-background);   }    .surface {     background-color: var(--md-sys-color-surface);   }   .surface-text {     color: var(--md-sys-color-surface);   }   .on-surface {     background-color: var(--md-sys-color-on-surface);   }   .on-surface-text {     color: var(--md-sys-color-on-surface);   }    .surface-variant {     background-color: var(--md-sys-color-surface-variant);   }   .surface-variant-text {     color: var(--md-sys-color-surface-variant);   }   .on-surface-variant {     background-color: var(--md-sys-color-on-surface-variant);   }   .on-surface-variant-text {     color: var(--md-sys-color-on-surface-variant);   }    .outline {     background-color: var(--md-sys-color-outline);   }   .outline-text {     color: var(--md-sys-color-outline);   }    .inverse-on-surface {     background-color: var(--md-sys-color-inverse-on-surface);   }   .inverse-on-surface-text {     color: var(--md-sys-color-inverse-on-surface);   }    .inverse-surface {     background-color: var(--md-sys-color-inverse-surface);   }   .inverse-surface-text {     color: var(--md-sys-color-inverse-surface);   }    .inverse-primary {     background-color: var(--md-sys-color-inverse-primary);   }   .inverse-primary-text {     color: var(--md-sys-color-inverse-primary);   }    .shadow {     background-color: var(--md-sys-color-shadow);   }   .shadow-text {     color: var(--md-sys-color-shadow);   }    .surface-tint {     background-color: var(--md-sys-color-surface-tint);   }   .surface-tint-text {     color: var(--md-sys-color-surface-tint);   }    .outline-variant {     background-color: var(--md-sys-color-outline-variant);   }   .outline-variant-text {     color: var(--md-sys-color-outline-variant);   }    .scrim {     background-color: var(--md-sys-color-scrim);   }   .scrim-text {     color: var(--md-sys-color-scrim);   } } <\/code><\/pre>\n<p><strong>theme.module.scss<\/strong>:<\/p>\n<pre><code class=\"css\">@mixin init() {   \/* System Defaults *\/   :root,   :host {     color-scheme: light;     --md-sys-color-primary: var(--md-sys-color-primary-light);     --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);     --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);     --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);     --md-sys-color-secondary: var(--md-sys-color-secondary-light);     --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);     --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);     --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);     --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);     --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);     --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);     --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);     --md-sys-color-error: var(--md-sys-color-error-light);     --md-sys-color-on-error: var(--md-sys-color-on-error-light);     --md-sys-color-error-container: var(--md-sys-color-error-container-light);     --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);     --md-sys-color-outline: var(--md-sys-color-outline-light);     --md-sys-color-background: var(--md-sys-color-background-light);     --md-sys-color-on-background: var(--md-sys-color-on-background-light);     --md-sys-color-surface: var(--md-sys-color-surface-light);     --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);     --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);     --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);     --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);     --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);     --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);     --md-sys-color-shadow: var(--md-sys-color-shadow-light);     --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);     --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);     --md-sys-color-scrim: var(--md-sys-color-scrim-light);   }    @media (prefers-color-scheme: dark) {     :root,     :host {       color-scheme: dark;       --md-sys-color-primary: var(--md-sys-color-primary-dark);       --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);       --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);       --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);       --md-sys-color-secondary: var(--md-sys-color-secondary-dark);       --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);       --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);       --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);       --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);       --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);       --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);       --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);       --md-sys-color-error: var(--md-sys-color-error-dark);       --md-sys-color-on-error: var(--md-sys-color-on-error-dark);       --md-sys-color-error-container: var(--md-sys-color-error-container-dark);       --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);       --md-sys-color-outline: var(--md-sys-color-outline-dark);       --md-sys-color-background: var(--md-sys-color-background-dark);       --md-sys-color-on-background: var(--md-sys-color-on-background-dark);       --md-sys-color-surface: var(--md-sys-color-surface-dark);       --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);       --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);       --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);       --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);       --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);       --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);       --md-sys-color-shadow: var(--md-sys-color-shadow-dark);       --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);       --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);       --md-sys-color-scrim: var(--md-sys-color-scrim-dark);     }   }    \/* ===================================================================== Themes *\/    :root[theme='light'] {     color-scheme: light;     --md-sys-color-primary: var(--md-sys-color-primary-light);     --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);     --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);     --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);     --md-sys-color-secondary: var(--md-sys-color-secondary-light);     --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);     --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);     --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);     --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);     --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);     --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);     --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);     --md-sys-color-error: var(--md-sys-color-error-light);     --md-sys-color-on-error: var(--md-sys-color-on-error-light);     --md-sys-color-error-container: var(--md-sys-color-error-container-light);     --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);     --md-sys-color-outline: var(--md-sys-color-outline-light);     --md-sys-color-background: var(--md-sys-color-background-light);     --md-sys-color-on-background: var(--md-sys-color-on-background-light);     --md-sys-color-surface: var(--md-sys-color-surface-light);     --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);     --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);     --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);     --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);     --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);     --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);     --md-sys-color-shadow: var(--md-sys-color-shadow-light);     --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);     --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);     --md-sys-color-scrim: var(--md-sys-color-scrim-light);   }    :root[theme='dark'] {     color-scheme: dark;     --md-sys-color-primary: var(--md-sys-color-primary-dark);     --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);     --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);     --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);     --md-sys-color-secondary: var(--md-sys-color-secondary-dark);     --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);     --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);     --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);     --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);     --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);     --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);     --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);     --md-sys-color-error: var(--md-sys-color-error-dark);     --md-sys-color-on-error: var(--md-sys-color-on-error-dark);     --md-sys-color-error-container: var(--md-sys-color-error-container-dark);     --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);     --md-sys-color-outline: var(--md-sys-color-outline-dark);     --md-sys-color-background: var(--md-sys-color-background-dark);     --md-sys-color-on-background: var(--md-sys-color-on-background-dark);     --md-sys-color-surface: var(--md-sys-color-surface-dark);     --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);     --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);     --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);     --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);     --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);     --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);     --md-sys-color-shadow: var(--md-sys-color-shadow-dark);     --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);     --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);     --md-sys-color-scrim: var(--md-sys-color-scrim-dark);   } } <\/code><\/pre>\n<p><strong>tokens.module.scss:<\/strong><\/p>\n<pre><code class=\"css\">@mixin init() {   :root {     --md-source: #006495;     \/* primary *\/     --md-ref-palette-primary0: #000000;     --md-ref-palette-primary10: #001e30;     --md-ref-palette-primary20: #003450;     --md-ref-palette-primary25: #003f60;     --md-ref-palette-primary30: #004b71;     --md-ref-palette-primary35: #005783;     --md-ref-palette-primary40: #006495;     --md-ref-palette-primary50: #0f7eb8;     --md-ref-palette-primary60: #3d98d4;     --md-ref-palette-primary70: #5db3f0;     --md-ref-palette-primary80: #8fcdff;     --md-ref-palette-primary90: #cbe6ff;     --md-ref-palette-primary95: #e6f2ff;     --md-ref-palette-primary98: #f7f9ff;     --md-ref-palette-primary99: #fcfcff;     --md-ref-palette-primary100: #ffffff;     \/* secondary *\/     --md-ref-palette-secondary0: #000000;     --md-ref-palette-secondary10: #0d1d29;     --md-ref-palette-secondary20: #22323f;     --md-ref-palette-secondary25: #2d3d4b;     --md-ref-palette-secondary30: #394856;     --md-ref-palette-secondary35: #445462;     --md-ref-palette-secondary40: #50606f;     --md-ref-palette-secondary50: #697988;     --md-ref-palette-secondary60: #8293a2;     --md-ref-palette-secondary70: #9dadbd;     --md-ref-palette-secondary80: #b8c8d9;     --md-ref-palette-secondary90: #d4e4f6;     --md-ref-palette-secondary95: #e6f2ff;     --md-ref-palette-secondary98: #f7f9ff;     --md-ref-palette-secondary99: #fcfcff;     --md-ref-palette-secondary100: #ffffff;     \/* tertiary *\/     --md-ref-palette-tertiary0: #000000;     --md-ref-palette-tertiary10: #211634;     --md-ref-palette-tertiary20: #362b4a;     --md-ref-palette-tertiary25: #423656;     --md-ref-palette-tertiary30: #4d4162;     --md-ref-palette-tertiary35: #594c6e;     --md-ref-palette-tertiary40: #66587b;     --md-ref-palette-tertiary50: #7f7195;     --md-ref-palette-tertiary60: #998ab0;     --md-ref-palette-tertiary70: #b4a4cb;     --md-ref-palette-tertiary80: #d0bfe7;     --md-ref-palette-tertiary90: #ecdcff;     --md-ref-palette-tertiary95: #f7edff;     --md-ref-palette-tertiary98: #fef7ff;     --md-ref-palette-tertiary99: #fffbff;     --md-ref-palette-tertiary100: #ffffff;     \/* neutral *\/     --md-ref-palette-neutral0: #000000;     --md-ref-palette-neutral10: #1a1c1e;     --md-ref-palette-neutral20: #2e3133;     --md-ref-palette-neutral25: #3a3c3e;     --md-ref-palette-neutral30: #454749;     --md-ref-palette-neutral35: #515255;     --md-ref-palette-neutral40: #5d5e61;     --md-ref-palette-neutral50: #76777a;     --md-ref-palette-neutral60: #8f9194;     --md-ref-palette-neutral70: #aaabae;     --md-ref-palette-neutral80: #c6c6c9;     --md-ref-palette-neutral90: #e2e2e5;     --md-ref-palette-neutral95: #f0f0f3;     --md-ref-palette-neutral98: #f9f9fc;     --md-ref-palette-neutral99: #fcfcff;     --md-ref-palette-neutral100: #ffffff;     \/* neutral-variant *\/     --md-ref-palette-neutral-variant0: #000000;     --md-ref-palette-neutral-variant10: #161c22;     --md-ref-palette-neutral-variant20: #2b3137;     --md-ref-palette-neutral-variant25: #363c42;     --md-ref-palette-neutral-variant30: #41474d;     --md-ref-palette-neutral-variant35: #4d5359;     --md-ref-palette-neutral-variant40: #595f65;     --md-ref-palette-neutral-variant50: #72787e;     --md-ref-palette-neutral-variant60: #8b9198;     --md-ref-palette-neutral-variant70: #a6acb3;     --md-ref-palette-neutral-variant80: #c1c7ce;     --md-ref-palette-neutral-variant90: #dee3ea;     --md-ref-palette-neutral-variant95: #ecf1f9;     --md-ref-palette-neutral-variant98: #f7f9ff;     --md-ref-palette-neutral-variant99: #fcfcff;     --md-ref-palette-neutral-variant100: #ffffff;     \/* error *\/     --md-ref-palette-error0: #000000;     --md-ref-palette-error10: #410002;     --md-ref-palette-error20: #690005;     --md-ref-palette-error25: #7e0007;     --md-ref-palette-error30: #93000a;     --md-ref-palette-error35: #a80710;     --md-ref-palette-error40: #ba1a1a;     --md-ref-palette-error50: #de3730;     --md-ref-palette-error60: #ff5449;     --md-ref-palette-error70: #ff897d;     --md-ref-palette-error80: #ffb4ab;     --md-ref-palette-error90: #ffdad6;     --md-ref-palette-error95: #ffedea;     --md-ref-palette-error98: #fff8f7;     --md-ref-palette-error99: #fffbff;     --md-ref-palette-error100: #ffffff;     \/* light *\/     --md-sys-color-primary-light: #006495;     --md-sys-color-on-primary-light: #ffffff;     --md-sys-color-primary-container-light: #cbe6ff;     --md-sys-color-on-primary-container-light: #001e30;     --md-sys-color-secondary-light: #50606f;     --md-sys-color-on-secondary-light: #ffffff;     --md-sys-color-secondary-container-light: #d4e4f6;     --md-sys-color-on-secondary-container-light: #0d1d29;     --md-sys-color-tertiary-light: #66587b;     --md-sys-color-on-tertiary-light: #ffffff;     --md-sys-color-tertiary-container-light: #ecdcff;     --md-sys-color-on-tertiary-container-light: #211634;     --md-sys-color-error-light: #ba1a1a;     --md-sys-color-error-container-light: #ffdad6;     --md-sys-color-on-error-light: #ffffff;     --md-sys-color-on-error-container-light: #410002;     --md-sys-color-background-light: #fcfcff;     --md-sys-color-on-background-light: #1a1c1e;     --md-sys-color-surface-light: #fcfcff;     --md-sys-color-on-surface-light: #1a1c1e;     --md-sys-color-surface-variant-light: #dee3ea;     --md-sys-color-on-surface-variant-light: #41474d;     --md-sys-color-outline-light: #72787e;     --md-sys-color-inverse-on-surface-light: #f0f0f3;     --md-sys-color-inverse-surface-light: #2e3133;     --md-sys-color-inverse-primary-light: #8fcdff;     --md-sys-color-shadow-light: #000000;     --md-sys-color-surface-tint-light: #006495;     --md-sys-color-outline-variant-light: #c1c7ce;     --md-sys-color-scrim-light: #000000;     \/* dark *\/     --md-sys-color-primary-dark: #8fcdff;     --md-sys-color-on-primary-dark: #003450;     --md-sys-color-primary-container-dark: #004b71;     --md-sys-color-on-primary-container-dark: #cbe6ff;     --md-sys-color-secondary-dark: #b8c8d9;     --md-sys-color-on-secondary-dark: #22323f;     --md-sys-color-secondary-container-dark: #394856;     --md-sys-color-on-secondary-container-dark: #d4e4f6;     --md-sys-color-tertiary-dark: #d0bfe7;     --md-sys-color-on-tertiary-dark: #362b4a;     --md-sys-color-tertiary-container-dark: #4d4162;     --md-sys-color-on-tertiary-container-dark: #ecdcff;     --md-sys-color-error-dark: #ffb4ab;     --md-sys-color-error-container-dark: #93000a;     --md-sys-color-on-error-dark: #690005;     --md-sys-color-on-error-container-dark: #ffdad6;     --md-sys-color-background-dark: #1a1c1e;     --md-sys-color-on-background-dark: #e2e2e5;     --md-sys-color-surface-dark: #1a1c1e;     --md-sys-color-on-surface-dark: #e2e2e5;     --md-sys-color-surface-variant-dark: #41474d;     --md-sys-color-on-surface-variant-dark: #c1c7ce;     --md-sys-color-outline-dark: #8b9198;     --md-sys-color-inverse-on-surface-dark: #1a1c1e;     --md-sys-color-inverse-surface-dark: #e2e2e5;     --md-sys-color-inverse-primary-dark: #006495;     --md-sys-color-shadow-dark: #000000;     --md-sys-color-surface-tint-dark: #8fcdff;     --md-sys-color-outline-variant-dark: #41474d;     --md-sys-color-scrim-dark: #000000;     \/* display - large *\/     --md-sys-typescale-display-large-font-family-name: Roboto;     --md-sys-typescale-display-large-font-family-style: Regular;     --md-sys-typescale-display-large-font-weight: 400px;     --md-sys-typescale-display-large-font-size: 57px;     --md-sys-typescale-display-large-line-height: 64px;     --md-sys-typescale-display-large-letter-spacing: -0.25px;     \/* display - medium *\/     --md-sys-typescale-display-medium-font-family-name: Roboto;     --md-sys-typescale-display-medium-font-family-style: Regular;     --md-sys-typescale-display-medium-font-weight: 400px;     --md-sys-typescale-display-medium-font-size: 45px;     --md-sys-typescale-display-medium-line-height: 52px;     --md-sys-typescale-display-medium-letter-spacing: 0px;     \/* display - small *\/     --md-sys-typescale-display-small-font-family-name: Roboto;     --md-sys-typescale-display-small-font-family-style: Regular;     --md-sys-typescale-display-small-font-weight: 400px;     --md-sys-typescale-display-small-font-size: 36px;     --md-sys-typescale-display-small-line-height: 44px;     --md-sys-typescale-display-small-letter-spacing: 0px;     \/* headline - large *\/     --md-sys-typescale-headline-large-font-family-name: Roboto;     --md-sys-typescale-headline-large-font-family-style: Regular;     --md-sys-typescale-headline-large-font-weight: 400px;     --md-sys-typescale-headline-large-font-size: 32px;     --md-sys-typescale-headline-large-line-height: 40px;     --md-sys-typescale-headline-large-letter-spacing: 0px;     \/* headline - medium *\/     --md-sys-typescale-headline-medium-font-family-name: Roboto;     --md-sys-typescale-headline-medium-font-family-style: Regular;     --md-sys-typescale-headline-medium-font-weight: 400px;     --md-sys-typescale-headline-medium-font-size: 28px;     --md-sys-typescale-headline-medium-line-height: 36px;     --md-sys-typescale-headline-medium-letter-spacing: 0px;     \/* headline - small *\/     --md-sys-typescale-headline-small-font-family-name: Roboto;     --md-sys-typescale-headline-small-font-family-style: Regular;     --md-sys-typescale-headline-small-font-weight: 400px;     --md-sys-typescale-headline-small-font-size: 24px;     --md-sys-typescale-headline-small-line-height: 32px;     --md-sys-typescale-headline-small-letter-spacing: 0px;     \/* body - large *\/     --md-sys-typescale-body-large-font-family-name: Roboto;     --md-sys-typescale-body-large-font-family-style: Regular;     --md-sys-typescale-body-large-font-weight: 400px;     --md-sys-typescale-body-large-font-size: 16px;     --md-sys-typescale-body-large-line-height: 24px;     --md-sys-typescale-body-large-letter-spacing: 0.5px;     \/* body - medium *\/     --md-sys-typescale-body-medium-font-family-name: Roboto;     --md-sys-typescale-body-medium-font-family-style: Regular;     --md-sys-typescale-body-medium-font-weight: 400px;     --md-sys-typescale-body-medium-font-size: 14px;     --md-sys-typescale-body-medium-line-height: 20px;     --md-sys-typescale-body-medium-letter-spacing: 0.25px;     \/* body - small *\/     --md-sys-typescale-body-small-font-family-name: Roboto;     --md-sys-typescale-body-small-font-family-style: Regular;     --md-sys-typescale-body-small-font-weight: 400px;     --md-sys-typescale-body-small-font-size: 12px;     --md-sys-typescale-body-small-line-height: 16px;     --md-sys-typescale-body-small-letter-spacing: 0.4px;     \/* label - large *\/     --md-sys-typescale-label-large-font-family-name: Roboto;     --md-sys-typescale-label-large-font-family-style: Medium;     --md-sys-typescale-label-large-font-weight: 500px;     --md-sys-typescale-label-large-font-size: 14px;     --md-sys-typescale-label-large-line-height: 20px;     --md-sys-typescale-label-large-letter-spacing: 0.1px;     \/* label - medium *\/     --md-sys-typescale-label-medium-font-family-name: Roboto;     --md-sys-typescale-label-medium-font-family-style: Medium;     --md-sys-typescale-label-medium-font-weight: 500px;     --md-sys-typescale-label-medium-font-size: 12px;     --md-sys-typescale-label-medium-line-height: 16px;     --md-sys-typescale-label-medium-letter-spacing: 0.5px;     \/* label - small *\/     --md-sys-typescale-label-small-font-family-name: Roboto;     --md-sys-typescale-label-small-font-family-style: Medium;     --md-sys-typescale-label-small-font-weight: 500px;     --md-sys-typescale-label-small-font-size: 11px;     --md-sys-typescale-label-small-line-height: 16px;     --md-sys-typescale-label-small-letter-spacing: 0.5px;     \/* title - large *\/     --md-sys-typescale-title-large-font-family-name: Roboto;     --md-sys-typescale-title-large-font-family-style: Regular;     --md-sys-typescale-title-large-font-weight: 400px;     --md-sys-typescale-title-large-font-size: 22px;     --md-sys-typescale-title-large-line-height: 28px;     --md-sys-typescale-title-large-letter-spacing: 0px;     \/* title - medium *\/     --md-sys-typescale-title-medium-font-family-name: Roboto;     --md-sys-typescale-title-medium-font-family-style: Medium;     --md-sys-typescale-title-medium-font-weight: 500px;     --md-sys-typescale-title-medium-font-size: 16px;     --md-sys-typescale-title-medium-line-height: 24px;     --md-sys-typescale-title-medium-letter-spacing: 0.15px;     \/* title - small *\/     --md-sys-typescale-title-small-font-family-name: Roboto;     --md-sys-typescale-title-small-font-family-style: Medium;     --md-sys-typescale-title-small-font-weight: 500px;     --md-sys-typescale-title-small-font-size: 14px;     --md-sys-typescale-title-small-line-height: 20px;     --md-sys-typescale-title-small-letter-spacing: 0.1px;   } } <\/code><\/pre>\n<p><strong>typography.module.scss:<\/strong><\/p>\n<pre><code class=\"css\">@mixin init() {   .display-large {     font-family: var(--md-sys-typescale-display-large-font-family-name);     font-style: var(--md-sys-typescale-display-large-font-family-style);     font-weight: var(--md-sys-typescale-display-large-font-weight);     font-size: var(--md-sys-typescale-display-large-font-size);     letter-spacing: var(--md-sys-typescale-display-large-tracking);     line-height: var(--md-sys-typescale-display-large-height);     text-transform: var(--md-sys-typescale-display-large-text-transform);     text-decoration: var(--md-sys-typescale-display-large-text-decoration);   }   .display-medium {     font-family: var(--md-sys-typescale-display-medium-font-family-name);     font-style: var(--md-sys-typescale-display-medium-font-family-style);     font-weight: var(--md-sys-typescale-display-medium-font-weight);     font-size: var(--md-sys-typescale-display-medium-font-size);     letter-spacing: var(--md-sys-typescale-display-medium-tracking);     line-height: var(--md-sys-typescale-display-medium-height);     text-transform: var(--md-sys-typescale-display-medium-text-transform);     text-decoration: var(--md-sys-typescale-display-medium-text-decoration);   }   .display-small {     font-family: var(--md-sys-typescale-display-small-font-family-name);     font-style: var(--md-sys-typescale-display-small-font-family-style);     font-weight: var(--md-sys-typescale-display-small-font-weight);     font-size: var(--md-sys-typescale-display-small-font-size);     letter-spacing: var(--md-sys-typescale-display-small-tracking);     line-height: var(--md-sys-typescale-display-small-height);     text-transform: var(--md-sys-typescale-display-small-text-transform);     text-decoration: var(--md-sys-typescale-display-small-text-decoration);   }   .headline-large {     font-family: var(--md-sys-typescale-headline-large-font-family-name);     font-style: var(--md-sys-typescale-headline-large-font-family-style);     font-weight: var(--md-sys-typescale-headline-large-font-weight);     font-size: var(--md-sys-typescale-headline-large-font-size);     letter-spacing: var(--md-sys-typescale-headline-large-tracking);     line-height: var(--md-sys-typescale-headline-large-height);     text-transform: var(--md-sys-typescale-headline-large-text-transform);     text-decoration: var(--md-sys-typescale-headline-large-text-decoration);   }   .headline-medium {     font-family: var(--md-sys-typescale-headline-medium-font-family-name);     font-style: var(--md-sys-typescale-headline-medium-font-family-style);     font-weight: var(--md-sys-typescale-headline-medium-font-weight);     font-size: var(--md-sys-typescale-headline-medium-font-size);     letter-spacing: var(--md-sys-typescale-headline-medium-tracking);     line-height: var(--md-sys-typescale-headline-medium-height);     text-transform: var(--md-sys-typescale-headline-medium-text-transform);     text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);   }   .headline-small {     font-family: var(--md-sys-typescale-headline-small-font-family-name);     font-style: var(--md-sys-typescale-headline-small-font-family-style);     font-weight: var(--md-sys-typescale-headline-small-font-weight);     font-size: var(--md-sys-typescale-headline-small-font-size);     letter-spacing: var(--md-sys-typescale-headline-small-tracking);     line-height: var(--md-sys-typescale-headline-small-height);     text-transform: var(--md-sys-typescale-headline-small-text-transform);     text-decoration: var(--md-sys-typescale-headline-small-text-decoration);   }   .body-large {     font-family: var(--md-sys-typescale-body-large-font-family-name);     font-style: var(--md-sys-typescale-body-large-font-family-style);     font-weight: var(--md-sys-typescale-body-large-font-weight);     font-size: var(--md-sys-typescale-body-large-font-size);     letter-spacing: var(--md-sys-typescale-body-large-tracking);     line-height: var(--md-sys-typescale-body-large-height);     text-transform: var(--md-sys-typescale-body-large-text-transform);     text-decoration: var(--md-sys-typescale-body-large-text-decoration);   }   .body-medium {     font-family: var(--md-sys-typescale-body-medium-font-family-name);     font-style: var(--md-sys-typescale-body-medium-font-family-style);     font-weight: var(--md-sys-typescale-body-medium-font-weight);     font-size: var(--md-sys-typescale-body-medium-font-size);     letter-spacing: var(--md-sys-typescale-body-medium-tracking);     line-height: var(--md-sys-typescale-body-medium-height);     text-transform: var(--md-sys-typescale-body-medium-text-transform);     text-decoration: var(--md-sys-typescale-body-medium-text-decoration);   }   .body-small {     font-family: var(--md-sys-typescale-body-small-font-family-name);     font-style: var(--md-sys-typescale-body-small-font-family-style);     font-weight: var(--md-sys-typescale-body-small-font-weight);     font-size: var(--md-sys-typescale-body-small-font-size);     letter-spacing: var(--md-sys-typescale-body-small-tracking);     line-height: var(--md-sys-typescale-body-small-height);     text-transform: var(--md-sys-typescale-body-small-text-transform);     text-decoration: var(--md-sys-typescale-body-small-text-decoration);   }   .label-large {     font-family: var(--md-sys-typescale-label-large-font-family-name);     font-style: var(--md-sys-typescale-label-large-font-family-style);     font-weight: var(--md-sys-typescale-label-large-font-weight);     font-size: var(--md-sys-typescale-label-large-font-size);     letter-spacing: var(--md-sys-typescale-label-large-tracking);     line-height: var(--md-sys-typescale-label-large-height);     text-transform: var(--md-sys-typescale-label-large-text-transform);     text-decoration: var(--md-sys-typescale-label-large-text-decoration);   }   .label-medium {     font-family: var(--md-sys-typescale-label-medium-font-family-name);     font-style: var(--md-sys-typescale-label-medium-font-family-style);     font-weight: var(--md-sys-typescale-label-medium-font-weight);     font-size: var(--md-sys-typescale-label-medium-font-size);     letter-spacing: var(--md-sys-typescale-label-medium-tracking);     line-height: var(--md-sys-typescale-label-medium-height);     text-transform: var(--md-sys-typescale-label-medium-text-transform);     text-decoration: var(--md-sys-typescale-label-medium-text-decoration);   }   .label-small {     font-family: var(--md-sys-typescale-label-small-font-family-name);     font-style: var(--md-sys-typescale-label-small-font-family-style);     font-weight: var(--md-sys-typescale-label-small-font-weight);     font-size: var(--md-sys-typescale-label-small-font-size);     letter-spacing: var(--md-sys-typescale-label-small-tracking);     line-height: var(--md-sys-typescale-label-small-height);     text-transform: var(--md-sys-typescale-label-small-text-transform);     text-decoration: var(--md-sys-typescale-label-small-text-decoration);   }   .title-large {     font-family: var(--md-sys-typescale-title-large-font-family-name);     font-style: var(--md-sys-typescale-title-large-font-family-style);     font-weight: var(--md-sys-typescale-title-large-font-weight);     font-size: var(--md-sys-typescale-title-large-font-size);     letter-spacing: var(--md-sys-typescale-title-large-tracking);     line-height: var(--md-sys-typescale-title-large-height);     text-transform: var(--md-sys-typescale-title-large-text-transform);     text-decoration: var(--md-sys-typescale-title-large-text-decoration);   }   .title-medium {     font-family: var(--md-sys-typescale-title-medium-font-family-name);     font-style: var(--md-sys-typescale-title-medium-font-family-style);     font-weight: var(--md-sys-typescale-title-medium-font-weight);     font-size: var(--md-sys-typescale-title-medium-font-size);     letter-spacing: var(--md-sys-typescale-title-medium-tracking);     line-height: var(--md-sys-typescale-title-medium-height);     text-transform: var(--md-sys-typescale-title-medium-text-transform);     text-decoration: var(--md-sys-typescale-title-medium-text-decoration);   }   .title-small {     font-family: var(--md-sys-typescale-title-small-font-family-name);     font-style: var(--md-sys-typescale-title-small-font-family-style);     font-weight: var(--md-sys-typescale-title-small-font-weight);     font-size: var(--md-sys-typescale-title-small-font-size);     letter-spacing: var(--md-sys-typescale-title-small-tracking);     line-height: var(--md-sys-typescale-title-small-height);     text-transform: var(--md-sys-typescale-title-small-text-transform);     text-decoration: var(--md-sys-typescale-title-small-text-decoration);   } } <\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 <code>styles.scss<\/code>:<\/p>\n<pre><code>@use '.\/stylesheets\/colors.module' as colors; @use '.\/stylesheets\/tokens.module' as tokens; @use '.\/stylesheets\/theme.module' as theme; @use '.\/stylesheets\/typography.module' as typography;  @include tokens.init(); @include theme.init(); @include typography.init(); @include colors.init();<\/code><\/pre>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0431\u044b\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c UI \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>\u041f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c <code>src\/app\/home\/page\/lib\/input-field<\/code> \u0438 \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e <code>input<\/code>.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u043e\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u0441\u0435 <a href=\"https:\/\/github.com\/materializecss\/materialize\/blob\/main\/sass\/components\/forms\/_input-fields.scss\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0438\u043b\u0438<\/a> \u0432 <code>input-field<\/code>:<\/p>\n<pre><code class=\"css\">\/* Style Placeholders *\/ ::placeholder {   color: var(--md-sys-color-on-surface-variant); }  \/* Text inputs *\/ input:not([type]):not(.browser-default), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=month]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {   outline: none;   color: var(--md-sys-color-on-background);   width: 100%;   font-size: $md_sys_typescale_body-large_size; \/\/16px; \/\/ =&gt; 16 dp   height: 56px; \/\/ 56dp }  %invalid-input-style {   border-bottom: 2px solid var(--md-sys-color-error);   box-shadow: 0 1px 0 0 var(--md-sys-color-error); } %hidden-text &gt; span {   display: none } %custom-error-message {   content: attr(data-error);   color: var(--md-sys-color-error); }  .input-field {   --input-color: var(--md-sys-color-primary);    position: relative;   clear: both;    \/\/ Default    input, textarea {     box-sizing: border-box; \/* https:\/\/stackoverflow.com\/questions\/1377719\/padding-within-inputs-breaks-width-100*\/      padding: 0 16px;     padding-top: 20px;      background-color: var(--md-sys-color-surface);      border: none; \/\/ reset     border-radius: 4px; \/\/ md.sys.shape.corner.extra-small.top     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);     border-bottom-left-radius: 0;     border-bottom-right-radius: 0;      &amp;:focus:not([readonly]) {       border-bottom: 2px solid var(--input-color);       padding-top: 20px + 1px; \/\/ add border-width     }      &amp;:disabled, &amp;[readonly=\"readonly\"] {       color: rgba(var(--md_sys_color_on-surface), 0.38);       border-color: rgba(var(--md_sys_color_on-surface), 0.12);       background-color: rgba(var(--md_sys_color_on-surface), 0.04);     }      \/\/ Label     &amp;:focus:not([readonly]) + label {       color: var(--input-color);     }     &amp;:focus:not([readonly]) + label,     &amp;:not([placeholder=' ']) + label,     &amp;:not(:placeholder-shown) + label {       \/\/font-size: 12px; \/\/ md.sys.typescale.body-small.size       \/\/ https:\/\/stackoverflow.com\/questions\/34717492\/css-transition-font-size-avoid-jittering-wiggling       transform: scale(calc(12 \/ 16));       top: 8px;     }      &amp;:disabled + label, &amp;[readonly=\"readonly\"] + label {       color: rgba(var(--md_sys_color_on-surface), 0.38);     }      \/\/ Hide helper text on data message     &amp;.invalid ~ .supporting-text[data-error] {       @extend %hidden-text;     }      \/\/ Invalid Input Style     &amp;.invalid {       @extend %invalid-input-style;     }      \/\/ Custom Error message     &amp;.invalid ~ .supporting-text:after {       @extend %custom-error-message;     }      &amp;.invalid ~ label,     &amp;:focus.invalid ~ label {       color: var(--md-sys-color-error);     }   }    input::placeholder {     user-select: none;   }    &amp; &gt; label {     color: var(--md-sys-color-on-surface-variant);     user-select: none;     font-size: 16px;     position: absolute;     left: 16px;     top: 16px;     cursor: text;     transform-origin: top left;     transition:       left 0.2s ease-out,       top 0.2s ease-out,       transform 0.2s ease-out     ;   }    \/\/ Sub-Infos    .supporting-text {     color: var(--md-sys-color-on-surface-variant);     font-size: 12px;     padding: 0 16px;     margin-top: 4px;   }    .character-counter {     color: var(--md-sys-color-on-surface-variant);     font-size: 12px;     float: right;     padding: 0 16px;     margin-top: 4px;   }    .prefix {     position: absolute;     left: 12px;     top: 16px;     user-select: none;     display: flex;     align-self: center;   }    .suffix {     position: absolute;     right: 12px;     top: 16px;     user-select: none;   }    .prefix ~ input, .prefix ~ textarea {     padding-left: calc(12px + 24px + 16px);   }   .suffix ~ input, .suffix ~ textarea {     padding-right: calc(12px + 24px + 16px);   }   .prefix ~ label {     left: calc(12px + 24px + 16px);   }    \/\/ Outlined    &amp;.outlined {      input, textarea {       padding-top: 0;        background-color: var(--md-sys-color-background);        border: 1px solid var(--md-sys-color-on-surface-variant);       border-radius: 4px; \/\/ md.sys.shape.corner.extra-small        &amp;:focus:not([readonly]) {         border: 2px solid var(--input-color);         padding-top: 0;         margin-left: -1px; \/\/ subtract border-width        }       \/\/ Label       &amp;:focus:not([readonly]) + label {         color: var(--input-color);       }       &amp;:focus:not([readonly]) + label,       &amp;:not([placeholder=' ']) + label,       &amp;:not(:placeholder-shown) + label {         top: -8px;         left: 16px;         margin-left: -4px;         padding: 0 4px;         background-color: var(--md-sys-color-background);       }        &amp;:disabled, &amp;[readonly=\"readonly\"] {         color: rgba(var(--md_sys_color_on-surface), 0.38);         border-color: rgba(var(--md_sys_color_on-surface), 0.12);       }      }   }    \/\/ Error   &amp;.error {     input, textarea {       border-color: var(--md-sys-color-error);     }     input:focus:not([readonly]), textarea:focus:not([readonly]) {       border-color: var(--md-sys-color-error);     }     input:focus:not([readonly]) + label, textarea:focus:not([readonly]) + label {       color: var(--md-sys-color-error);     }     label {       color: var(--md-sys-color-error);     }     .supporting-text {       color: var(--md-sys-color-error);     }     .suffix {       color: var(--md-sys-color-error);     }   } }  \/* Search Field *\/ .searchbar {   .prefix {     position: absolute;     \/\/left: 12px;     padding-left: 1rem;     top: 0;     user-select: none;     display: flex;     align-self: center;   }    &amp; &gt; input {     border-width: 0;     background-color: transparent;     padding-left: 3rem;   } } .searchbar.has-sidebar {   margin-left: 0;   @media #{$large-and-up} {     margin-left: 300px;   } }  \/* .input-field input[type=search] {   display: block;   line-height: inherit;    .nav-wrapper &amp; {     height: inherit;     padding-left: 4rem;     width: calc(100% - 4rem);     border: 0;     box-shadow: none;   }   &amp;:focus:not(.browser-default) {     border: 0;     box-shadow: none;   }   &amp; + .label-icon {     transform: none;     left: 1rem;   } } *\/  \/* Textarea *\/ \/\/ Default textarea textarea {   width: 100%;   height: 3rem;   background-color: transparent;    &amp;.materialize-textarea {     padding-top: 26px !important;     padding-bottom: 4px !important;     line-height: normal;     overflow-y: hidden; \/* prevents scroll bar flash *\/     resize: none;     min-height: 3rem;     box-sizing: border-box;   } }  \/\/ For textarea autoresize .hiddendiv {   visibility: hidden;   white-space: pre-wrap;   word-wrap: break-word;   overflow-wrap: break-word; \/* future version of deprecated 'word-wrap' *\/   padding-top: 1.2rem; \/* prevents text jump on Enter keypress *\/    \/\/ Reduces repaints   position: absolute;   top: 0;   z-index: -1; }  \/* Autocomplete Items *\/ .autocomplete-content {   li {     .highlight { color: var(--md-sys-color-on-background); }     img {       height: $dropdown-item-height - 10;       width: $dropdown-item-height - 10;       margin: 5px 15px;     }   } }  \/* Datepicker date input fields *\/ .datepicker-date-input {   position: relative;   text-indent: -9999px;    &amp;::after {     display: block;     position: absolute;     top: 1.10rem;     content: attr(data-date);     color: var(--input-color);     text-indent: 0;   }    &amp;:focus-visible {     text-indent: 0;   }    &amp;:focus-visible:after {     text-indent: -9999px;   } }<\/code><\/pre>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 <code>HomeCodeComponent<\/code> \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component, input } from '@angular\/core'; import type { FormControl } from '@angular\/forms'; import { ReactiveFormsModule } from '@angular\/forms';  import { InputComponent } from '..\/input\/input\/input.component'; import { InputCharacterCounterComponent } from '..\/input\/input-character-counter\/input-character-counter.component'; import { InputFieldComponent } from '..\/input\/input-field.component'; import { InputHintComponent } from '..\/input\/input-hint\/input-hint.component'; import { InputLabelComponent } from '..\/input\/input-label\/input-label.component'; import { InputPrefixComponent } from '..\/input\/input-prefix\/input-prefix.component'; import { InputSuffixComponent } from '..\/input\/input-suffix\/input-suffix.component';  @Component({   selector: 'app-home-code',   imports: [     ReactiveFormsModule,     InputFieldComponent,     InputLabelComponent,     InputComponent,     InputHintComponent,     InputCharacterCounterComponent,     InputSuffixComponent,     InputPrefixComponent,   ],   templateUrl: '.\/home-code.component.html',   changeDetection: ChangeDetectionStrategy.OnPush, }) export class HomeCodeComponent {   readonly control = input.required&lt;FormControl&lt;string&gt;&gt;(); }<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8df\/46d\/ca7\/8df46dca73cd46e453a000b4dd0f5c0d.png\" alt=\"\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \" title=\"\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \" width=\"1022\" height=\"286\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/8df\/46d\/ca7\/8df46dca73cd46e453a000b4dd0f5c0d.png\"\/><\/p>\n<div><figcaption>\u041e\u0448\u0438\u0431\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 <\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0432\u0438\u0434\u0438\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0441\u0442\u0438\u043b\u0435\u0439 &#8212; \u0437\u0430\u043c\u0435\u043d\u0438\u043c <code>$md_sys_typescale_body-large_size<\/code> \u043d\u0430 <code>16px<\/code>.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 \u0440\u0443\u0433\u0430\u0435\u0442\u0441\u044f \u043d\u0430 <code>$large-and-up<\/code>. \u041f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a:<\/p>\n<pre><code class=\"css\">\/\/.searchbar.has-sidebar { \/\/  margin-left: 0; \/\/  @media #{$large-and-up} { \/\/    margin-left: 300px; \/\/  } \/\/}<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u043c <code>$dropdown-item-height<\/code> \u043d\u0430 <code>50px<\/code>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/5c2\/7a7\/bcd\/5c27a7bcdc7d298e22e6cdad011e6c7b.png\" alt=\"\u041f\u0440\u043e\u0435\u043a\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f\" title=\"\u041f\u0440\u043e\u0435\u043a\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f\" width=\"1022\" height=\"286\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5c2\/7a7\/bcd\/5c27a7bcdc7d298e22e6cdad011e6c7b.png\"\/><\/p>\n<div><figcaption>\u041f\u0440\u043e\u0435\u043a\u0442 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a76\/904\/9e1\/a769049e170fb4635d31b3315bd3f3be.png\" width=\"1344\" height=\"594\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a76\/904\/9e1\/a769049e170fb4635d31b3315bd3f3be.png\"\/><\/figure>\n<p>\u0412\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e.<\/p>\n<p>\u041e\u0442\u043a\u043b\u044e\u0447\u0438\u043c \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e &#8212; <code>encapsulation: ViewEncapsulation.None<\/code><\/p>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/fc1\/f07\/434\/fc1f0743461e9d41cfe937187914e71b.png\" width=\"1344\" height=\"594\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/fc1\/f07\/434\/fc1f0743461e9d41cfe937187914e71b.png\"\/><\/figure>\n<p>\u0423\u043a\u0430\u0436\u0435\u043c \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443:<\/p>\n<pre><code class=\"css\">.input-field {   display: block; }<\/code><\/pre>\n<blockquote>\n<p>\u0418\u0434\u0435\u0430\u043b\u044c\u043d\u043e, \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e.<\/p>\n<\/blockquote>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e.<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u0435\u043a\u0440\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0431\u0435\u0437 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438, \u0443\u0431\u0435\u0436\u0434\u0430\u044f\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u0430 \u0443\u0436\u0435 \u0437\u0430\u0442\u0435\u043c, \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0435 \u043a\u0443\u0441\u043a\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u043a\u043e\u0434 \u0432 \u043d\u0443\u0436\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. <\/strong>\u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043a \u0435\u0433\u043e \u043f\u043e\u0442\u043e\u043c\u043a\u0430\u043c.<\/p>\n<p>\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>input-field<\/code>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b5f\/f1a\/318\/b5ff1a318dc7ecd90f4969c6dcb86659.png\" width=\"669\" height=\"535\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b5f\/f1a\/318\/b5ff1a318dc7ecd90f4969c6dcb86659.png\"\/><\/figure>\n<p>\u0411\u0435\u0440\u0435\u043c \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u0432 <code>input\/input.component.scss<\/code>.<\/p>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a <code>InputComponent<\/code> \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0438\u043d\u043f\u0443\u0442\u043e\u043c, \u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:<\/p>\n<pre><code class=\"css\">:host {   &amp;:not([type]):not(.browser-default),   &amp;[type='text']:not(.browser-default),   &amp;[type='password']:not(.browser-default),   &amp;[type='email']:not(.browser-default),   &amp;[type='url']:not(.browser-default),   &amp;[type='time']:not(.browser-default),   &amp;[type='date']:not(.browser-default),   &amp;[type='datetime']:not(.browser-default),   &amp;[type='datetime-local']:not(.browser-default),   &amp;[type='month']:not(.browser-default),   &amp;[type='tel']:not(.browser-default),   &amp;[type='number']:not(.browser-default),   &amp;[type='search']:not(.browser-default),   &amp;.materialize-textarea {     outline: none;     color: var(--md-sys-color-on-background);     width: 100%;     font-size: 16px; \/\/ =&gt; 16 dp     height: 56px; \/\/ 56dp   } } <\/code><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438, \u0432\u0441\u0435 \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c.<\/p>\n<pre><code class=\"css\">  .supporting-text {     color: var(--md-sys-color-on-surface-variant);     font-size: 12px;     padding: 0 16px;     margin-top: 4px;   }<\/code><\/pre>\n<p>\u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u044d\u0442\u043e \u0432\u00a0 <code>input-hint.component.scss<\/code>:<\/p>\n<pre><code class=\"css\">:host {   color: var(--md-sys-color-on-surface-variant);   font-size: 12px;   padding: 0 16px;   margin-top: 4px; }<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u044b\u043b\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0430, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u043c.<\/p>\n<pre><code class=\"css\">.input-field {   input,   textarea {     \/\/ Label     &amp;:focus:not([readonly]) + label {       color: var(--input-color);     }   } } <\/code><\/pre>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e <code>input<\/code> \u0438 <code>label<\/code> \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439. \u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0435\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0432 <code>LabelComponent<\/code>:<\/p>\n<pre><code class=\"css\">.app-input:focus:not([readonly]) + :host {   color: var(--md-sys-color-primary); }<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e <code>LabelComponent<\/code> \u044d\u0442\u043e \u043e\u0431\u0435\u0440\u0442\u043a\u0430 \u043d\u0430\u0434 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u0442\u043e\u00a0 <code>+ label<\/code> \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432\u00a0 <code>+ :host<\/code>.<\/p>\n<blockquote>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u0435\u043c. <\/p>\n<\/blockquote>\n<p>\u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e. \u041e\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430 <code>error<\/code>.<\/p>\n<pre><code class=\"css\">.input-field {   \/\/ Error   &amp;.error {     input,     textarea {       border-color: var(--md-sys-color-error);     }   } }<\/code><\/pre>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u0432\u0438\u0434\u0435\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>:host-context()<\/code>. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0434\u043b\u044f <code>input.component.scss<\/code>:<\/p>\n<pre><code class=\"css\">:host {   :host-context(.error) {     border-color: var(--md-sys-color-error);      &amp;:focus:not([readonly]) {       border-color: var(--md-sys-color-error);     }   } }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<p>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/15b\/b92\/2c8\/15bb922c8a5663c4686a6b4f218f8ebd.png\" width=\"504\" height=\"598\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/15b\/b92\/2c8\/15bb922c8a5663c4686a6b4f218f8ebd.png\"\/><\/figure>\n<p><strong>input-field.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   display: block;   position: relative;   clear: both;    &amp;.is-inline {     display: inline-block;   } }<\/code><\/pre>\n<p><strong>input-suffix.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   position: absolute;   right: 12px;   top: 16px;   user-select: none; }  :host-context(.is-error) {   color: var(--md-sys-color-error); }<\/code><\/pre>\n<p><strong>input-prefix.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   position: absolute;   left: 12px;   top: 16px;   user-select: none;   display: flex;   align-self: center; }<\/code><\/pre>\n<p><strong>input-label.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   color: var(--md-sys-color-on-surface-variant);   user-select: none;   font-size: 16px;   position: absolute;   left: 16px;   top: 16px;   cursor: text;   transform-origin: top left;   transition:     left 0.2s ease-out,     top 0.2s ease-out,     transform 0.2s ease-out; }  \/\/ Label .app-input:focus:not([readonly]) + :host {   color: var(--md-sys-color-primary); } .app-input:focus:not([readonly]) + :host, .app-input:not([placeholder=' ']) + :host, .app-input:not(:placeholder-shown) + :host {   \/\/font-size: 12px; \/\/ md.sys.typescale.body-small.size   \/\/ https:\/\/stackoverflow.com\/questions\/34717492\/css-transition-font-size-avoid-jittering-wiggling   transform: scale(calc(12 \/ 16));   top: 8px; }  .app-input:disabled + :host, .app-input[readonly='readonly'] + :host {   color: rgba(var(--md_sys_color_on-surface), 0.38); }  .app-input-prefix ~ :host {   left: calc(12px + 24px + 16px); }  \/\/ is-outlined .app-input.is-outlined:focus:not([readonly]) + :host {   color: var(--md-sys-color-primary); }  :host-context(.is-outlined) .app-input:focus:not([readonly]) + :host, :host-context(.is-outlined) .app-input:not([placeholder=' ']) + :host, :host-context(.is-outlined) .app-input:not(:placeholder-shown) + :host {   top: -8px;   left: 16px;   margin-left: -4px;   padding: 0 4px;   background-color: var(--md-sys-color-background); }  .app-input.is-invalid ~ :host, .app-input:focus.is-invalid ~ :host {   color: var(--md-sys-color-error); }  :host-context(.is-error) {   color: var(--md-sys-color-error); }  :host-context(.is-error input:focus:not([readonly])) + :host {   color: var(--md-sys-color-error); }<\/code><\/pre>\n<p><strong>input-hint.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   color: var(--md-sys-color-on-surface-variant);   font-size: 12px;   padding: 0 16px;   margin-top: 4px; }  .app-input.is-invalid ~ :host:after {   content: attr(data-error);   color: var(--md-sys-color-error); }  :host-context(.is-error) {   color: var(--md-sys-color-error); }<\/code><\/pre>\n<p><strong>input-character-counter.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   color: var(--md-sys-color-on-surface-variant);   font-size: 12px;   float: right;   padding: 0 16px;   margin-top: 4px; }  \/\/ Hide helper text on data message .app-input.is-invalid ~ :host {   display: none; } <\/code><\/pre>\n<p><strong>input.component.scss<\/strong>:<\/p>\n<pre><code class=\"css\">:host {   &amp;:not([type]):not(.browser-default),   &amp;[type='text']:not(.browser-default),   &amp;[type='password']:not(.browser-default),   &amp;[type='email']:not(.browser-default),   &amp;[type='url']:not(.browser-default),   &amp;[type='time']:not(.browser-default),   &amp;[type='date']:not(.browser-default),   &amp;[type='datetime']:not(.browser-default),   &amp;[type='datetime-local']:not(.browser-default),   &amp;[type='month']:not(.browser-default),   &amp;[type='tel']:not(.browser-default),   &amp;[type='number']:not(.browser-default),   &amp;[type='search']:not(.browser-default),   &amp;.materialize-textarea {     outline: none;     color: var(--md-sys-color-on-background);     width: 100%;     font-size: 16px; \/\/ =&gt; 16 dp     height: 56px; \/\/ 56dp   }    box-sizing: border-box; \/* https:\/\/stackoverflow.com\/questions\/1377719\/padding-within-inputs-breaks-width-100*\/   padding: 20px 16px 0 16px;   background-color: var(--md-sys-color-surface);   border: none; \/\/ reset   border-radius: 4px 4px 0 0; \/\/ md.sys.shape.corner.extra-small.top   border-bottom: 1px solid var(--md-sys-color-on-surface-variant);    &amp;:focus:not([readonly]) {     border-bottom: 2px solid var(--md-sys-color-primary);     padding-top: 20px + 1px; \/\/ add border-width   }    &amp;:disabled,   &amp;[readonly='readonly'] {     color: rgba(var(--md_sys_color_on-surface), 0.38);     border-color: rgba(var(--md_sys_color_on-surface), 0.12);     background-color: rgba(var(--md_sys_color_on-surface), 0.04);   }    &amp;:not(.app-textarea)::placeholder {     user-select: none;   }    :host-context(.is-outlined) {     padding-top: 0;     background-color: var(--md-sys-color-background);     border: 1px solid var(--md-sys-color-on-surface-variant);     border-radius: 4px; \/\/ md.sys.shape.corner.extra-small      &amp;:focus:not([readonly]) {       border: 2px solid var(--md-sys-color-primary);       padding-top: 0;       margin-left: -1px; \/\/ subtract border-width     }      &amp;:disabled,     &amp;[readonly='readonly'] {       color: rgba(var(--md_sys_color_on-surface), 0.38);       border-color: rgba(var(--md_sys_color_on-surface), 0.12);     }   }    \/\/ Invalid Input Style   &amp;.is-invalid {     border-bottom: 2px solid var(--md-sys-color-error);     box-shadow: 0 1px 0 0 var(--md-sys-color-error);   }    :host-context(.is-error) {     border-color: var(--md-sys-color-error);      &amp;:focus:not([readonly]) {       border-color: var(--md-sys-color-error);     }   } }  .app-input-prefix ~ :host {   padding-left: calc(12px + 24px + 16px); }  .app-input-suffix ~ :host {   padding-right: calc(12px + 24px + 16px); }  .app-textarea {   width: 100%;   height: 3rem;   background-color: transparent;    &amp;.materialize-textarea {     padding-top: 26px !important;     padding-bottom: 4px !important;     line-height: normal;     overflow-y: hidden; \/* prevents scroll bar flash *\/     resize: none;     min-height: 3rem;     box-sizing: border-box;   } }<\/code><\/pre>\n<p>\u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<pre><code class=\"typescript\">import { coerceBooleanProperty } from '@angular\/cdk\/coercion'; import { ChangeDetectionStrategy, Component, contentChild, input } from '@angular\/core';  import type { CoerceBoolean, InputMode } from '@amz\/core';  import { InputComponent } from '.\/input\/input.component';  @Component({   selector: 'app-input-field',   template: '&lt;ng-content\/&gt;',   styleUrl: '.\/input-field.component.scss',   changeDetection: ChangeDetectionStrategy.OnPush,   host: {     class: 'app-input-field',     '[class.is-inline]': `inline()`,     '[class.is-outlined]': `mode() === 'outlined'`,     '[class.is-error]': 'input().ngControl.touched &amp;&amp; input().ngControl.errors',   }, }) export class InputFieldComponent {   readonly inline = input&lt;CoerceBoolean, CoerceBoolean&gt;(false, { transform: coerceBooleanProperty });    readonly mode = input&lt;InputMode&gt;('default');    readonly input = contentChild.required&lt;InputComponent&gt;(InputComponent); }<\/code><\/pre>\n<p>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7e0\/6af\/72d\/7e06af72d3299b9115ec1a9beb5c3474.png\" width=\"1600\" height=\"505\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7e0\/6af\/72d\/7e06af72d3299b9115ec1a9beb5c3474.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435, \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u043d. \u041d\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0430 \u0432\u0441\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/12e\/082\/d3e\/12e082d3e5a8ce4a022b9977a6b23b51.png\" alt=\"\u041f\u043e\u043b\u043d\u0430\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f\" title=\"\u041f\u043e\u043b\u043d\u0430\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f\" width=\"1135\" height=\"888\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/12e\/082\/d3e\/12e082d3e5a8ce4a022b9977a6b23b51.png\"\/><\/p>\n<div><figcaption>\u041f\u043e\u043b\u043d\u0430\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>\u041f\u043e\u0437\u0434\u0440\u0430\u0432\u043b\u044f\u044e, \u0432\u044b \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430! \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0432\u0435\u0434\u0435\u043c \u0438\u0442\u043e\u0433\u0438 \u0438 \u0440\u0435\u0437\u044e\u043c\u0438\u0440\u0443\u0435\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>\u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0430\u0447\u0430\u043b\u0435 \u043c\u044b \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432 Angular. \u0414\u043b\u044f Angular \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u043c\u0438 \u0438\u0437 \u043d\u0438\u0445 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f:<\/p>\n<ul>\n<li>\n<p><strong>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439.<\/strong> \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c Angular, \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0438\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0438\u043b\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438.<\/strong> \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043b\u0438 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f JavaScript-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/strong> \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f Angular, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043c\u0435\u0448\u0430\u0442\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043f\u0443\u0442\u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a <strong>Materialize<\/strong>. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043c\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0432\u044b\u044f\u0432\u0438\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0417\u0430\u0442\u0435\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043c\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0438, \u043a\u0430\u043a \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u043e\u0441\u0442\u044c\u044e. \u041c\u044b \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u043e \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u044c, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430.<\/p>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u0438\u043b\u0438\u0441\u044c \u0432 \u0442\u0435\u043c\u0443 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439. \u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432 Angular, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u0434\u0432\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043b\u0430\u0439\u0444\u0445\u0430\u043a\u0430:<\/p>\n<ol>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432-\u043e\u0431\u0435\u0440\u0442\u043e\u043a.<\/strong> \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Angular-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u0438\u0434\u043e\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u043a \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0435\u0439.<\/strong> \u041d\u0430 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e \u0441\u0442\u0438\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0432\u044b\u0432\u043e\u0434\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0440\u0435\u0448\u0430\u0435\u043c\u044b \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c.<\/p>\n<\/li>\n<li>\n<p><strong>Materialize<\/strong> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0432 Angular, \u0435\u0441\u043b\u0438 \u0443\u0434\u0435\u043b\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043b\u043e\u0433\u0438\u043a\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430 \u0430\u0442\u043e\u043c\u0430\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043a\u0430\u043a \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0442\u0430\u043a \u0438 \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 Angular. \u042d\u0442\u0438 \u0437\u043d\u0430\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442 \u0432\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0438 \u044d\u0441\u0442\u0435\u0442\u0438\u0447\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432 Angular, \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u041a\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0430 \u0447\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430? \u0412\u0430\u0448\u0438 \u043a\u0435\u0439\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u043c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f\u043c!<\/p>\n<h2>\u0421\u0441\u044b\u043b\u043a\u0438<\/h2>\n<p>\u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 github, \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 &#8212;\u00a0<a href=\"https:\/\/github.com\/Fafnur\/angular-materialize\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Fafnur\/angular-materialize<\/a><\/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\/870192\/\"> https:\/\/habr.com\/ru\/articles\/870192\/<\/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\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u043e\u0432\u043e\u0435 Angular\u2011\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043d\u043e\u00a0\u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u0433\u043e \u0432\u0430\u0443\u2011\u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0438\u0441\u044c \u0441\u00a0\u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u043c\u0438: \u0441\u0442\u0438\u043b\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0435\u00a0\u0442\u0430\u043a, \u043a\u0430\u043a\u00a0\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0444\u043e\u0440\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0430\u00a0\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435\u00a0\u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043d\u0430\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0417\u043d\u0430\u043a\u043e\u043c\u043e? \u042d\u0442\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437\u00a0\u0443\u0447\u0435\u0442\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 Angular.<\/p>\n<p>\u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u043a\u0430\u043a\u00a0\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0432\u00a0Angular. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u0442\u0438\u043b\u044c\u043d\u043e\u0435, \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0441\u00a0\u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c \u043b\u0443\u0447\u0448\u0438\u0445 \u043f\u0440\u0430\u043a\u0442\u0438\u043a Angular.<\/p>\n<p><strong>\u0417\u0430\u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a?<\/strong><\/p>\n<p>\u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0441\u043e\u043c\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e\u0447\u0435\u043c\u0443 \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong>\u00a0\u2014 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435\u00a0\u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0435\u00a0\u0442\u0440\u0430\u0442\u044f \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u00a0\u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e.<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430<\/strong>\u00a0\u2014 \u043d\u0435\u00a0\u0432\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432\u00a0\u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0435 \u0432\u043b\u0430\u0434\u0435\u044e\u0442 CSS, \u0430\u00a0\u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u00a0\u0441\u0442\u0438\u043b\u044f\u0445 \u0438 \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0441\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e.<\/p>\n<\/li>\n<li>\n<p><strong>\u0427\u0443\u0432\u0441\u0442\u0432\u043e \u0432\u043a\u0443\u0441\u0430<\/strong>\u00a0\u2014 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435\u00a0\u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442 \u043e\u0431\u043b\u0430\u0434\u0430\u0435\u0442 \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u043d\u0430\u0432\u044b\u043a\u0430\u043c\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0432\u00a0\u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043d\u0435\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043b\u0435\u0434\u044f\u0442 \u0437\u0430\u00a0\u0435\u0434\u0438\u043d\u044b\u043c \u0441\u0442\u0438\u043b\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u00a0\u2014 \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u044b\u0431\u043e\u0440.<\/p>\n<p><strong>\u041c\u043e\u0436\u043d\u043e\u00a0\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0447\u0442\u043e\u2011\u0442\u043e \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb Angular?<\/strong><\/p>\n<p>\u0414\u0430, \u043c\u043e\u0436\u043d\u043e, \u0438 \u044d\u0442\u043e <strong>Angular Material<\/strong>.<\/p>\n<p><strong>\u0425\u043e\u0440\u043e\u0448\u00a0\u043b\u0438 \u043e\u043d?<\/strong><\/p>\n<p>\u0412\u00a0\u0446\u0435\u043b\u043e\u043c, \u0434\u0430, \u043d\u043e\u00a0\u0441\u00a0\u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430\u043c\u0438. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u00a0\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u043a\u0435 Material Design, \u0442\u043e Angular Material \u0432\u0430\u043c \u0432\u0440\u044f\u0434\u00a0\u043b\u0438 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442. <\/p>\n<blockquote>\n<p>\u041e\u0434\u043d\u0430\u043a\u043e \u0435\u0441\u0442\u044c \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e\u0447\u043d\u043e \u0437\u0430\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0435\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f\u00a0\u2014 <a href=\"https:\/\/material.angular.io\/cdk\/categories\" rel=\"noopener noreferrer nofollow\">@angular\/cdk<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432\u0430\u0448\u0438\u043c \u043b\u0443\u0447\u0448\u0438\u043c \u043f\u043e\u043c\u043e\u0449\u043d\u0438\u043a\u043e\u043c \u0432\u00a0\u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u00a0Angular.<\/p>\n<\/blockquote>\n<p><strong>\u041a\u0430\u043a\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u00a0\u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430?<\/strong><\/p>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0441\u0432\u0435\u0441\u0442\u0438 \u043a\u00a0\u0442\u0440\u0435\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c \u0430\u0441\u043f\u0435\u043a\u0442\u0430\u043c:<\/p>\n<ol>\n<li>\n<p><strong>\u0418\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439<\/strong>. Angular \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u0432\u00a0\u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0442\u043e\u043c\u043a\u0438 \u043d\u0435\u00a0\u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 \u0442\u0440\u0435\u0431\u0443\u0435\u043c\u044b\u0445 CSS \u043f\u0440\u0430\u0432\u0438\u043b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441\u00a0\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438<\/strong>. \u041d\u0443\u0436\u043d\u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0432\u00a0\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442\u00a0\u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u0447\u0442\u043e\u00a0\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0432\u043c\u0435\u0448\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430 \u0447\u0435\u0440\u0435\u0437 TypeScript.<\/p>\n<\/li>\n<li>\n<p><strong>\u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f\u00a0JavaScript\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/strong>. \u041c\u043d\u043e\u0433\u0438\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u00a0JavaScript \u0434\u043b\u044f\u00a0\u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432\u00a0\u2014 \u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u043f\u043e\u043f\u0430\u043f\u044b, \u0442\u0443\u043b\u0442\u0438\u043f\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0442\u0440\u0443\u0434\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u00a0Angular, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e, \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437\u00a0CSS \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438<\/strong><\/p>\n<p>\u041c\u044b \u043f\u043e\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0435 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438, \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044f <a href=\"https:\/\/materializeweb.com\/\" rel=\"noopener noreferrer nofollow\">Materialize<\/a> \u0432 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b \u0443\u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u043c\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0442\u0438\u043b\u044c \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0443 Materialize.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u044f\u043c\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 CSS-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0432 Angular<\/h2>\n<p>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a?<\/p>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0442\u0430\u0438\u0442 \u0432\u00a0\u0441\u0435\u0431\u0435 \u0440\u044f\u0434 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ol>\n<li>\n<p><strong>\u041e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438.<\/strong> CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438\u00a0\u2014 \u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043b\u0438\u00a0\u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0434\u043b\u044f\u00a0\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u00a0\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0444\u043e\u0440\u043c\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u0441\u00a0\u043e\u0448\u0438\u0431\u043a\u043e\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u043c, \u0432\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043b\u0430\u0441\u0441 error, \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430\u00a0\u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0447\u0435\u0440\u0435\u0437 javascript.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u00a0\u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0435\u0439 \u0441\u0442\u0438\u043b\u0435\u0439.<\/strong> Angular \u043f\u043e\u00a0\u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e, \u0438\u0437\u043e\u043b\u0438\u0440\u0443\u044f \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e CSS\u2011\u043f\u0440\u0430\u0432\u0438\u043b, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u044b \u043d\u0430\u00a0DOM\u2011\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a:host \u0438:host\u2011context. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435::ng\u2011deep \u0434\u043b\u044f\u00a0\u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u043d\u0435\u00a0\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f, \u0442\u0430\u043a \u043a\u0430\u043a\u00a0\u043e\u043d \u043f\u043e\u043c\u0435\u0447\u0435\u043d \u043a\u0430\u043a\u00a0\u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0439 (deprecated).<\/p>\n<\/li>\n<li>\n<p><strong>\u041a\u043e\u043b\u043b\u0438\u0437\u0438\u044f \u0438\u043c\u0435\u043d.<\/strong> \u0415\u0441\u043b\u0438 \u0432\u00a0\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b \u0438\u043c\u0435\u043d \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u043b\u0438\u00a0\u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0447\u0442\u043e\u00a0\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a\u00a0\u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c JavaScript.<\/strong> \u041c\u043d\u043e\u0433\u0438\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a\u00a0\u0430\u0432\u0442\u043e\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435, \u043f\u043e\u043f\u0430\u043f\u044b \u0438\u043b\u0438\u00a0\u0442\u0443\u043b\u0442\u0438\u043f\u044b, \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f JavaScript. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u0437\u00a0CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u043d\u0435\u00a0\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u00a0Angular \u0438\u0437\u2011\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0435\u0433\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u00a0DOM.<\/p>\n<\/li>\n<li>\n<p><strong>\u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438 \u0438\u0445 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b.<\/strong> \u041f\u0440\u044f\u043c\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0434\u0440\u0430\u0437\u0443\u043c\u0435\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u0447\u0442\u043e\u00a0\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a\u00a0\u043d\u0435\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0430\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u0440\u0438\u00a0\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 (SSR).<\/p>\n<\/li>\n<\/ol>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f?<\/h4>\n<p>\u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u00a0\u0443\u0447\u0435\u0442\u043e\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 Angular.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0438\u043c\u0435\u043d \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u00a0\u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u00a0JavaScript\u2011\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u043e\u0442\u00a0\u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u00a0\u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c CSS\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a <a href=\"https:\/\/materializeweb.com\/getting-started.html\" rel=\"noopener noreferrer nofollow\"><strong>Materialize<\/strong><\/a> \u0432\u00a0Angular \u043d\u0430\u00a0\u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435.<\/p>\n<h2>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<blockquote>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 Angular, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u0435 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u043b\u0430\u0432\u0435. \u0414\u0430\u043d\u043d\u0430\u044f \u0433\u043b\u0430\u0432\u0430 \u043d\u0443\u0436\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u0434\u043e \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438.\u00a0\u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 github, \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 &#8212;\u00a0<a href=\"https:\/\/github.com\/Fafnur\/angular-materialize\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/Fafnur\/angular-materialize<\/a><\/p>\n<\/blockquote>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\">npx -p @angular\/cli ng new angular-materialize<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Angular<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u0434\u0430\u043b\u0438\u043c \u0432\u0435\u043d\u0434\u043e\u0440\u044b:<\/p>\n<pre><code class=\"bash\">rm -rf node_modules rm package-lock.json<\/code><\/pre>\n<p>\u0421\u0434\u0435\u043b\u0430\u0435\u043c <code>yarn<\/code> \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e:<\/p>\n<pre><code class=\"bash\">yarn set version stable yarn config set nodeLinker node-modules<\/code><\/pre>\n<p>\u0418\u0441\u043a\u043b\u044e\u0447\u0438\u043c \u0438\u0437 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 <code>.gitignore<\/code>:<\/p>\n<pre><code># Custom .yarn .angular *.patch .husky\/* junit.xml \/junit .env package-lock.json yarn.lock .nx src\/i18n\/source.xlf<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>eslint<\/code>:<\/p>\n<pre><code class=\"bash\">yarn ng add @angular-eslint\/schematics<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432:<\/p>\n<pre><code class=\"bash\">yarn add -D eslint-config-prettier eslint-plugin-import eslint-plugin-simple-import-sort<\/code><\/pre>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ @ts-check const eslint = require('@eslint\/js'); const tseslint = require('typescript-eslint'); const angular = require('angular-eslint'); const eslintPluginSimpleImportSort = require('eslint-plugin-simple-import-sort'); const eslintPluginImport = require('eslint-plugin-import'); const eslintConfigPrettier = require('eslint-config-prettier');  module.exports = tseslint.config(   {     ignores: ['**\/dist', '**\/public'],   },   {     files: ['**\/*.ts'],     extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended],     processor: angular.processInlineTemplates,     plugins: {       'simple-import-sort': eslintPluginSimpleImportSort,       import: eslintPluginImport,     },     rules: {       '@typescript-eslint\/naming-convention': [         'error',         {           selector: 'default',           format: ['camelCase'],           leadingUnderscore: 'allow',           trailingUnderscore: 'allow',         },         {           selector: 'variable',           format: ['camelCase', 'UPPER_CASE'],           leadingUnderscore: 'allow',           trailingUnderscore: 'allow',         },         {           selector: 'typeLike',           format: ['PascalCase'],         },         {           selector: 'enumMember',           format: ['PascalCase'],         },         {           selector: 'property',           format: null,           filter: {             regex: '^(host)$',             match: false,           },         },       ],       complexity: 'error',       'max-len': ['error', { code: 140 }],       'no-new-wrappers': 'error',       'no-throw-literal': 'error',       'sort-imports': 'off',       'import\/no-unresolved': 'off',       'import\/named': 'off',       'import\/first': 'off',       'simple-import-sort\/exports': 'error',       'simple-import-sort\/imports': [         'error',         {           groups: [['^\\\\u0000'], ['^@?(?!amz)\\\\w'], ['^@amz?\\\\w'], ['^\\\\w'], ['^[^.]'], ['^\\\\.']],         },       ],       'import\/newline-after-import': 'error',       'import\/no-duplicates': 'error',       '@typescript-eslint\/consistent-type-definitions': 'error',       'no-shadow': 'off',       '@typescript-eslint\/no-shadow': 'error',       'no-invalid-this': 'off',       '@typescript-eslint\/no-invalid-this': ['warn'],       '@angular-eslint\/no-host-metadata-property': 'off',       'no-extra-semi': 'off',       '@angular-eslint\/directive-selector': [         'error',         {           type: 'attribute',           prefix: 'app',           style: 'camelCase',         },       ],       '@angular-eslint\/component-selector': [         'error',         {           type: 'element',           prefix: 'app',           style: 'kebab-case',         },       ],       '@typescript-eslint\/consistent-type-imports': 'error',     },   },   {     files: ['**\/*.html'],     extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],     rules: {},   },   eslintConfigPrettier, );<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>prettier<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add -D prettier<\/code><\/pre>\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 <code>.prettierrc.json<\/code>:<\/p>\n<pre><code class=\"json\">{   \"bracketSpacing\": true,   \"printWidth\": 140,   \"semi\": true,   \"singleQuote\": true,   \"tabWidth\": 2,   \"useTabs\": false }<\/code><\/pre>\n<p>\u0418\u0441\u043a\u043b\u044e\u0447\u0438\u043c \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 <code>.prettierignore<\/code>:<\/p>\n<pre><code># Add files here to ignore them from prettier formatting \/dist \/coverage .angular<\/code><\/pre>\n<p>\u0412\u00a0IDE \u0432\u00a0\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 <code>prettier<\/code>\u00a0\u2014 <code>**\/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}<\/code>.<\/p>\n<p>\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 <code>devDependencies<\/code>.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c <code>@angular\/cdk<\/code>:<\/p>\n<pre><code class=\"bash\">yarn add -D @angular\/cdk<\/code><\/pre>\n<p>\u0422\u0430\u043a \u043a\u0430\u043a \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e:<\/p>\n<pre><code class=\"bash\">yarn ng add @angular\/localize<\/code><\/pre>\n<figure class=\"full-width\">\n<div><figcaption>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Angular<\/figcaption><\/div>\n<\/figure>\n<p>\u0423\u043a\u0430\u0436\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c \u0432 <code>angular.json<\/code>:<\/p>\n<pre><code class=\"json\">    \"i18n\": {         \"sourceLocale\": \"en-US\",         \"locales\": {           \"ru\": {             \"translation\": \"src\/i18n\/messages.xlf\",             \"baseHref\": \"\"           }         }       },       \"architect\": {         \"build\": {           \"builder\": \"@angular-devkit\/build-angular:application\",           \"options\": {             \"localize\": [\"ru\"], <\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b \u043b\u043e\u043a\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>src\/i18n\/messages.xlf<\/code>:<\/p>\n<pre><code class=\"xml\">&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt; &lt;xliff version=\"1.2\" xmlns=\"urn:oasis:names:tc:xliff:document:1.2\"&gt;   &lt;file source-language=\"en-US\" datatype=\"plaintext\" original=\"ng2.template\"&gt;     &lt;body&gt;     &lt;\/body&gt;   &lt;\/file&gt; &lt;\/xliff&gt;<\/code><\/pre>\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c boilerplate \u0438\u0437 <code>AppComponent<\/code>:<\/p>\n<pre><code class=\"typescript\">import { ChangeDetectionStrategy, Component } from '@angular\/core'; import { RouterOutlet } from '@angular\/router';  @Component({   selector: 'app-root',   imports: [RouterOutlet],   template: '&lt;router-outlet\/&gt;',   changeDetection:<\/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-443626","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443626","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=443626"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443626\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}