{"id":31741,"date":"2023-07-24T04:23:23","date_gmt":"2023-07-24T00:53:23","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/"},"modified":"2023-07-24T04:23:23","modified_gmt":"2023-07-24T00:53:23","slug":"angular-matpaginator-custom-styling-dkb","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/","title":{"rendered":"Angular: MatPaginator Custom Styling &#8211; DEV Community"},"content":{"rendered":"<div data-article-id=\"1546519\" id=\"article-body\">\n<p>\u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0648\u0638\u06cc\u0641\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u062f\u0627\u0634\u062a\u0647\u200c\u0627\u06cc\u062f \u0648 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b Angular Material \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f. <\/p>\n<p>\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644\u06cc \u062e\u0648\u062f Angular: Infinite Scrolling \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062c\u062f\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627 \u0628\u0627 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\u060c \u0627\u0645\u0627 \u0639\u0644\u06cc\u0631\u063a\u0645 \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u0631\u0627\u0647 \u062d\u0644 UX \u062e\u0648\u0628 \u0627\u0633\u062a\u060c \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0645\u062c\u0628\u0648\u0631\u06cc\u0645 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0633\u0646\u062a\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. <\/p>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 MatPaginator \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0631\u0627\u0647 \u062d\u0644 \u062e\u0648\u062f \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u06cc\u06a9 \u0646\u06a9\u062a\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0627\u0633\u062a&#8230; \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc Angular \u0627\u0635\u0644\u0627 \u062c\u0630\u0627\u0628 \u0628\u0647 \u0646\u0638\u0631 \u0646\u0645\u06cc \u0631\u0633\u062f.  \u0622\u06cc\u0627 \u062e\u0648\u0628 \u0646\u06cc\u0633\u062a \u0627\u06af\u0631 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0646\u0627\u0648\u0628\u0631\u06cc \u0622\u0646 \u0631\u0627 \u062d\u0641\u0638 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645\u061f<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D9%87%D8%AF%D9%81\" >\u0647\u062f\u0641<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%DB%8C%DA%A9_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1.) \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D9%BE%DB%8C%D8%B4_%D9%81%D8%B1%D8%B6_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2.) \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%DB%8C%DA%A9_DIV_%D8%A8%DB%8C%D9%86_%D8%AF%DA%A9%D9%85%D9%87_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3. \u06cc\u06a9 DIV \u0628\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%B1%D9%86%D8%AF%D8%B1_%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D8%A7_%D8%A8%D9%87_DOM\" >\u0645\u0631\u062d\u0644\u0647 4. \u0631\u0646\u062f\u0631 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0628\u0647 DOM<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%A8%D9%87_%DA%A9%D9%84%DB%8C%DA%A9_%D9%87%D8%A7%DB%8C_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%DA%AF%D9%88%D8%B4_%D8%AF%D9%87%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 5. \u0628\u0647 \u06a9\u0644\u06cc\u06a9 \u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u06a9\u0627\u0631\u0628\u0631 \u06af\u0648\u0634 \u062f\u0647\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/angular-matpaginator-custom-styling-dkb\/#%D8%AE%D9%84%D8%A7%D8%B5%D9%87\" >\u062e\u0644\u0627\u0635\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%87%D8%AF%D9%81\"><\/span>\n<p>  \u0647\u062f\u0641<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0632\u06cc\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062a\u0648\u0636\u06cc\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0622\u0646 \u067e\u06cc\u0648\u0633\u062a \u06a9\u0646\u06cc\u0645 <code>mat-paginator<\/code> \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f. <\/p>\n<p>\u06a9\u0644 \u06a9\u062f \u0645\u0646\u0628\u0639 \u062f\u0631 StackBlitz \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n<p><\/p>\n<p>\u0645\u0627 \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>appBubblePagination<\/code>\u060c \u06a9\u0647 \u0627\u0632 \u0642\u062f\u0631\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>Renderer2<\/code> \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0639\u0646\u0627\u0635\u0631 UI \u0633\u0641\u0627\u0631\u0634\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0637\u0631\u062d \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"p\">&lt;<\/span><span class=\"nt\">table<\/span> <span class=\"na\">mat-table<\/span> <span class=\"err\">[<\/span><span class=\"na\">dataSource<\/span><span class=\"err\">]<\/span><span class=\"p\">=<\/span><span class=\"s\">\"dataSource\"<\/span> <span class=\"err\">[<\/span><span class=\"na\">trackBy<\/span><span class=\"err\">]<\/span><span class=\"p\">=<\/span><span class=\"s\">\"identity\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"err\">!--<\/span> <span class=\"na\">table<\/span> <span class=\"na\">content<\/span> <span class=\"err\">--<\/span><span class=\"p\">&gt;<\/span>\n<span class=\"p\">&lt;\/<\/span><span class=\"nt\">table<\/span><span class=\"p\">&gt;<\/span>\n\n<span class=\"p\">&lt;<\/span><span class=\"nt\">mat<\/span><span class=\"err\">-<\/span><span class=\"na\">paginator<\/span>\n  <span class=\"na\">appBubblePagination<\/span>\n  <span class=\"err\">[<\/span><span class=\"na\">appCustomLength<\/span><span class=\"err\">]<\/span><span class=\"p\">=<\/span><span class=\"s\">\"dataSource.data.length\"<\/span>\n  <span class=\"err\">[<\/span><span class=\"na\">length<\/span><span class=\"err\">]<\/span><span class=\"p\">=<\/span><span class=\"s\">\"dataSource.data.length\"<\/span>\n  <span class=\"err\">[<\/span><span class=\"na\">pageSize<\/span><span class=\"err\">]<\/span><span class=\"p\">=<\/span><span class=\"s\">\"20\"<\/span>\n<span class=\"p\">&gt;<\/span>\n<span class=\"p\">&lt;\/<\/span><span class=\"nt\">mat<\/span><span class=\"err\">-<\/span><span class=\"na\">paginator<\/span><span class=\"p\">&gt;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_%DB%8C%DA%A9_%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1.) \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0647\u062f\u0641 \u062a\u063a\u06cc\u06cc\u0631 \u062c\u0646\u0628\u0647 \u0628\u0635\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0645\u062a\u060c \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"p\">@<\/span><span class=\"nd\">Directive<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">[appBubblePagination]<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">standalone<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">BubblePaginationDirective<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">@<\/span><span class=\"nd\">Host<\/span><span class=\"p\">()<\/span> <span class=\"p\">@<\/span><span class=\"nd\">Self<\/span><span class=\"p\">()<\/span> <span class=\"p\">@<\/span><span class=\"nd\">Optional<\/span><span class=\"p\">()<\/span> <span class=\"k\">private<\/span> <span class=\"k\">readonly<\/span> <span class=\"nx\">matPag<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MatPaginator<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">elementRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ElementRef<\/span><span class=\"p\">,<\/span>\n    <span class=\"k\">private<\/span> <span class=\"nx\">ren<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Renderer2<\/span>\n  <span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f:<\/p>\n<ul>\n<li>\n<code>MatPaginator<\/code>  &#8211; \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u067e\u06cc\u0648\u0633\u062a \u0627\u0633\u062a <code>mat-paginator<\/code>.  \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0633\u062a\u06cc \u0641\u0647\u0631\u0633\u062a \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062d\u0628\u0627\u0628 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\n<code>ElementRef<\/code>  &#8211; \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0639\u0646\u0627\u0635\u0631 DOM \u0627\u0633\u062a (<code>mat-paginator<\/code>) \u06a9\u0647 \u0628\u062e\u0634\u0646\u0627\u0645\u0647 \u0628\u0647 \u0622\u0646 \u067e\u06cc\u0648\u0633\u062a \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0645\u0631\u062c\u0639\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0639\u0646\u0627\u0635\u0631 HTML \u0627\u0636\u0627\u0641\u06cc \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u062f\u0631 \u0645\u0648\u0631\u062f Angular docs \u0628\u06cc\u0634\u062a\u0631 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/li>\n<li>\n<code>Renderer2<\/code>  &#8211; \u0627\u0645\u06a9\u0627\u0646 \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 HTML\u060c \u0627\u0641\u0632\u0648\u062f\u0646\/\u062d\u0630\u0641 \u06a9\u0644\u0627\u0633 \u0647\u0627\u06cc css \u0648 \u067e\u06cc\u0648\u0633\u062a \u06a9\u0631\u062f\u0646 \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 (\u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u060c \u0634\u0646\u0627\u0648\u0631 \u06a9\u0646\u06cc\u062f).  \u062f\u0631 \u0645\u0648\u0631\u062f Angular docs \u0628\u06cc\u0634\u062a\u0631 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D9%BE%DB%8C%D8%B4_%D9%81%D8%B1%D8%B6_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2.) \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0639\u062f\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0645\u06cc \u062c\u0646\u0628\u0647 \u0628\u0635\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645.  \u062f\u0631 \u0632\u06cc\u0631 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0627\u0632 \u062d\u0627\u0644\u062a \u0634\u0631\u0648\u0639 \u0648 \u067e\u0627\u06cc\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/Angular-MatPaginator-Custom-Styling-DEV-Community.jpg\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"139\" title=\"\"><\/p>\n<p>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0634\u0627\u0645\u0644:<\/p>\n<ul>\n<li>\u062d\u0630\u0641 \u0645\u062a\u0646 &#8220;\u0627\u0642\u0644\u0627\u0645 \u062f\u0631 \u0635\u0641\u062d\u0647&#8221;.<\/li>\n<li>\u0634\u0645\u0627\u0631\u0647 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0641\u0639\u0644\u06cc (1-20) \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u0633\u062a \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0622\u0646 \u0631\u0627 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<p>\u0628\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 <code>ElementRef<\/code> \u0648 <code>Renderer2<\/code>\u060c \u0645\u0627 \u0637\u0631\u062d \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">BubblePaginationDirective<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">AfterViewInit<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"nx\">ngAfterViewInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">styleDefaultPagination<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"k\">private<\/span> <span class=\"nx\">styleDefaultPagination<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">nativeElement<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">elementRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">nativeElement<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">itemsPerPage<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">nativeElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">querySelector<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">.mat-mdc-paginator-page-size<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">howManyDisplayedEl<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">nativeElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">querySelector<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">.mat-mdc-paginator-range-label<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ remove 'items per page'<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">itemsPerPage<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ style text of how many elements are currently displayed<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">howManyDisplayedEl<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">position<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">absolute<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">howManyDisplayedEl<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">left<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">0<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">howManyDisplayedEl<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">color<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#919191<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">howManyDisplayedEl<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">font-size<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">14px<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%DB%8C%DA%A9_DIV_%D8%A8%DB%8C%D9%86_%D8%AF%DA%A9%D9%85%D9%87_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3. \u06cc\u06a9 DIV \u0628\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0646\u0627\u0648\u0628\u0631\u06cc \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0628\u0631\u0631\u0633\u06cc \u0639\u0646\u0635\u0631 HTML \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u06cc\u06a9 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <code>mat-mdc-paginator-range-actions<\/code> \u06a9\u0644\u0627\u0633 \u0645\u062a\u0635\u0644 \u0628\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 div wrapper.  \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u06cc\u0646 div \u0631\u0627 \u0647\u062f\u0641 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645 \u0648 \u06cc\u06a9 \u062f\u06cc\u0648\u06cc \u062c\u062f\u06cc\u062f \u062f\u0631\u062c \u06a9\u0646\u06cc\u0645 <code>div<\/code> \u0639\u0646\u0635\u0631 \u0628\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0641\u0644\u0634 \u0686\u067e \u0648 \u0631\u0627\u0633\u062a.  \u0627\u0632 \u0622\u0646 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u06a9\u0627\u0646\u06cc \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u062d\u0628\u0627\u0628 \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/Angular-MatPaginator-Custom-Styling-DEV-Community.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"500\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"nx\">ngAfterViewInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">styleDefaultPagination<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createBubbleDivRef<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n<span class=\"k\">private<\/span> <span class=\"nx\">createBubbleDivRef<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">actionContainer<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">elementRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">nativeElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">querySelector<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">div.mat-mdc-paginator-range-actions<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">nextButtonDefault<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">elementRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">nativeElement<\/span><span class=\"p\">.<\/span><span class=\"nx\">querySelector<\/span><span class=\"p\">(<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">button.mat-mdc-paginator-navigation-next<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ create a HTML element where all bubbles will be rendered<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">bubbleContainerRef<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLElement<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">addClass<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">bubbleContainerRef<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">g-bubble-container<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ render element before the 'next button' is displayed<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">insertBefore<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">actionContainer<\/span><span class=\"p\">,<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">bubbleContainerRef<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">nextButtonDefault<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0639\u0646\u0635\u0631 div wrapper \u0631\u0627 \u062a\u0648\u0633\u0637 <code>actionContainer<\/code>\u060c \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0645\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 <code>nextButtonDefault<\/code> \u0628\u0647 \u0645\u0646\u0638\u0648\u0631 \u0627\u062a\u0635\u0627\u0644 \u0635\u062d\u06cc\u062d \u0645\u0627 <code>div<\/code> \u0639\u0646\u0635\u0631 \u062f\u0631 DOM\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06cc\u0646 \u0645\u0631\u062c\u0639 \u0631\u0627 \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>bubbleContainerRef<\/code>.<\/p>\n<p>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>this.ren.insertBefore()<\/code> \u0631\u0627 \u0648\u0635\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>div<\/code> \u0639\u0646\u0635\u0631 \u062f\u0627\u062e\u0644 <code>mat-mdc-paginator-range-actions<\/code> \u06a9\u0644\u0627\u0633\u060c \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 <code>div<\/code> \u0639\u0646\u0635\u0631 \u0642\u0628\u0644 \u0627\u0632 \u062f\u06a9\u0645\u0647 \u0628\u0639\u062f\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc. <\/p>\n<p>\u0627\u06af\u0631 \u0627\u0632 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u062f <code>this.ren.appendChild(actionContainer, this.bubbleContainerRef);<\/code>  \u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0628\u0639\u062f \u0627\u0632 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u067e\u06cc\u06a9\u0627\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690160003_436_Angular-MatPaginator-Custom-Styling-DEV-Community.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"764\" height=\"164\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%B1%D9%86%D8%AF%D8%B1_%D8%AF%DA%A9%D9%85%D9%87_%D9%87%D8%A7_%D8%A8%D9%87_DOM\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 4. \u0631\u0646\u062f\u0631 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0628\u0647 DOM<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0686\u0647\u0627\u0631\u0645 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06a9\u0645\u0647 \u0627\u0648\u0644 \u0648 \u0622\u062e\u0631 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0648 \u0628\u0642\u06cc\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0646\u0642\u0637\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u062d\u062a\u06cc \u0627\u06af\u0631 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0647\u0631 \u0639\u0646\u0635\u0631 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f <code>display: none<\/code>\u060c \u06a9\u0647 \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u06cc \u0641\u0642\u0637 \u0645\u0648\u0627\u0631\u062f \u0636\u0631\u0648\u0631\u06cc \u0631\u0627 \u0622\u0634\u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/07\/1690160003_651_Angular-MatPaginator-Custom-Styling-DEV-Community.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"114\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">BubblePaginationDirective<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">AfterViewInit<\/span> <span class=\"p\">{<\/span>\n  <span class=\"cm\">\/**\n   * how many elements are in the table\n   *\/<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">Input<\/span><span class=\"p\">()<\/span> <span class=\"nx\">appCustomLength<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">ngAfterViewInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">styleDefaultPagination<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createBubbleDivRef<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buildButtons<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ .... previous code<\/span>\n\n  <span class=\"cm\">\/**\n   * end result: (1) .... (4) (5) (6) ... (25)\n   *\/<\/span>\n  <span class=\"k\">private<\/span> <span class=\"nx\">buildButtons<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">neededButtons<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nx\">ceil<\/span><span class=\"p\">(<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">appCustomLength<\/span> <span class=\"o\">\/<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">matPag<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageSize<\/span>\n    <span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ if there is only one page, do not render buttons<\/span>\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">neededButtons<\/span> <span class=\"o\">===<\/span> <span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">elementRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">nativeElement<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">return<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ create first button<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createButton<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">)];<\/span>\n\n    <span class=\"c1\">\/\/ add dots (....) to UI<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">dotsStartRef<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createDotsElement<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ create all buttons needed for navigation (except the first &amp; last one)<\/span>\n    <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">index<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"nx\">index<\/span> <span class=\"o\">&lt;<\/span> <span class=\"nx\">neededButtons<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span> <span class=\"nx\">index<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[...<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">,<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createButton<\/span><span class=\"p\">(<\/span><span class=\"nx\">index<\/span><span class=\"p\">)];<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ add dots (....) to UI<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">dotsEndRef<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createDotsElement<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"c1\">\/\/ create last button to UI after the dots (....)<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n      <span class=\"p\">...<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">,<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createButton<\/span><span class=\"p\">(<\/span><span class=\"nx\">neededButtons<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">),<\/span>\n    <span class=\"p\">];<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"cm\">\/**\n   * create button HTML element\n   *\/<\/span>\n  <span class=\"k\">private<\/span> <span class=\"nx\">createButton<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">):<\/span> <span class=\"nx\">HTMLElement<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">bubbleButton<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">createElement<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">text<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">createText<\/span><span class=\"p\">(<\/span><span class=\"nb\">String<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">));<\/span>\n\n    <span class=\"c1\">\/\/ add class &amp; text<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">addClass<\/span><span class=\"p\">(<\/span><span class=\"nx\">bubbleButton<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">g-bubble<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">bubbleButton<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">margin-right<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">8px<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">bubbleButton<\/span><span class=\"p\">,<\/span> <span class=\"nx\">text<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ react on click<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">listen<\/span><span class=\"p\">(<\/span><span class=\"nx\">bubbleButton<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">click<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">switchPage<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"c1\">\/\/ render on UI<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">appendChild<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">bubbleContainerRef<\/span><span class=\"p\">,<\/span> <span class=\"nx\">bubbleButton<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ set style to hidden by default<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">bubbleButton<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nx\">bubbleButton<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"cm\">\/**\n   * Helper function to switch page\n   *\/<\/span>\n  <span class=\"k\">private<\/span> <span class=\"nx\">switchPage<\/span><span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">previousPageIndex<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">matPag<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageIndex<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">matPag<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">i<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">matPag<\/span><span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">_emitPageEvent<\/span><span class=\"dl\">'<\/span><span class=\"p\">](<\/span><span class=\"nx\">previousPageIndex<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0631\u0648\u0631 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0631\u062e \u062f\u0627\u062f\u0646 \u0627\u0633\u062a. <\/p>\n<p>\u062a\u0627\u0628\u0639 <code>buildButtons()<\/code>:<\/p>\n<ul>\n<li>\u0645\u062d\u0627\u0633\u0628\u0647 \u062a\u0639\u062f\u0627\u062f \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u062a\u0648\u0633\u0637 <code>neededButtons<\/code> \u0686\u0648\u0646 \u0645\u062c\u0645\u0648\u0639 \u0639\u0646\u0627\u0635\u0631 \u062c\u062f\u0648\u0644 \u0627\u0633\u062a (<code>appCustomLength<\/code>) \u062a\u0642\u0633\u06cc\u0645 \u0628\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc.<\/li>\n<li>\u0627\u06af\u0631 \u0639\u0646\u0627\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u062c\u062f\u0648\u0644 \u06a9\u0645\u062a\u0631 \u0627\u0632 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0628\u0627\u0634\u0646\u062f\u060c \u0686\u06cc\u0632\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645<\/li>\n<li>\u0627\u06af\u0631 \u0645\u0648\u0627\u0631\u062f \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u062c\u062f\u0648\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f (<code>neededButtons<\/code> > 1) \u0645\u0627:\n<ul>\n<li>\u0627\u0648\u0644\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0631\u0646\u062f\u0631 \u0646\u0642\u0637\u0647 \u0647\u0627<\/li>\n<li>\u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u0628\u0647 \u062c\u0632 \u0622\u062e\u0631\u06cc\u0646 \u0645\u0648\u0631\u062f \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0631\u0646\u062f\u0631 \u0646\u0642\u0637\u0647 \u0647\u0627<\/li>\n<li>\u0622\u062e\u0631\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<\/li>\n<li>\u062f\u06a9\u0645\u0647 \u0647\u0627 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f <code>createButton()<\/code> \u0628\u0647 <code>buttonsRef<\/code> \u0622\u0631\u0627\u06cc\u0647\u060c \u0632\u06cc\u0631\u0627 \u0628\u0639\u062f\u0627\u064b \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f<\/li>\n<\/ul>\n<p>\u062a\u0627\u0628\u0639 <code>createButton()<\/code>:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u0634\u0627\u062e\u0635 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c \u0622\u0646 \u0631\u0627 \u06cc\u06a9 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u06cc\u0646 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0645\u062a\u0646\u06cc \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0628\u0627 \u0686\u0646\u062f \u06a9\u0644\u0627\u0633 CSS \u0627\u0636\u0627\u0641\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0647\u0631 \u062f\u06a9\u0645\u0647 \u0627\u0632 DOM \u0645\u062e\u0641\u06cc \u0627\u0633\u062a\u060c \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 <code>this.ren.setStyle(bubbleButton, 'display', 'none');<\/code>.  \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u062d\u0631\u06a9\u062a \u06a9\u0627\u0631\u0628\u0631 \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0622\u0646\u0647\u0627 \u0646\u0645\u0627\u06cc\u0634\/\u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/li>\n<li>\u0628\u0627 \u067e\u06cc\u0648\u0633\u062a \u06a9\u0631\u062f\u0646 \u0634\u0646\u0648\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0647\u0631 \u062f\u06a9\u0645\u0647 <code>this.ren.listen(bubbleButton, 'click' ...)<\/code>\u060c \u062a\u0627\u0628\u0639 helper \u0631\u0627 \u0645\u06cc \u0646\u0627\u0645\u06cc\u0645 <code>switchPage()<\/code> \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0635\u0641\u062d\u0647 \u0641\u0639\u0644\u06cc<\/li>\n<\/ul>\n<p>\u0627\u0632 \u0645\u062b\u0627\u0644 \u0628\u0627\u0644\u0627 <code>createDotsElement()<\/code> \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0632\u06cc\u0631\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0631\u0646\u062f\u0631 \u0645\u0634\u0627\u0628\u0647 \u0627\u0633\u062a <code>createButton()<\/code> \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062a\u0639\u062f\u0627\u062f\u06cc \u06a9\u0644\u0627\u0633 CSS \u0645\u0627\u0646\u0646\u062f <code>g-bubble<\/code> \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 <\/p>\n<p>\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u062c\u0627\u0646\u0628\u06cc: \u062f\u0631 <code>switchPage()<\/code> \u0645\u0646 \u0644\u0632\u0648\u0645\u0627 \u0645\u0637\u0645\u0626\u0646 \u0646\u06cc\u0633\u062a\u0645 \u06a9\u0647 \u0686\u0631\u0627 \u0628\u0627 <code>_emitPageEvent<\/code> \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0646\u062a\u0634\u0627\u0631 \u062f\u0627\u0631\u062f <code>previousPageIndex<\/code>.  \u0645\u0646 \u0646\u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u067e\u0627\u0633\u062e\u06cc \u0628\u0631\u0627\u06cc \u0622\u0646 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645\u060c \u0627\u0645\u0627 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_5_%D8%A8%D9%87_%DA%A9%D9%84%DB%8C%DA%A9_%D9%87%D8%A7%DB%8C_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1_%DA%AF%D9%88%D8%B4_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 5. \u0628\u0647 \u06a9\u0644\u06cc\u06a9 \u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u06a9\u0627\u0631\u0628\u0631 \u06af\u0648\u0634 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0622\u062e\u0631\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u0646\u0637\u0642\u06cc \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u06a9\u0644\u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u062d\u0628\u0627\u0628 \u06af\u0648\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u0634\u0627\u062e\u0635 \u0641\u0639\u0627\u0644 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0627\u0633\u062a\u0627\u06cc\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0644\u062d\u0638\u0647 \u0647\u0645\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0645\u062e\u0641\u06cc \u0647\u0633\u062a\u0646\u062f \u0648 \u0645\u0631\u062c\u0639 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0622\u0646 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0647 \u0645\u06cc \u0634\u0648\u062f <code>buttonsRef<\/code>.  \u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0641\u0642\u0637 2-3 \u062f\u06a9\u0645\u0647 \u0627\u0648\u0644 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645 \u0648 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0647\u0631 \u062c\u0647\u062a \u062d\u0631\u06a9\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 2 \u062f\u06a9\u0645\u0647 \u0627\u0636\u0627\u0641\u06cc \u0628\u0647 \u0631\u0627\u0633\u062a \u0648 \u0686\u067e \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u06af\u0631 \u06a9\u0627\u0631\u0628\u0631 \u062f\u0631 \u0648\u0633\u0637 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0627\u0634\u062f\u060c \u0646\u0642\u0627\u0637 \u0628\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0648 \u0622\u062e\u0631\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0647\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">BubblePaginationDirective<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">AfterViewInit<\/span> <span class=\"p\">{<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"nx\">buttonsRef<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HTMLElement<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n\n    <span class=\"c1\">\/\/ .... previous code<\/span>\n\n    <span class=\"nx\">ngAfterViewInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">styleDefaultPagination<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">createBubbleDivRef<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buildButtons<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">matPag<\/span><span class=\"p\">.<\/span><span class=\"nx\">page<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">pipe<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">[<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">previousPageIndex<\/span> <span class=\"o\">??<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">pageIndex<\/span><span class=\"p\">]),<\/span>\n      <span class=\"nx\">startWith<\/span><span class=\"p\">([<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">0<\/span><span class=\"p\">])<\/span>\n    <span class=\"p\">)<\/span>\n    <span class=\"p\">.<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">(([<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"nx\">curr<\/span><span class=\"p\">])<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">changeActiveButtonStyles<\/span><span class=\"p\">(<\/span><span class=\"nx\">prev<\/span><span class=\"p\">,<\/span> <span class=\"nx\">curr<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ .... previous code<\/span>\n\n    <span class=\"k\">private<\/span> <span class=\"nx\">changeActiveButtonStyles<\/span><span class=\"p\">(<\/span><span class=\"nx\">previousIndex<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span> <span class=\"nx\">newIndex<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">previouslyActive<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">[<\/span><span class=\"nx\">previousIndex<\/span><span class=\"p\">];<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">currentActive<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">[<\/span><span class=\"nx\">newIndex<\/span><span class=\"p\">];<\/span>\n\n    <span class=\"c1\">\/\/ remove active style from previously active button<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">removeClass<\/span><span class=\"p\">(<\/span><span class=\"nx\">previouslyActive<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">g-bubble__active<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ add active style to new active button<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">addClass<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentActive<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">g-bubble__active<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ hide all buttons<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">button<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">button<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ show 2 previous buttons and 2 next buttons<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">renderElements<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">endDots<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">newIndex<\/span> <span class=\"o\">&lt;<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">renderElements<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">startDots<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">newIndex<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">renderElements<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">firstButton<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">lastButton<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">[<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">];<\/span>\n\n    <span class=\"c1\">\/\/ last bubble and dots<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">dotsEndRef<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">endDots<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">block<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">lastButton<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">endDots<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/ first bubble and dots<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">dotsStartRef<\/span><span class=\"p\">,<\/span>\n      <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"nx\">startDots<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">block<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span>\n    <span class=\"p\">);<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">firstButton<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">startDots<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">none<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ resolve starting and ending index to show buttons<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">startingIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">startDots<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">newIndex<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">renderElements<\/span> <span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">endingIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">endDots<\/span>\n      <span class=\"p\">?<\/span> <span class=\"nx\">newIndex<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">renderElements<\/span>\n      <span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"c1\">\/\/ display starting buttons<\/span>\n    <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">let<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">startingIndex<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span> <span class=\"o\">&lt;=<\/span> <span class=\"nx\">endingIndex<\/span><span class=\"p\">;<\/span> <span class=\"nx\">i<\/span><span class=\"o\">++<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">button<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">buttonsRef<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">];<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">ren<\/span><span class=\"p\">.<\/span><span class=\"nx\">setStyle<\/span><span class=\"p\">(<\/span><span class=\"nx\">button<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">display<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">flex<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0631\u0633\u0646\u0627\u06a9 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc\u0631\u0633\u0647 \u062f\u0631\u0633\u062a\u0647 \ud83d\ude13  \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u0646\u06af\u0631\u0627\u0646\u06cc \u0646\u06cc\u0633\u062a  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0647\u0631 \u0645\u0631\u062d\u0644\u0647 \u0641\u06a9\u0631 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0686\u0647 \u0627\u062a\u0641\u0627\u0642\u06cc \u0645\u06cc \u0627\u0641\u062a\u062f\u060c \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u0627\u06cc\u0646 \u0645\u0632\u062e\u0631\u0641\u0627\u062a \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0639\u062f\u0627\u064b \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0645\u0634\u062a\u0631\u06a9 \u0634\u0648\u06cc\u0645 <code>[this.matPag.page](http:\/\/this.matPag.page)<\/code> \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u062f\u0631\u06cc\u0627\u0641\u062a \u0646\u0645\u0627\u06cc\u0647 \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0644\u06cc\u06a9 \u0634\u062f\u0647 \u0642\u0628\u0644\u06cc \u0648 \u062c\u062f\u06cc\u062f.  \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627 \u0647\u0631 \u06a9\u0644\u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u062d\u0628\u0627\u0628 \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f\u060c \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0642\u0628\u0644 \u0645\u0627 \u067e\u06cc\u0648\u0633\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>switchPage()<\/code> \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0647 \u0647\u0631 \u062d\u0628\u0627\u0628<\/p>\n<p>\u06a9\u0647 \u062f\u0631 <code>changeActiveButtonStyles()<\/code> \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f: <\/p>\n<ul>\n<li>\u0645\u0627 \u0639\u0648\u0636 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>g-bubble__active<\/code> \u0627\u0632 \u062d\u0628\u0627\u0628 \u0641\u0639\u0627\u0644 \u0642\u0628\u0644\u06cc \u0628\u0647 \u062d\u0628\u0627\u0628 \u062c\u062f\u06cc\u062f\u060c \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u0641\u0639\u0627\u0644 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0628\u0627 \u0646\u0645\u0627\u06cc\u0647 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0647\u0645\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0631\u0627 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0646\u06cc\u062f (<code>display: none<\/code>)<\/li>\n<li>\u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0646\u0642\u0637\u0647 \u0647\u0627\u06cc \u067e\u0627\u06cc\u0627\u0646\u06cc \u0648 \u0622\u062e\u0631\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u0648\u062f <code>endDots<\/code>\u060c \u0627\u06af\u0631 <code>newIndex<\/code> \u0622\u062e\u0631\u06cc\u0646 2 \u062f\u06a9\u0645\u0647 \u0646\u06cc\u0633\u062a<\/li>\n<li>\u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0646\u0642\u0637\u0647 \u0647\u0627\u06cc \u0634\u0631\u0648\u0639 \u0631\u0627 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u0627\u0648\u0644\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f \u06cc\u0627 \u062e\u06cc\u0631 <code>startDots<\/code>\u060c \u0627\u06af\u0631 <code>newIndex<\/code> \u0628\u06cc\u0634 \u0627\u0632 2<\/li>\n<li>\u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u0627\u062e\u0635 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0627\u0632 <code>buttonsRef<\/code>\u060c \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 2 \u062f\u06a9\u0645\u0647 \u0642\u0628\u0644\u06cc (<code>startingIndex<\/code>) \u0648 2 \u062f\u06a9\u0645\u0647 \u0628\u0639\u062f\u06cc (<code>endingIndex<\/code>)<\/li>\n<li>\u0645\u0642\u062f\u0627\u0631 \u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u0627\u0634\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D9%84%D8%A7%D8%B5%D9%87\"><\/span>\n<p>  \u062e\u0644\u0627\u0635\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0646\u062d\u0648\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0645\u0648\u0644\u0641\u0647 MatPaginator Angular Material \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 UI \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u067e\u0633\u062a \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0633\u0641\u0627\u0631\u0634\u06cc\u060c \u0627\u0635\u0644\u0627\u062d \u0637\u0631\u062d \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u06cc\u06a9 div \u0628\u06cc\u0646 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc\u060c \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0628\u0647 DOM \u0648 \u06af\u0648\u0634 \u062f\u0627\u062f\u0646 \u0628\u0647 \u06a9\u0644\u06cc\u06a9\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc\u200c\u06af\u0630\u0631\u062f. <\/p>\n<p>\u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0635\u0641\u062d\u0647\u200c\u0628\u0646\u062f\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u062d\u0628\u0627\u0628\u200c\u062f\u0627\u0631 \u0648 \u0646\u0642\u0637\u0647\u200c\u0647\u0627\u06cc\u06cc \u0628\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 \u0648 \u0622\u062e\u0631\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0627\u0633\u062a.  \u06a9\u0644 \u06a9\u062f \u0645\u0646\u0628\u0639 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u062f\u0631 StackBlitz \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n<p>\u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u067e\u0633\u062a \u0631\u0627 \u062f\u0648\u0633\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0628\u0647 \u0622\u0646 \u062f\u0644 \u0628\u0628\u0646\u062f\u06cc\u062f \u0648 \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f:<br \/>dev.to |  \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646 |  \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u062e\u0635\u06cc |  Github<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0648\u0638\u06cc\u0641\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u062f\u0648\u0644 \u062f\u0627\u0634\u062a\u0647\u200c\u0627\u06cc\u062f \u0648 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f\u060c \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b Angular Material \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f. \u062f\u0631 \u0645\u0642\u0627\u0644\u0647 \u0642\u0628\u0644\u06cc \u062e\u0648\u062f Angular: Infinite Scrolling \u0627\u0634\u0627\u0631\u0647 \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062c\u062f\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627 \u0628\u0627 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\u060c \u0627\u0645\u0627 \u0639\u0644\u06cc\u0631\u063a\u0645 \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u0631\u0627\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":31742,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-31741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/31741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=31741"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/31741\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/31742"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=31741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=31741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=31741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}