{"id":24477,"date":"2023-05-23T20:13:12","date_gmt":"2023-05-23T16:43:12","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/"},"modified":"2023-05-23T20:13:12","modified_gmt":"2023-05-23T16:43:12","slug":"building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/","title":{"rendered":"Building Pokefetch: \u0646\u0648\u0639 \u06cc\u0627\u0628 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0627 Angular \u0648 PokeAPI"},"content":{"rendered":"<div data-article-id=\"1477725\" id=\"article-body\">\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0628\u0647 \u0646\u0627\u0645 Pokefetch \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <strong>\u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/strong> \u0648 <strong>PokeAPI \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 API<\/strong>.  \u0647\u062f\u0641 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0646\u0627\u0645 \u06cc\u06a9 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0641\u0648\u0631\u0627\u064b \u0646\u0648\u0639 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0627 \u0628\u0647 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular\u060c \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647\u200c\u0633\u0627\u0632\u06cc PokeAPI\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631\u060c \u0627\u06cc\u062c\u0627\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc HTTP \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0634\u062f\u0647 \u062f\u0631 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.  \u0645\u0627 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627 \u0648 \u062e\u062f\u0645\u0627\u062a Angular \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u062a\u0648\u067e\u200c\u0647\u0627\u06cc Pok\u00e9 \u062e\u0648\u062f \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0641\u0631 \u0647\u06cc\u062c\u0627\u0646\u200c\u0627\u0646\u06af\u06cc\u0632 \u0628\u0647 \u0645\u0627 \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u062f \u062a\u0627 Pokefetch \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u0645\u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u06a9\u0647 \u0642\u062f\u0631\u062a Angular \u0648 PokeAPI \u0631\u0627 \u062a\u0631\u06a9\u06cc\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0632 \u0646\u0648\u0639 Pokmon \u0631\u0627 \u0628\u0647 \u0646\u0648\u06a9 \u0627\u0646\u06af\u0634\u062a\u0627\u0646 \u0634\u0645\u0627 \u0628\u0631\u0633\u0627\u0646\u062f.<\/p>\n<p>\u0628\u06cc\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 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=\"Toggle Table of Content\"><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\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Angular\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Angular<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_Angular_CLI_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: Angular CLI \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Angular_%D8%AC%D8%AF%DB%8C%D8%AF_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Tailwind_CSS\" >\u0645\u0631\u062d\u0644\u0647 3: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Tailwind CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A7%D9%88%D9%84%DB%8C%D9%87_CSS_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0645\u0631\u062d\u0644\u0647 4: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 CSS \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/a><\/li><\/ul><\/li><\/ul><\/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\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D8%B9%D8%B1%D9%81%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Pokefetch\" >\u0645\u0639\u0631\u0641\u06cc \u067e\u0631\u0648\u0698\u0647 Pokefetch<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\" >\u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u067e\u0631\u0648\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D9%82%D8%AF%D9%85%D9%87_%D8%A7%DB%8C_%D8%A8%D8%B1_PokeAPI\" >\u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u0631 PokeAPI<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\" >\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%AA%D9%88%D9%84%DB%8C%D8%AF_%D9%85%D9%88%D9%84%D9%81%D9%87_Navbar\" >\u062a\u0648\u0644\u06cc\u062f \u0645\u0648\u0644\u0641\u0647 Navbar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%DA%A9%D8%AF_%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\" >\u06a9\u062f \u0627\u0644\u06af\u0648\u06cc \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%B1%D9%88%DB%8C%D8%B3_PokeAPI\" >\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0633\u0631\u0648\u06cc\u0633 PokeAPI<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B3%D8%B1%D9%88%DB%8C%D8%B3_PokeAPI\" >\u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u0648\u06cc\u0633 PokeAPI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%AF%D8%B1%DA%A9_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_HTTP_%D8%A8%D8%A7_Angular_HttpClient\" >\u062f\u0631\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u0628\u0627 Angular HttpClient<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_PokeAPI_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D9%86%D9%88%D8%B9_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\" >\u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc PokeAPI \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D8%B1%D8%AF%D9%86_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86_%D8%AA%D8%A7%DB%8C%D9%BE_%DA%A9%D9%86%DB%8C%D8%AF_%D8%AF%D8%B1_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\" >\u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u067e\u0648\u06a9\u0645\u0648\u0646 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\" >\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D8%B1%D8%AF%D9%86_%D9%88_%D8%AA%D8%B2%D8%B1%DB%8C%D9%82_PokemonService\" >\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648 \u062a\u0632\u0631\u06cc\u0642 PokemonService<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D9%86%D9%88%D8%B9_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86_%D9%88_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%A2%D9%86_%D8%AF%D8%B1_%D9%82%D8%A7%D9%84%D8%A8\" >\u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646 \u062f\u0631 \u0642\u0627\u0644\u0628<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/nabfollower.com\/blog\/building-pokefetch-a-pokemon-type-finder-with-angular-and-pokeapi-4kme\/#%D9%85%D8%AE%D8%B2%D9%86_GitHub_Pokefetch_Repo\" >\u0645\u062e\u0632\u0646 GitHub: Pokefetch Repo<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_Angular\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Angular<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u067e\u0631\u0648\u0698\u0647 Pokefetch \u062e\u0648\u062f\u060c \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f Angular \u0631\u0627 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u062a\u0648\u0633\u0639\u0647 \u062e\u0648\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_Angular_CLI_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: Angular CLI \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Angular \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0631\u0627\u0628\u0637 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 (CLI) \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0633\u0627\u062e\u062a\u0646 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.  \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u06cc\u0627 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0635\u0628 Angular CLI \u0628\u0647 \u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> <span class=\"nt\">-g<\/span> @angular\/cli\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>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 Angular CLI \u0631\u0627 \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_%DB%8C%DA%A9_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Angular_%D8%AC%D8%AF%DB%8C%D8%AF_%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 2: \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 Angular CLI \u0646\u0635\u0628 \u0634\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng new pokefetch\n<span class=\"nb\">cd <\/span>pokefetch\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>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u062c\u062f\u06cc\u062f \u0628\u0627 \u0646\u0627\u0645 \u201c<strong>\u067e\u0648\u06a9 \u0648\u0627\u06a9<\/strong>\u201d \u0631\u0627 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a\u06cc \u0628\u0627 \u0647\u0645\u06cc\u0646 \u0646\u0627\u0645 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u062f\u0631 \u0622\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f.  Angular CLI \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f\u060c \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0646\u0635\u0628 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><strong>\u0627\u06cc\u062c\u0627\u062f \u067e\u0648\u0634\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648 \u0633\u0631\u0648\u06cc\u0633:<\/strong><\/p>\n<p>\u062f\u0631 Angular\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627 \u0645\u0646\u0637\u0642 \u062a\u062c\u0627\u0631\u06cc \u0648 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0648\u0634\u0647 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0627\u062c\u0632\u0627 \u0648 \u062e\u062f\u0645\u0627\u062a \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u062f\u0648 \u067e\u0648\u0634\u0647 \u0628\u0627 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>components<\/code> \u0648 <code>services<\/code> \u062f\u0631 \u0645\u0633\u06cc\u0631 <code>src\/app<\/code>.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_Tailwind_CSS\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Tailwind CSS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0645\u0627 \u0627\u0632 Tailwind CSS \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc Tailwind CSS \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a.  \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0633\u0645\u06cc Tailwind CSS \u062f\u06cc\u062f\u0646 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u06cc\u06a9\u06cc \u0627\u0632 \u0648\u0628\u0644\u0627\u06af \u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0645\u0646 \u0631\u0627 \u062f\u0631 \u0647\u0645\u06cc\u0646 \u0645\u0648\u0631\u062f \u0628\u062e\u0648\u0627\u0646\u06cc\u062f:<\/p>\n<p>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Tailwind CSS \u062f\u0631 Angular Application<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0645\u06cc \u0631\u0633\u062f \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0622\u0646\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06cc\u06a9 \u0645\u0631\u0648\u0631 \u06a9\u0644\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 Pokefetch \u0634\u0627\u0645\u0644 \u0627\u0647\u062f\u0627\u0641 \u0648 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A7%D9%88%D9%84%DB%8C%D9%87_CSS_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 4: \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0627\u0648\u0644\u06cc\u0647 CSS \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0645\u0642\u062f\u0627\u0631\u06cc CSS \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 \u062a\u0627 \u06cc\u06a9 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u062f\u0631 \u0633\u0637\u062d \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u06a9\u062f \u0633\u0627\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u0622\u0645\u062f\u0647 \u0627\u0633\u062a <code>app.component.html<\/code> \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc CSS<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight xml\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"h-screen w-screen bg-gray-400\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\">&lt;\/div&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<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0627 \u0627\u0632 \u0633\u0647 \u06a9\u0644\u0627\u0633 Tailwind \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u062f\u0648 \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0627\u0631\u062a\u0641\u0627\u0639 \u0648 \u0639\u0631\u0636 \u06a9\u0627\u0645\u0644 \u0635\u0641\u062d\u0647 \u0648 \u0622\u062e\u0631\u06cc \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D8%B1%D9%81%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Pokefetch\"><\/span>\n<p>  \u0645\u0639\u0631\u0641\u06cc \u067e\u0631\u0648\u0698\u0647 Pokefetch<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h4><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\"><\/span>\n<p>  \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u067e\u0631\u0648\u0698\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>We have a simple application to display Pokemon type in an intuitive card.\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><\/p>\n<p>\u062f\u0631 \u0646\u0648\u0627\u0631 \u062c\u0633\u062a\u062c\u0648\u060c \u0646\u0627\u0645 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0636\u0631\u0628\u0647 \u0628\u0632\u0646\u06cc\u062f <strong>\u062c\u0633\u062a\u062c\u0648 \u06a9\u0631\u062f\u0646<\/strong>.  \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0631 \u0631\u0648\u06cc \u06cc\u06a9 \u06a9\u0627\u0631\u062a \u06a9\u0648\u0686\u06a9 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631: Pokefetch \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87_%D8%A7%DB%8C_%D8%A8%D8%B1_PokeAPI\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647 \u0627\u06cc \u0628\u0631 PokeAPI<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>PokeAPI \u06cc\u06a9 API \u0628\u0627\u0632 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u062c\u0627\u0645\u0639 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u062c\u0647\u0627\u0646 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0631\u06a9\u0632 \u0645\u0631\u06a9\u0632\u06cc \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0631 \u0645\u0648\u0631\u062f \u06af\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646\u060c \u062d\u0631\u06a9\u0627\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc\u200c\u0647\u0627\u060c \u0627\u0646\u0648\u0627\u0639 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0627 PokeAPI\u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0631\u062a\u0628\u0637 \u0628\u0627 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0648 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u0646\u062f.  API \u06cc\u06a9 \u0645\u0639\u0645\u0627\u0631\u06cc RESTful \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062e\u0627\u0635 \u06cc\u0627 \u0627\u0646\u062c\u0627\u0645 \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.  \u0686\u0647 \u0628\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u0648\u0639\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0647\u0627 \u06cc\u0627 \u0632\u0646\u062c\u06cc\u0631\u0647 \u062a\u06a9\u0627\u0645\u0644 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c PokeAPI \u0634\u0645\u0627 \u0631\u0627 \u062a\u062d\u062a \u067e\u0648\u0634\u0634 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Our Pokefetch project will leverage the ***PokeAPI to fetch Pok\u00e9mon type information based on user input***.\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=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0628\u0627\u0644\u0627\u062a\u0631\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647\u060c \u06cc\u0639\u0646\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645 <strong>\u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/strong>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%AA%D9%88%D9%84%DB%8C%D8%AF_%D9%85%D9%88%D9%84%D9%81%D9%87_Navbar\"><\/span>\n<p>  <strong>\u062a\u0648\u0644\u06cc\u062f \u0645\u0648\u0644\u0641\u0647 Navbar<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng generate component components\/navbar\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>Angular CLI \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.  \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0634\u062f\u0647 \u0634\u0627\u0645\u0644:<\/p>\n<ul>\n<li>\n<p><code>navbar.component.ts<\/code>: \u0641\u0627\u06cc\u0644 TypeScript \u062d\u0627\u0648\u06cc \u0645\u0646\u0637\u0642 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0632\u0621 \u0646\u0627\u0648\u0628\u0631\u06cc \u0627\u0633\u062a.<\/p>\n<\/li>\n<li>\n<p><code>navbar.component.html<\/code>: \u0641\u0627\u06cc\u0644 \u0642\u0627\u0644\u0628 HTML \u06a9\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u0648\u0644\u0641\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><code>navbar.component.css<\/code>: \u0641\u0627\u06cc\u0644 CSS \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u062f\u0647\u06cc\u062f.<\/p>\n<\/li>\n<li>\n<p><code>navbar.component.spec.ts<\/code>: \u0641\u0627\u06cc\u0644 \u062a\u0633\u062a \u06cc\u0627\u0633 \u0628\u0631\u0627\u06cc \u0646\u0648\u0634\u062a\u0646 \u0645\u0648\u0627\u0631\u062f \u062a\u0633\u062a \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc.<\/p>\n<\/li>\n<\/ul>\n<p>\u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>images<\/code> \u062f\u0631 \u0645\u0633\u06cc\u0631 <code>src\/app\/assets\/images<\/code>.  \u0627\u0632 \u0627\u06cc\u0646 \u067e\u0648\u0634\u0647 \u0628\u0631\u0627\u06cc \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u062a\u0645\u0627\u0645 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0645\u0627 \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0645\u0627 \u06cc\u06a9 \u062a\u0635\u0648\u06cc\u0631 Pokeball SVG \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<p>\u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f: Pokeball SVG.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f\u060c \u0645\u0627 \u0641\u0642\u0637 \u0627\u0632 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0642\u0627\u0644\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0627\u06cc\u0644 \u0633\u0627\u0632\u06cc \u0627\u0632 Tailwind CSS \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0645\u0648\u0631\u062f \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc Jasmine \u062a\u0645\u0631\u06a9\u0632 \u0627\u06cc\u0646 \u0648\u0628\u0644\u0627\u06af \u0646\u06cc\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D8%A7%D9%84%DA%AF%D9%88%DB%8C_%D9%86%D9%88%D8%A7%D8%B1_%D9%86%D8%A7%D9%88%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  <strong>\u06a9\u062f \u0627\u0644\u06af\u0648\u06cc \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight xml\"><code><span class=\"nt\">&lt;nav<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"flex items-center justify-between flex-wrap bg-teal-400 p-4\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"flex items-center flex-shrink-0 text-white mr-6\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;img<\/span>\n      <span class=\"na\">src=<\/span><span class=\"s\">\"..\/..\/..\/assets\/images\/pokeball.svg\"<\/span>\n      <span class=\"na\">alt=<\/span><span class=\"s\">\"Pokeball\"<\/span>\n      <span class=\"na\">class=<\/span><span class=\"s\">\"w-10 h-10 mr-0.5\"<\/span>\n    <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\">&lt;span<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"font-semibold text-xl tracking-tight\"<\/span><span class=\"nt\">&gt;<\/span>Pokemon<span class=\"nt\">&lt;\/span&gt;<\/span>\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/nav&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<p>\u0639\u0646\u0635\u0631 <\/p>\n<nav> \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0648 padding \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0630\u06a9\u0631 \u0634\u062f\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u0638\u0631\u0641 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0628\u0627 \u062a\u0635\u0648\u06cc\u0631 \u0622\u0631\u0645 (<code>pokeball.svg<\/code>) \u0648 \u0645\u062a\u0646 &#8220;Pokemon&#8221; \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0648 \u0648\u0632\u0646 \u0641\u0648\u0646\u062a \u062e\u0627\u0635.  \u06a9\u0644\u0627\u0633 \u0647\u0627 <code>flex<\/code>\u060c <code>items-center<\/code>\u060c <code>justify-between<\/code>\u060c \u0648 <code>flex-wrap<\/code> \u0686\u06cc\u062f\u0645\u0627\u0646 \u0648 \u062a\u0631\u0627\u0632 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u062c\u0632\u0621 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f <code>app.component.html<\/code> \u0641\u0627\u06cc\u0644 \u0648\u0627\u0642\u0639 \u062f\u0631 <code>src\/app<\/code> \u067e\u0648\u0634\u0647 \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>&lt;app-navbar&gt;&lt;\/app-navbar&gt;<\/code> \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0638\u0627\u0647\u0631 \u0634\u0648\u062f \u0631\u0627 \u062a\u06af \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight xml\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"h-screen w-screen bg-gray-400\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;app-navbar&gt;&lt;\/app-navbar&gt;<\/span>\n<span class=\"nt\">&lt;\/div&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<p>\u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\u060c \u0648 \u0645\u0648\u0644\u0641\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0648\u0628 \u062e\u0648\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng serve\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%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B3%D8%B1%D9%88%DB%8C%D8%B3_PokeAPI\"><\/span>\n<p>  \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0633\u0631\u0648\u06cc\u0633 PokeAPI<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0627\u0632 PokeAPI\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 Pokefetch \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0627\u062d\u0644 \u062a\u0648\u0644\u06cc\u062f \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 PokeAPI \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B3%D8%B1%D9%88%DB%8C%D8%B3_PokeAPI\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u0648\u06cc\u0633 PokeAPI<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0633\u0631\u0648\u06cc\u0633 PokeAPI \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Angular CLI \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight xml\"><code>ng generate service service\/pokemon\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><strong><em>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f<\/em><\/strong><em>: \u0627\u06cc\u0646\u0648 \u0686\u06a9 \u06a9\u0646<\/em> <code>PokemonService<\/code> <em>\u0648<\/em> <code>HttpClientModule<\/code> <em>\u0648\u0627\u0631\u062f \u0645\u06cc \u0634\u0648\u0646\u062f<\/em> <code>app.module.ts<\/code> <em>\u0641\u0627\u06cc\u0644.  \u0627\u06af\u0631 \u0646\u0647\u060c \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/em><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppRoutingModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app-routing.module<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">HttpClientModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/common\/http<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">PokemonService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/service\/pokemon.service<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">AppComponent<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">BrowserModule<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">AppRoutingModule<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">HttpClientModule<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">PokemonService<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">bootstrap<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">AppModule<\/span> <span class=\"p\">{<\/span> <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<h3><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B1%DA%A9_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D9%87%D8%A7%DB%8C_HTTP_%D8%A8%D8%A7_Angular_HttpClient\"><\/span>\n<p>  \u062f\u0631\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u0628\u0627 Angular HttpClient<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0631\u0627 <code>HttpClient<\/code> \u0645\u0627\u0698\u0648\u0644 \u062f\u0631 Angular \u0628\u0647 \u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc HTTP \u0631\u0627 \u0628\u0647 API \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645.  \u0628\u0627 \u0648\u0627\u0631\u062f\u0627\u062a <code>HttpClient<\/code>\u06a9\u0644\u0627\u0633 \u0627\u0632 <code>'@angular\/common\/http'<\/code> \u060c \u0645\u0627 \u0628\u0647 \u0631\u0648\u0634 \u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc GET\u060c POST\u060c PUT\u060c DELETE \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0631\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_PokeAPI_%D8%A8%D8%B1%D8%A7%DB%8C_%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D9%86%D9%88%D8%B9_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\"><\/span>\n<p>  \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc PokeAPI \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Injectable<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">HttpClient<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/common\/http<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Observable<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">rxjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">map<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">rxjs<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Injectable<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">providedIn<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PokemonService<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">http<\/span><span class=\"p\">:<\/span> <span class=\"nx\">HttpClient<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\n\n  <span class=\"nx\">getPokemonType<\/span><span class=\"p\">(<\/span><span class=\"nx\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"nx\">Observable<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">name<\/span><span class=\"o\">=<\/span><span class=\"nx\">name<\/span><span class=\"p\">.<\/span><span class=\"nx\">toLowerCase<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">http<\/span><span class=\"p\">.<\/span><span class=\"kd\">get<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">any<\/span><span class=\"o\">&gt;<\/span>            <span class=\"p\">(<\/span><span class=\"s2\">`https:\/\/pokeapi.co\/api\/v2\/pokemon\/<\/span><span class=\"p\">${<\/span><span class=\"nx\">name<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span><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\">response<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">types<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">].<\/span><span class=\"kd\">type<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">)<\/span>\n    <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>\u0645\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645: <code>Injectable<\/code> \u0648 <code>HttpClient<\/code> \u0627\u0632 \u062c\u0627\u0646\u0628 <code>@angular\/core<\/code> \u0648 <code>@angular\/common\/http<\/code>\u060c \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628.  \u0631\u0627 <code>getPokemonType<\/code> \u0645\u062a\u062f \u06cc\u06a9 \u0646\u0627\u0645 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0645\u0646\u062a\u0634\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0646\u0627\u0645 \u0631\u0627 \u0628\u0647 \u062d\u0631\u0648\u0641 \u06a9\u0648\u0686\u06a9 od \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0632\u06cc\u0631\u0627 API \u0641\u0642\u0637 \u0627\u0632 \u0646\u0627\u0645 \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>HttpClient<\/code> \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644 \u06cc\u06a9 \u062f\u0631\u062e\u0648\u0627\u0633\u062a GET \u0628\u0647 PokeAPI.  \u0633\u067e\u0633 \u067e\u0627\u0633\u062e API \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0627\u0648\u0644\u06cc\u0646 \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u062a\u0631\u0633\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0631\u0627 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u062e\u0648\u062f \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0646\u06cc\u0645 \u0648 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>getPokemonType<\/code> \u0631\u0648\u0634\u06cc \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D8%B1%D8%AF%D9%86_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86_%D8%AA%D8%A7%DB%8C%D9%BE_%DA%A9%D9%86%DB%8C%D8%AF_%D8%AF%D8%B1_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\"><\/span>\n<p>  \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u067e\u0648\u06a9\u0645\u0648\u0646 \u062a\u0627\u06cc\u067e \u06a9\u0646\u06cc\u062f \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0645\u0648\u0644\u0641\u0647 Pokemon-Search\u060c \u0645\u0627 \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 PokeAPI \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0628\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648 \u062a\u0632\u0631\u06cc\u0642 PokemonService\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0631\u062f\u0647 \u0648 \u062f\u0631 \u0642\u0627\u0644\u0628 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u0645.  \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0627\u062c\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA_%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u0633\u062a\u062c\u0648\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 Angular CLI \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"nx\">ng<\/span> <span class=\"nx\">generate<\/span> <span class=\"nx\">component<\/span> <span class=\"nx\">components<\/span><span class=\"o\">\/<\/span><span class=\"nx\">pokemon<\/span><span class=\"o\">-<\/span><span class=\"nx\">search<\/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>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f Navbar \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f <code>pokemon-search.component.ts<\/code> \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0642\u0628\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D8%B1%D8%AF%D9%86_%D9%88_%D8%AA%D8%B2%D8%B1%DB%8C%D9%82_PokemonService\"><\/span>\n<p>  \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648 \u062a\u0632\u0631\u06cc\u0642 PokemonService<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 PokemonService \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Pokemon-Search\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u0648 \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0646\u06cc\u0645.  \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0631\u0627\u062d\u0644 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648 \u062a\u0632\u0631\u06cc\u0642 PokemonService \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>pokemon-search.component.ts<\/code> \u0641\u0627\u06cc\u0644 \u0648\u0627\u0642\u0639 \u062f\u0631 <code>src\/app\/components<\/code> \u067e\u0648\u0634\u0647<\/p>\n<\/li>\n<li>\n<p>PokemonService \u0631\u0627 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u062e\u0637 \u0632\u06cc\u0631 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">PokemonService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/services\/pokemon.service<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p>\u062f\u0631 <code>PokemonSearchComponent<\/code> \u06a9\u0644\u0627\u0633\u060c \u06cc\u06a9 \u062e\u0627\u0635\u06cc\u062a \u0628\u0647 \u0646\u0627\u0645 \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u06a9\u0646\u06cc\u062f <code>pokemonType<\/code> \u0627\u0632 \u0646\u0648\u0639 \u0631\u0634\u062a\u0647 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"nx\">pokemonType<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p>\u062f\u0631 \u0633\u0627\u0632\u0646\u062f\u0647\u060c PokemonService \u0631\u0627 \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0632\u06cc\u0631 \u062a\u0632\u0631\u06cc\u0642 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">pokemonService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">PokemonService<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>\u0645\u062a\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>search<\/code> \u062f\u0631 <code>PokemonSearchComponent<\/code> \u06a9\u0644\u0627\u0633 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0633\u062a\u062c\u0648:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"nx\">search<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pokemonService<\/span><span class=\"p\">.<\/span><span class=\"nx\">getPokemonType<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchTerm<\/span><span class=\"p\">).<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">(<\/span><span class=\"kd\">type<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/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\">pokemonType<\/span> <span class=\"o\">=<\/span> <span class=\"kd\">type<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">},<\/span>\n    <span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">);<\/span>\n    <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>\u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0627\u0633\u062a \u06a9\u0647 <code>pokemon-search.component.ts<\/code> \u062a\u0645\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">PokemonService<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/..\/service\/pokemon.service<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-pokemon-search<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/pokemon-search.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/pokemon-search.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PokemonSearchComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"nl\">pokemonType<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"kd\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">pokemonService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">PokemonService<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\n\n  <span class=\"nx\">ngOnInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nl\">searchTerm<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nx\">search<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n             <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pokemonService<\/span><span class=\"p\">.<\/span><span class=\"nx\">getPokemonType<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">searchTerm<\/span><span class=\"p\">).<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">(<\/span>\n      <span class=\"kd\">type<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pokemonType<\/span> <span class=\"o\">=<\/span> <span class=\"kd\">type<\/span><span class=\"p\">;<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"nx\">error<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n    <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\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f <code>pokemon-search.component.ts<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<p>\u0628\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648 \u062a\u0632\u0631\u06cc\u0642 PokemonService\u060c \u0645\u0627 \u0628\u06cc\u0646 \u0645\u0648\u0644\u0641\u0647 Pokemon-Search \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0633\u0631\u0648\u06cc\u0633 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645.  \u0631\u0627 <code>search<\/code> \u0631\u0648\u0634 \u0627\u0632 PokemonService \u062a\u0632\u0631\u06cc\u0642 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>searchTerm<\/code>.  \u0646\u0648\u0639 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0633\u067e\u0633 \u062f\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f <code>pokemonType<\/code> \u0648\u06cc\u0698\u06af\u06cc.<\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0627 \u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0645\u0648\u0644\u0641\u0647 Pokemon-Search \u0627\u062f\u063a\u0627\u0645 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%D8%A7%DA%A9%D8%B4%DB%8C_%D9%86%D9%88%D8%B9_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86_%D9%88_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%A2%D9%86_%D8%AF%D8%B1_%D9%82%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646 \u062f\u0631 \u0642\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0648\u0627\u06a9\u0634\u06cc \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 Pokemon \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646 \u062f\u0631 \u0642\u0627\u0644\u0628\u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n<ol>\n<li>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>pokemon-search.component.html<\/code> \u0641\u0627\u06cc\u0644 \u0648\u0627\u0642\u0639 \u062f\u0631 <code>src\/app\/components<\/code> \u067e\u0648\u0634\u0647<\/p>\n<\/li>\n<li>\n<p>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0641\u0631\u0645 \u062c\u0633\u062a\u062c\u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight xml\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"flex justify-center mt-20\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;form<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"flex items-center\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;input<\/span>\n      <span class=\"na\">type=<\/span><span class=\"s\">\"text\"<\/span>\n      <span class=\"na\">placeholder=<\/span><span class=\"s\">\"Search Pokemon\"<\/span>\n      <span class=\"err\">[(ngModel)]=\"searchTerm\"<\/span>\n      <span class=\"na\">name=<\/span><span class=\"s\">\"searchTerm\"<\/span>\n      <span class=\"na\">class=<\/span><span class=\"s\">\"py-2 px-10 rounded-l-md focus:outline-none\"<\/span>\n    <span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\">&lt;button<\/span>\n      <span class=\"na\">type=<\/span><span class=\"s\">\"submit\"<\/span>\n      <span class=\"err\">(click)=\"search()\"<\/span>\n      <span class=\"na\">class=<\/span><span class=\"s\">\"bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-r-md\"<\/span>\n    <span class=\"nt\">&gt;<\/span>\n      Search\n    <span class=\"nt\">&lt;\/button&gt;<\/span>\n  <span class=\"nt\">&lt;\/form&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u06cc\u06a9 \u0641\u0631\u0645 \u062c\u0633\u062a\u062c\u0648 \u0628\u0627 \u06cc\u06a9 \u0641\u06cc\u0644\u062f \u0648\u0631\u0648\u062f\u06cc \u0648 \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.  \u0631\u0627 <code>ngModel<\/code> \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644 \u0645\u0642\u062f\u0627\u0631 \u0641\u06cc\u0644\u062f \u0648\u0631\u0648\u062f\u06cc \u0628\u0647 <code>searchTerm<\/code> \u0648\u06cc\u0698\u06af\u06cc \u062c\u0632\u0621<\/p>\n<\/li>\n<li>\n<p>\u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<pre class=\"highlight xml\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"flex justify-center mt-10\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\">&lt;div<\/span>\n    <span class=\"err\">*<\/span><span class=\"na\">ngIf=<\/span><span class=\"s\">\"pokemonType &amp;&amp; pokemonType.length &gt; 0\"<\/span>\n    <span class=\"na\">class=<\/span><span class=\"s\">\"max-w-sm rounded overflow-hidden shadow-lg\"<\/span>\n  <span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"flex items-center flex-col px-6 py-4 bg-green-300\"<\/span><span class=\"nt\">&gt;<\/span>\n      <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"font-bold text-xl mb-2\"<\/span><span class=\"nt\">&gt;<\/span>Type<span class=\"nt\">&lt;\/div&gt;<\/span>\n      <span class=\"nt\">&lt;p<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"text-gray-700 text-base\"<\/span><span class=\"nt\">&gt;<\/span>\n        {{ pokemonType }}\n      <span class=\"nt\">&lt;\/p&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<\/code><\/pre>\n<p>\u0627\u06cc\u0646 \u06a9\u062f \u06cc\u06a9 \u0645\u062d\u0641\u0638\u0647 \u0628\u0627 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0633\u0628\u0632 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>pokemonType<\/code> \u062f\u0627\u0631\u0627\u06cc\u06cc \u062f\u0627\u0631\u0627\u06cc \u0627\u0631\u0632\u0634 \u0627\u0633\u062a  \u062f\u0631 \u062f\u0627\u062e\u0644 \u0638\u0631\u0641\u060c \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <code>{{ pokemonType }}<\/code> \u0646\u062d\u0648 \u062f\u0631\u0648\u0646\u06cc\u0627\u0628\u06cc<\/p>\n<p><strong>\u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0645\u0647\u0645:<\/strong> \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u062a\u0635\u0627\u0644 \u062f\u0648 \u0637\u0631\u0641\u0647 \u062f\u0627\u062f\u0647 \u0628\u0627 ngModel \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 Pokemon-Search\u060c \u0628\u0627\u06cc\u062f FormsModule \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 app.module.ts \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>app.module.ts<\/code> \u0641\u0627\u06cc\u0644 \u0648\u0627\u0642\u0639 \u062f\u0631 <code>src\/app<\/code> \u067e\u0648\u0634\u0647 \u0648 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f <code>FormsModule<\/code> \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u062e\u0637 \u0632\u06cc\u0631 \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc \u0641\u0627\u06cc\u0644:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FormsModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/forms<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<p>\u062f\u0631 <code>imports<\/code> \u0622\u0631\u0627\u06cc\u0647 \u0627\u06cc \u0627\u0632 <code>@NgModule<\/code> \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631\u060c \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>FormsModule<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0648\u0627\u0631\u062f \u0634\u062f\u0647:<\/p>\n<pre class=\"highlight typescript\"><code><span class=\"nx\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n  <span class=\"c1\">\/\/ Other imported modules<\/span>\n  <span class=\"nx\">FormsModule<\/span>\n<span class=\"p\">],<\/span>\n<\/code><\/pre>\n<\/li>\n<li>\n<p>\u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f <code>pokemon-search.component.html<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<\/li>\n<\/ol>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631 \u0646\u0627\u0645 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u062f <code>search()<\/code> \u0645\u062a\u062f \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc \u0634\u0648\u062f \u06a9\u0647 the \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f <code>getPokemonType()<\/code> \u0631\u0648\u0634 \u0627\u0632 PokemonService.  \u0646\u0648\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0648\u0627\u06a9\u0634\u06cc \u0634\u062f\u0647 \u062f\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f <code>pokemonType<\/code> \u0648\u06cc\u0698\u06af\u06cc \u0648 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 Pokemon-Search \u062f\u0631 \u0641\u0627\u06cc\u0644 app.component.html \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"kd\">class<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-screen w-screen bg-gray-400<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n  <span class=\"o\">&lt;<\/span><span class=\"nx\">app<\/span><span class=\"o\">-<\/span><span class=\"nx\">navbar<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/app-navbar<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"o\">&lt;<\/span><span class=\"nx\">app<\/span><span class=\"o\">-<\/span><span class=\"nx\">pokemon<\/span><span class=\"o\">-<\/span><span class=\"nx\">search<\/span><span class=\"o\">&gt;&lt;<\/span><span class=\"sr\">\/app-pokemon-search<\/span><span class=\"err\">&gt;\n<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span><\/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>\u0641\u0627\u06cc\u0644 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0635\u0641\u062d\u0647 \u0648\u0628 \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0648\u0648\u06cc\u0644\u0627!  \u0631\u0627 <strong>\u067e\u0648\u06a9\u06cc\u0641\u0686<\/strong> \u0628\u0631\u0646\u0627\u0645\u0647 \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u067e\u0627\u06cc\u0627\u0646\u060c \u067e\u0631\u0648\u0698\u0647 Pokefetch \u06cc\u06a9 \u062f\u0631\u06a9 \u0627\u0633\u0627\u0633\u06cc \u0627\u0632 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0627\u0646\u0648\u0627\u0639 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 PokeAPI \u0648\u0627\u06a9\u0634\u06cc \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0646\u0642\u0637\u0647 \u0634\u0631\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0645\u0628\u062a\u062f\u06cc\u0627\u0646 \u0627\u0633\u062a.  \u0641\u0636\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u062a\u0642\u0627\u0621 \u0627\u0632 \u0646\u0638\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648 \u0638\u0627\u0647\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f.  \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0645\u0627\u0646\u0646\u062f \u0646\u0645\u0627\u06cc\u0634 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0642\u06cc\u0642 \u067e\u0648\u06a9\u0645\u0648\u0646 \u06cc\u0627 \u0628\u0647\u0628\u0648\u062f \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0627 \u0627\u0633\u062a\u0627\u06cc\u0644 CSS \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0645\u0628\u062a\u062f\u06cc\u0627\u0646 \u06cc\u0627\u062f \u06af\u0631\u0641\u062a\u0647\u200c\u0627\u0646\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u062e\u062f\u0645\u0627\u062a \u0631\u0627 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u06a9\u0646\u0646\u062f\u060c \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc API \u0628\u0631\u0642\u0631\u0627\u0631 \u06a9\u0646\u0646\u062f \u0648 \u0627\u0632 \u0641\u0631\u0645\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f.  \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u067e\u0627\u06cc\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0648\u0634 \u0628\u06cc\u0634\u062a\u0631 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f \u0648 \u0628\u0647 \u0645\u0628\u062a\u062f\u06cc\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Angular \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062a\u0631 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u0646\u062f.<\/p>\n<p>\u0645\u0646 \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u0645 \u0627\u0632 \u0634\u0645\u0627 \u0628\u0634\u0646\u0648\u0645!  \u0646\u0638\u0631\u0627\u062a \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u0634\u0645\u0627 \u0628\u0647 \u0645\u0646 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u062a\u0627 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u0645 \u0648 \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a \u06a9\u0646\u0645.  \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u0628\u0644\u0627\u06af \u0628\u0639\u062f\u06cc \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u0648\u0634\u062a\u0646 \u0645\u0648\u0627\u0631\u062f \u062a\u0633\u062a \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0633\u0627\u062e\u062a\u0647 \u0627\u06cc\u0645 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f\u061f  \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u0647 \u0645\u0646 \u0627\u0637\u0644\u0627\u0639 \u062f\u0647\u06cc\u062f.<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u0645\u0646\u0628\u0639 \u06a9\u0627\u0645\u0644 \u067e\u0631\u0648\u0698\u0647 Pokefetch \u0631\u0627 \u062f\u0631 \u0645\u062e\u0632\u0646 GitHub \u0645\u0646 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.  \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u0632 \u0645\u062e\u0632\u0646 \u0628\u0627\u0632\u062f\u06cc\u062f \u06a9\u0646\u06cc\u062f\u060c \u0646\u0638\u0631 \u0628\u062f\u0647\u06cc\u062f \u06cc\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0631\u06a9\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"%D9%85%D8%AE%D8%B2%D9%86_GitHub_Pokefetch_Repo\"><\/span>\n<p>  \u0645\u062e\u0632\u0646 GitHub: Pokefetch Repo<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u062e\u0632\u0646 GitHub\u060c \u0645\u0646 \u067e\u0631\u0648\u0698\u0647 Pokefetch \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u06a9\u0631\u062f\u0647 \u0627\u0645 \u062a\u0627 \u0622\u0646 \u0631\u0627 \u06a9\u0634\u0641 \u06a9\u0646\u06cc\u062f.  \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0646\u0633\u062e\u0647 \u0632\u0646\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u0622\u062f\u0631\u0633 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f: Pokefetch \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u062e\u0648\u062f \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u06cc\u062f!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0628\u0647 \u0646\u0627\u0645 Pokefetch \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0648 PokeAPI \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 API. \u0647\u062f\u0641 \u0645\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0633\u0646\u062f \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0646\u0627\u0645 \u06cc\u06a9 \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0647 \u0648 \u0641\u0648\u0631\u0627\u064b \u0646\u0648\u0639 \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":24478,"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-24477","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\/24477","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=24477"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/24477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/24478"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=24477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=24477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=24477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}