{"id":20433,"date":"2023-04-30T15:57:27","date_gmt":"2023-04-30T12:27:27","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/"},"modified":"2023-04-30T15:57:27","modified_gmt":"2023-04-30T12:27:27","slug":"render-dynamic-components-in-angular-using-viewcontainerref-160h","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/","title":{"rendered":"\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 viewContainerRef \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 Angular \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f"},"content":{"rendered":"<div data-article-id=\"1452646\" id=\"article-body\">\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\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%D9%85%D8%B9%D8%B1%D9%81%DB%8C\" >\u0645\u0639\u0631\u0641\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%DA%A9%D8%AF_%D8%A7%D8%B3%DA%A9%D9%84%D8%AA_%D8%AC%D8%B2%D8%A1_%D8%AA%D8%A8_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\" >\u06a9\u062f \u0627\u0633\u06a9\u0644\u062a \u062c\u0632\u0621 \u062a\u0628 \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-3\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%D9%86%D9%82%D8%B4%D9%87_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%D8%AF%DA%A9%D9%85%D9%87_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C_%D8%A8%D9%87_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%D9%85%D8%A4%D9%84%D9%81%D9%87\" >\u0646\u0642\u0634\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0647 \u0627\u0646\u0648\u0627\u0639 \u0645\u0624\u0644\u0641\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%DA%A9%D9%84%DB%8C%DA%A9_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%AF%DA%A9%D9%85%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >\u06a9\u0646\u062a\u0631\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B1%D8%A7_%D8%AF%D8%B1_%D9%82%D9%84%D8%A7%D8%A8_%DA%86%D8%B1%D8%AE%D9%87_%D8%AD%DB%8C%D8%A7%D8%AA_OnDestroy_%D9%86%D8%A7%D8%A8%D9%88%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0627\u062c\u0632\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 \u0642\u0644\u0627\u0628 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a OnDestroy \u0646\u0627\u0628\u0648\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%D9%85%D9%88%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B1%D8%A7_%D8%AF%D8%B1_ngOnInit_%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 ngOnInit \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%D9%85%D9%88%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B1%D8%A7_%D8%AF%D8%B1_ngOnChanges_%D8%AF%D9%88%D8%A8%D8%A7%D8%B1%D9%87_%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 ngOnChanges \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/render-dynamic-components-in-angular-using-viewcontainerref-160h\/#%D9%85%D9%86%D8%A7%D8%A8%D8%B9\" >\u0645\u0646\u0627\u0628\u0639:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D8%B9%D8%B1%D9%81%DB%8C\"><\/span>\n<p>  \u0645\u0639\u0631\u0641\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u0646\u06af\u0648\u0644\u0627\u0631\u060c <code>ngComponentOutlet<\/code> \u0631\u0627\u0647 \u0633\u0627\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0627\u062c\u0632\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a.  \u06af\u0632\u06cc\u0646\u0647 \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f <code>ViewContainerRef<\/code> \u06a9\u0644\u0627\u0633 <code>ViewContainerRef<\/code> \u06a9\u0644\u0627\u0633 \u062f\u0627\u0631\u062f <code>createComponent<\/code> \u0631\u0648\u0634\u06cc \u06a9\u0647 \u062c\u0632\u0621 \u0631\u0627 \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0638\u0631\u0641 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u06a9\u0646\u06cc\u06a9 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0627\u0633\u062a.  \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0646\u06af\u0647 \u062f\u0627\u0634\u062a\u0646 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0633\u062a\u0647 \u062f\u0631 \u0628\u0633\u062a\u0647 \u0627\u0635\u0644\u06cc \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0646\u0645\u06cc \u0634\u0648\u0646\u062f.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u0634\u0631\u0648\u0637 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c <code>ViewContainerRef<\/code> \u0645\u062d\u0644\u0648\u0644 \u062a\u0645\u06cc\u0632\u062a\u0631 \u0627\u0632 \u0686\u0646\u062f\u06cc\u0646 \u0627\u0633\u062a <code>ng-if<\/code> \u0639\u0628\u0627\u0631\u0627\u062a\u06cc \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0642\u0627\u0644\u0628 \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0631\u0627 \u0628\u0627\u062f \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u06cc\u06a9 \u062c\u0632\u0621 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645\u060c <code>PokemonTabComponent<\/code>\u060c \u06a9\u0647 \u0627\u0632 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0648 \u0627\u0644\u0641 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a <code>ng-container<\/code> \u0639\u0646\u0635\u0631  \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a PokemonStatsComponent\u060c PokemonAbilitiesComponent \u06cc\u0627 \u0647\u0631 \u062f\u0648 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.  \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0627\u062c\u0632\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ViewContainerRef \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a <code>ngComponentOutlet<\/code> \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u067e\u0633\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D8%AF_%D8%A7%D8%B3%DA%A9%D9%84%D8%AA_%D8%AC%D8%B2%D8%A1_%D8%AA%D8%A8_%D9%BE%D9%88%DA%A9%D9%85%D9%88%D9%86\"><\/span>\n<p>  \u06a9\u062f \u0627\u0633\u06a9\u0644\u062a \u062c\u0632\u0621 \u062a\u0628 \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=\"c1\">\/\/ pokemon-tab.component.ts<\/span>\n\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-tab<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">standalone<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">PokemonStatsComponent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">PokemonAbilitiesComponent<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">template<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`\n    &lt;div style=\"padding: 0.5rem;\" class=\"container\"&gt;\n      &lt;div&gt;\n        &lt;div&gt;\n          &lt;input type=\"radio\" id=\"all\" name=\"selection\" value=\"all\" checked\"&gt;\n          &lt;label for=\"all\"&gt;All&lt;\/label&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n          &lt;input type=\"radio\" id=\"stats\" name=\"selection\" value=\"stats\"&gt;\n          &lt;label for=\"stats\"&gt;Stats&lt;\/label&gt;\n        &lt;\/div&gt;\n        &lt;div&gt;\n          &lt;input type=\"radio\" id=\"abilities\" name=\"selection\" value=\"abilities\"&gt;\n          &lt;label for=\"abilities\"&gt;Abilities&lt;\/label&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;ng-container #vcr&gt;&lt;\/ng-container&gt;\n    &lt;\/div&gt;\n  `<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styles<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"s2\">`...omitted due to brevity...`<\/span><span class=\"p\">],<\/span>\n  <span class=\"na\">changeDetection<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ChangeDetectionStrategy<\/span><span class=\"p\">.<\/span><span class=\"nx\">OnPush<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PokemonTabComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">Input<\/span><span class=\"p\">()<\/span>\n  <span class=\"nx\">pokemon<\/span><span class=\"p\">:<\/span> <span class=\"nx\">FlattenPokemon<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u06a9\u0647 \u062f\u0631 <code>PokemonTabComponent<\/code> \u062c\u0632\u0621 \u0645\u0633\u062a\u0642\u0644\u060c \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0647\u06cc\u0686 \u0627\u062a\u0641\u0627\u0642\u06cc \u0646\u06cc\u0641\u062a\u0627\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0648\u0642\u062a\u06cc \u0634\u0631\u0648\u0639 \u0628\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06a9\u062f\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0645\u06cc\u200c\u06a9\u0631\u062f\u0645\u060c \u0631\u0641\u062a\u0627\u0631 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0631\u062f <code>ViewContainerRef<\/code>.  \u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0627\u062c\u0632\u0627 \u062f\u0631 <code>ng-container<\/code> \u0628\u0647 \u0646\u0627\u0645 vcr.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/\u0628\u0627-\u0627\u0633\u062a\u0641\u0627\u062f\u0647-\u0627\u0632-viewContainerRef-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-\u067e\u0648\u06cc\u0627-\u0631\u0627-\u062f\u0631-Angular.png\" alt=\"\u06a9\u062f \u0627\u0633\u06a9\u0644\u062a \u0646\u0645\u0648\u0646\u0647\" loading=\"lazy\" width=\"677\" height=\"420\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D9%82%D8%B4%D9%87_%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8_%D8%AF%DA%A9%D9%85%D9%87_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C_%D8%A8%D9%87_%D8%A7%D9%86%D9%88%D8%A7%D8%B9_%D9%85%D8%A4%D9%84%D9%81%D9%87\"><\/span>\n<p>  \u0646\u0642\u0634\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0647 \u0627\u0646\u0648\u0627\u0639 \u0645\u0624\u0644\u0641\u0647<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=\"c1\">\/\/ pokemon-tab.enum.ts<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kr\">enum<\/span> <span class=\"nx\">POKEMON_TAB<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">ALL<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">all<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">STATISTICS<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">statistics<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">ABILITIES<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">abilities<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">}<\/span>\n<span class=\"nx\">First<\/span><span class=\"p\">,<\/span> <span class=\"nx\">I<\/span> <span class=\"nx\">defined<\/span> <span class=\"kr\">enum<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">represent<\/span> <span class=\"nx\">different<\/span> <span class=\"nx\">radio<\/span> <span class=\"nx\">button<\/span> <span class=\"nx\">selections<\/span><span class=\"p\">.<\/span>\n\n<span class=\"c1\">\/\/ pokemon-tab.component.ts<\/span>\n\n<span class=\"nx\">componentTypeMap<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"p\">[<\/span><span class=\"nx\">POKEMON_TAB<\/span><span class=\"p\">.<\/span><span class=\"nx\">ALL<\/span><span class=\"p\">]:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">PokemonStatsComponent<\/span><span class=\"p\">,<\/span> <span class=\"nx\">PokemonAbilitiesComponent<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">[<\/span><span class=\"nx\">POKEMON_TAB<\/span><span class=\"p\">.<\/span><span class=\"nx\">STATISTICS<\/span><span class=\"p\">]:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">PokemonStatsComponent<\/span><span class=\"p\">],<\/span>\n    <span class=\"p\">[<\/span><span class=\"nx\">POKEMON_TAB<\/span><span class=\"p\">.<\/span><span class=\"nx\">ABILITIES<\/span><span class=\"p\">]:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">PokemonAbilitiesComponent<\/span><span class=\"p\">],<\/span>\n  <span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633\u060c \u0645\u0646 \u06cc\u06a9 \u0646\u0642\u0634\u0647 \u0634\u06cc \u0628\u0631\u0627\u06cc \u0646\u06af\u0627\u0634\u062a \u0627\u0639\u0636\u0627\u06cc enum \u0628\u0647 \u0644\u06cc\u0633\u062a \u0647\u0627\u06cc \u0646\u0648\u0639 \u0645\u0624\u0644\u0641\u0647 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0631\u062f\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"p\">@<\/span><span class=\"nd\">ViewChild<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">vcr<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">static<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> <span class=\"na\">read<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ViewContainerRef<\/span> <span class=\"p\">})<\/span>\n<span class=\"nx\">vcr<\/span><span class=\"o\">!<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ViewContainerRef<\/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<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u0646 \u0627\u0632 \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631 ViewChild() \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u0627\u0631\u062c\u0627\u0639 \u0628\u0647 \u0639\u0646\u0635\u0631 ng-container \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0644\u0627\u0633 ViewContainerRef \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0638\u0631\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%DA%A9%D9%86%D8%AA%D8%B1%D9%84_%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF_%DA%A9%D9%84%DB%8C%DA%A9_%D8%B1%D8%A7_%D8%A8%D9%87_%D8%AF%DA%A9%D9%85%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C_%D8%B1%D8%A7%D8%AF%DB%8C%D9%88%DB%8C%DB%8C_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u06a9\u0646\u062a\u0631\u0644 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0648\u0642\u062a\u06cc \u0631\u0648\u06cc \u0647\u0631 \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u0645\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u0627\u0646\u0648\u0627\u0639 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 componentTypeMap \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u0645\u060c \u0641\u0647\u0631\u0633\u062a \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0631\u062c\u0627\u0639\u0627\u062a \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u06cc\u062f \u0648 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0622\u0646\u0647\u0627 \u0628\u0647 vcr \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0646\u0645.  \u062f\u0631 \u0642\u0627\u0644\u0628 \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc\u060c \u0645\u0646 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0627 \u0628\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0645\u062a\u062f renderDynamicComponents \u0631\u0627 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ pokemon-tab.component.ts<\/span>\n\n<span class=\"nx\">template<\/span><span class=\"p\">:<\/span><span class=\"s2\">`  \n...\n&lt;div&gt;\n   &lt;input type=\"radio\" id=\"all\" name=\"selection\" value=\"all\"\n   checked (click)=\"selection = 'ALL'; renderDynamicComponents();\"&gt;\n   &lt;label for=\"all\"&gt;All&lt;\/label&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n    &lt;input type=\"radio\" id=\"stats\" name=\"selection\" value=\"stats\"\n       (click)=\"selection = 'STATISTICS'; renderDynamicComponents();\"&gt;\n    &lt;label for=\"stats\"&gt;Stats&lt;\/label&gt;\n&lt;\/div&gt;\n&lt;div&gt;\n    &lt;input type=\"radio\" id=\"abilities\" name=\"selection\" value=\"abilities\"\n       (click)=\"selection = 'ABILITIES'; renderDynamicComponents();\"&gt;\n    &lt;label for=\"abilities\"&gt;Abilities&lt;\/label&gt;\n&lt;\/div&gt;\n...\n`<\/span>\n\n<span class=\"nx\">selection<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ALL<\/span><span class=\"dl\">'<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">STATISTICS<\/span><span class=\"dl\">'<\/span> <span class=\"o\">|<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ABILITIES<\/span><span class=\"dl\">'<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">ALL<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"nl\">componentRefs<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ComponentRef<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">PokemonStatsComponent<\/span> <span class=\"o\">|<\/span> <span class=\"nx\">PokemonAbilitiesComponent<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n<span class=\"nx\">cdr<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">inject<\/span><span class=\"p\">(<\/span><span class=\"nx\">ChangeDetectorRef<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">async<\/span> <span class=\"nx\">renderDynamicComponents<\/span><span class=\"p\">(<\/span><span class=\"nx\">currentPokemon<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">FlattenPokemon<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">enumValue<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">POKEMON_TAB<\/span><span class=\"p\">[<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">selection<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">keyof<\/span> <span class=\"k\">typeof<\/span> <span class=\"nx\">POKEMON_TAB<\/span><span class=\"p\">];<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">componentTypes<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">componentTypeMap<\/span><span class=\"p\">[<\/span><span class=\"nx\">enumValue<\/span><span class=\"p\">];<\/span>\n\n    <span class=\"c1\">\/\/ clear dynamic components shown in the container previously    <\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">vcr<\/span><span class=\"p\">.<\/span><span class=\"nx\">clear<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">componentType<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">componentTypes<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">newComponentRef<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">vcr<\/span><span class=\"p\">.<\/span><span class=\"nx\">createComponent<\/span><span class=\"p\">(<\/span><span class=\"nx\">componentType<\/span><span class=\"p\">);<\/span>\n      <span class=\"nx\">newComponentRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">instance<\/span><span class=\"p\">.<\/span><span class=\"nx\">pokemon<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">currentPokemon<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">currentPokemon<\/span> <span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pokemon<\/span><span class=\"p\">;<\/span>\n      <span class=\"c1\">\/\/ store component refs created<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">componentRefs<\/span><span class=\"p\">.<\/span><span class=\"nx\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">newComponentRef<\/span><span class=\"p\">);<\/span>\n      <span class=\"c1\">\/\/ run change detection in the component and child components<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">cdr<\/span><span class=\"p\">.<\/span><span class=\"nx\">detectChanges<\/span><span class=\"p\">();<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>this.selection<\/code>  \u062f\u06a9\u0645\u0647 \u0631\u0627\u062f\u06cc\u0648\u06cc\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0645\u0642\u062f\u0627\u0631 \u0645\u0624\u0644\u0641\u0647\/\u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0638\u0631\u0641 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f\u060c \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><code>this.vcr.clear();<\/code>  \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627 \u0631\u0627 \u0627\u0632 \u0638\u0631\u0641 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u062c\u0632\u0627\u06cc \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f<\/p>\n<p><code>const newComponentRef = this.vcr.createComponent(componentType);<\/code>  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u062c\u062f\u06cc\u062f \u0631\u0627 \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u0638\u0631\u0641 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u06cc\u06a9 ComponentRef \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<p><code>newComponentRef.instance.pokemon = currentPokemon ? currentPokemon : this.pokemon;<\/code><\/p>\n<p>PokemonStatsComponent \u0648 PokemonAbilitiesComponent \u0627\u0646\u062a\u0638\u0627\u0631 \u0648\u0631\u0648\u062f\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646 \u0631\u0627 \u062f\u0627\u0631\u0646\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u0646 \u06cc\u06a9 \u0634\u06cc Pokemon \u0631\u0627 \u0628\u0647 newComponentRef.instance.pokemon \u0627\u062e\u062a\u0635\u0627\u0635 \u0645\u06cc \u062f\u0647\u0645 \u06a9\u0647 \u062f\u0631 \u0622\u0646 newComponentRef.instance \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u062c\u0632\u0621 \u0627\u0633\u062a.<\/p>\n<p><code>this.componentRefs.push(newComponentRef);<\/code>  \u062a\u0645\u0627\u0645 \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc ComponentRef \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0639\u062f\u0627\u064b \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 ngOnDestroy \u0646\u0627\u0628\u0648\u062f \u0645\u06cc \u06a9\u0646\u0645 \u062a\u0627 \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0634\u0648\u062f.<\/p>\n<p><code>this.cdr.detectChanges();<\/code>  \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0645\u0624\u0644\u0641\u0647 \u0648 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0622\u0646 \u0622\u063a\u0627\u0632 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B1%D8%A7_%D8%AF%D8%B1_%D9%82%D9%84%D8%A7%D8%A8_%DA%86%D8%B1%D8%AE%D9%87_%D8%AD%DB%8C%D8%A7%D8%AA_OnDestroy_%D9%86%D8%A7%D8%A8%D9%88%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0627\u062c\u0632\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 \u0642\u0644\u0627\u0628 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a OnDestroy \u0646\u0627\u0628\u0648\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u06cc\u06a9 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u0634\u062e\u0635 \u0627\u0632 ngOnDestroy \u0631\u0627\u0628\u0637 OnDestroy \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PokemonTabComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnDestroy<\/span> <span class=\"p\">{<\/span>\n   <span class=\"p\">...<\/span><span class=\"nx\">other<\/span> <span class=\"nx\">logic<\/span><span class=\"p\">...<\/span>\n\n   <span class=\"nx\">ngOnDestroy<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"c1\">\/\/ release component refs to avoid memory leak<\/span>\n    <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">componentRef<\/span> <span class=\"k\">of<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">componentRefs<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">componentRef<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">componentRef<\/span><span class=\"p\">.<\/span><span class=\"nx\">destroy<\/span><span class=\"p\">();<\/span>\n      <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 \u0631\u0648\u0634 \u0622\u0631\u0627\u06cc\u0647 componentRefs \u0631\u0627 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062d\u0627\u0641\u0638\u0647 \u0647\u0631 ComponentRef \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0622\u0632\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D9%88%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B1%D8%A7_%D8%AF%D8%B1_ngOnInit_%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 ngOnInit \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f\u060c \u0635\u0641\u062d\u0647 \u062e\u0627\u0644\u06cc \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u062a\u0645\u0627\u0633\u06cc \u0646\u062f\u0627\u0634\u062a\u0647 \u0627\u0633\u062a <code>renderDynamicComponents<\/code> \u0647\u0646\u0648\u0632.  \u062d\u0644 \u0622\u0646 \u0628\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637 OnInit \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062a\u062f \u062f\u0631 \u0628\u062f\u0646\u0647 \u0622\u0633\u0627\u0646 \u0627\u0633\u062a <code>ngOnInit<\/code>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nx\">PokemonTabComponent<\/span> <span class=\"k\">implements<\/span> <span class=\"nx\">OnDestroy<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OnInit<\/span> <span class=\"p\">{<\/span>\n   <span class=\"p\">...<\/span>\n   <span class=\"nx\">ngOnInit<\/span><span class=\"p\">():<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n     <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">renderDynamicComponents<\/span><span class=\"p\">();<\/span>\n   <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648\u0642\u062a\u06cc Angular \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f <code>ngOnInit<\/code>\u060c \u0645\u0642\u062f\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 this.selection<code>is \u2018ALL\u2019 and<\/code>renderDynamicComponents \u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0647\u0631 \u062f\u0648 \u0645\u0624\u0644\u0641\u0647 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u062d\u0627\u0644\u0627 \u0628\u0627\u0631 \u0627\u0648\u0644\u06cc\u0647 \u0647\u0631 \u062f\u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0627\u0645\u0627 \u0645\u0646 \u0645\u0634\u06a9\u0644 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0627\u0631\u0645.  \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0641\u0631\u0645\u060c \u0648\u0631\u0648\u062f\u06cc \u067e\u0648\u06a9\u0645\u0648\u0646 \u0627\u062c\u0632\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0646\u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0642\u0627\u0628\u0644 \u062d\u0644 \u0627\u0633\u062a <code>OnChanges<\/code> \u0631\u0627\u0628\u0637 \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u062c\u062f\u062f renderDynamicComponents \u062f\u0631 <code>ngOnChanges<\/code>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D9%88%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7_%D8%B1%D8%A7_%D8%AF%D8%B1_ngOnChanges_%D8%AF%D9%88%D8%A8%D8%A7%D8%B1%D9%87_%D8%B1%D9%86%D8%AF%D8%B1_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u062f\u0631 ngOnChanges \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2023\/04\/1682857647_25_\u0628\u0627-\u0627\u0633\u062a\u0641\u0627\u062f\u0647-\u0627\u0632-viewContainerRef-\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a-\u0647\u0627\u06cc-\u067e\u0648\u06cc\u0627-\u0631\u0627-\u062f\u0631-Angular.png\" alt=\"\u0628\u0627 OnChanges\" loading=\"lazy\" width=\"731\" height=\"467\" title=\"\"><\/p>\n<p><code>changes['pokemon'].currentValue<\/code>  \u0648\u0631\u0648\u062f\u06cc \u062c\u062f\u06cc\u062f \u067e\u0648\u06a9\u0645\u0648\u0646 \u0627\u0633\u062a. <code>this.renderDynamicComponents(changes['pokemon'].currentValue)<\/code> Pokemon \u062c\u062f\u06cc\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u062e\u0635\u06cc\u0635 \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u062c\u062f\u06cc\u062f \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0622\u0646\u0647\u0627 \u062f\u0631 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u062e\u0632\u0646 \u0632\u06cc\u0631 Stackblitz \u0646\u062a\u0627\u06cc\u062c \u0646\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<p><iframe src=\"https:\/\/stackblitz.com\/edit\/angular-dstj5e?file=src\/pokemon\/pokemon-tab\/pokemon-tab.component.ts\" width=\"100%\" height=\"500\" scrolling=\"no\" frameborder=\"no\" allowfullscreen=\"\" allowtransparency=\"true\" loading=\"lazy\"><br \/>\n<\/iframe>\n<\/p>\n<p>\u0627\u06cc\u0646 \u067e\u0627\u06cc\u0627\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0627\u0633\u062a \u0648 \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645 \u0627\u0632 \u0645\u0637\u0627\u0644\u0628 \u062e\u0648\u0634\u062a\u0627\u0646 \u0628\u06cc\u0627\u06cc\u062f \u0648 \u0647\u0645\u0686\u0646\u0627\u0646 \u062a\u062c\u0631\u0628\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u0646 \u062f\u0631 Angular \u0648 \u0633\u0627\u06cc\u0631 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%86%D8%A7%D8%A8%D8%B9\"><\/span>\n<p>  \u0645\u0646\u0627\u0628\u0639:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0639\u0631\u0641\u06cc \u062f\u0631 \u0627\u0646\u06af\u0648\u0644\u0627\u0631\u060c ngComponentOutlet \u0631\u0627\u0647 \u0633\u0627\u062f\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u06a9\u0631\u062f\u0646 \u0627\u062c\u0632\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a. \u06af\u0632\u06cc\u0646\u0647 \u062f\u06cc\u06af\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0648\u0644\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f ViewContainerRef \u06a9\u0644\u0627\u0633 ViewContainerRef \u06a9\u0644\u0627\u0633 \u062f\u0627\u0631\u062f createComponent \u0631\u0648\u0634\u06cc \u06a9\u0647 \u062c\u0632\u0621 \u0631\u0627 \u0646\u0645\u0648\u0646\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0638\u0631\u0641 \u0642\u0631\u0627\u0631 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u06a9\u0646\u06cc\u06a9 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"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-20433","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/20433","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=20433"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/20433\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=20433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=20433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=20433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}