{"id":67704,"date":"2024-06-28T23:10:38","date_gmt":"2024-06-28T19:40:38","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/"},"modified":"2024-06-28T23:10:38","modified_gmt":"2024-06-28T19:40:38","slug":"mastering-parent-child-communication-in-angular-invoking-child-methods-adj","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/","title":{"rendered":"\u062a\u0633\u0644\u0637 \u0628\u0631 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u0648\u0627\u0644\u062f-\u06a9\u0648\u062f\u06a9 \u062f\u0631 \u0627\u0646\u06af\u0648\u0644\u0627\u0631: \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0631\u0648\u0634 \u0647\u0627\u06cc \u06a9\u0648\u062f\u06a9"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u0628\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u062f\u0631 Angular \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0645\u062a\u062f\u0627\u0648\u0644 \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Angular \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062a\u0645\u06cc\u0632\u06cc \u0627\u0632 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u0628\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0642\u0648\u06cc \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<p>\u0645\u0639\u0631\u0641\u06cc<br \/>\n\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n\u062f\u0631\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<br \/>\n\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular<br \/>\n\u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f<br \/>\n\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0643\u0631\u062f\u0646 @ViewChild \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Child Component<br \/>\n\u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0632\u0621 \u06a9\u0648\u062f\u06a9<br \/>\n\u06a9\u062f \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0645\u0644<br \/>\n\u0646\u062a\u06cc\u062c\u0647<\/p>\n<p>  1. \u0645\u0639\u0631\u0641\u06cc<\/p>\n<p>Angular\u060c \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u067e\u0648\u06cc\u0627\u060c \u0631\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062a\u0639\u0627\u0645\u0644 \u0628\u06cc\u0646 \u0627\u062c\u0632\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0636\u0631\u0648\u0631\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u0648\u0627\u0644\u062f \u0622\u0646 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0634\u0631\u06cc\u062d \u0645\u0641\u0627\u0647\u06cc\u0645\u060c \u200b\u200b\u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0627\u062d\u0644 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0647\u062f\u0641 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>  2. \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<p>\u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 \u0627\u062c\u0632\u0627 \u0648 \u062e\u062f\u0645\u0627\u062a Angular<br \/>\nAngular CLI \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a<br \/>\n\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular \u062f\u0631 \u062d\u0627\u0644 \u06a9\u0627\u0631<\/p>\n<p>  3. \u062f\u0631\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/p>\n<p>\u062f\u0631 Angular\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0627\u063a\u0644\u0628 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u062f\u0627\u0631\u0646\u062f.  \u0631\u0627\u0628\u0637\u0647 \u0648\u0627\u0644\u062f-\u0641\u0631\u0632\u0646\u062f \u0631\u0627\u06cc\u062c \u0627\u0633\u062a\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u062f \u0648 \u0628\u0627\u0644\u0639\u06a9\u0633.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0631\u0648\u0634\u200c\u0647\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0646 \u0645\u0631\u0632 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0634\u0627\u0645\u0644 Angular \u0627\u0633\u062a @ViewChild \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631<\/p>\n<p>  4. \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular<\/p>\n<p>\u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0622\u0646 \u0631\u0627 \u0646\u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u062c\u062f\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>ng new parentChildInteraction<br \/>\ncd parentChildInteraction<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  5. \u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f<\/p>\n<p>\u0627\u062c\u0632\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Angular CLI \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<p>ng generate component parent<br \/>\nng generate component child<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  6. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @ViewChild \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Child Component<\/p>\n<p>\u0627\u06cc\u0646 @ViewChild \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0648 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0648\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.ts): \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f @ViewChild:<\/p>\n<p>   import { Component, ViewChild } from &#8216;@angular\/core&#8217;;<br \/>\n   import { ChildComponent } from &#8216;..\/child\/child.component&#8217;;<\/p>\n<p>   @Component({<br \/>\n     selector: &#8216;app-parent&#8217;,<br \/>\n     templateUrl: &#8216;.\/parent.component.html&#8217;,<br \/>\n     styleUrls: [&#8216;.\/parent.component.css&#8217;]\n   })<br \/>\n   export class ParentComponent {<br \/>\n     @ViewChild(ChildComponent) childComponent!: ChildComponent;<\/p>\n<p>     triggerChildFunction() {<br \/>\n       this.childComponent.childFunction();<br \/>\n     }<br \/>\n   }<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>Child Component (child.component.ts): \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u062c\u0632\u0621 \u0641\u0631\u0632\u0646\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:<\/p>\n<p>   import { Component } from &#8216;@angular\/core&#8217;;<\/p>\n<p>   @Component({<br \/>\n     selector: &#8216;app-child&#8217;,<br \/>\n     templateUrl: &#8216;.\/child.component.html&#8217;,<br \/>\n     styleUrls: [&#8216;.\/child.component.css&#8217;]\n   })<br \/>\n   export class ChildComponent {<br \/>\n     childFunction() {<br \/>\n       console.log(&#8216;Child function called!&#8217;);<br \/>\n     }<br \/>\n   }<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  7. \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0632\u0621 \u06a9\u0648\u062f\u06a9<\/p>\n<p>\u0627\u0644\u06af\u0648\u06cc \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u06a9\u0647 \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u062f \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<p>\u0627\u0644\u06af\u0648\u06cc \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.html):<\/p>\n<p>  Parent Component<br \/>\n   (click)=&#8221;triggerChildFunction()&#8221;&gt;Call Child Function<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  8. \u06a9\u062f \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0645\u0644<\/p>\n<p>\u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.ts):<\/p>\n<p>import { Component, ViewChild } from &#8216;@angular\/core&#8217;;<br \/>\nimport { ChildComponent } from &#8216;..\/child\/child.component&#8217;;<\/p>\n<p>@Component({<br \/>\n  selector: &#8216;app-parent&#8217;,<br \/>\n  templateUrl: &#8216;.\/parent.component.html&#8217;,<br \/>\n  styleUrls: [&#8216;.\/parent.component.css&#8217;]\n})<br \/>\nexport class ParentComponent {<br \/>\n  @ViewChild(ChildComponent) childComponent!: ChildComponent;<\/p>\n<p>  triggerChildFunction() {<br \/>\n    this.childComponent.childFunction();<br \/>\n  }<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0627\u0644\u06af\u0648\u06cc \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.html):<\/p>\n<p>  Parent Component<br \/>\n   (click)=&#8221;triggerChildFunction()&#8221;&gt;Call Child Function<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>Child Component (child.component.ts):<\/p>\n<p>import { Component } from &#8216;@angular\/core&#8217;;<\/p>\n<p>@Component({<br \/>\n  selector: &#8216;app-child&#8217;,<br \/>\n  templateUrl: &#8216;.\/child.component.html&#8217;,<br \/>\n  styleUrls: [&#8216;.\/child.component.css&#8217;]\n})<br \/>\nexport class ChildComponent {<br \/>\n  childFunction() {<br \/>\n    console.log(&#8216;Child function called!&#8217;);<br \/>\n  }<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>\u0642\u0627\u0644\u0628 Child Component (child.component.html):<\/p>\n<p>  Child Component<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  9. \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n<p>\u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u062f\u0631 Angular \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0645\u062f\u0648\u0644\u0627\u0631\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0628\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0648\u0627\u0636\u062d \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u0628\u06cc\u0646 \u0627\u062c\u0632\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. <\/p>\n<div data-article-id=\"1904716\" id=\"article-body\">\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u0628\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u062f\u0631 Angular \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0645\u062a\u062f\u0627\u0648\u0644 \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Angular \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062a\u0645\u06cc\u0632\u06cc \u0627\u0632 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u0645 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0627\u0631\u062a\u0628\u0627\u0637\u0627\u062a \u0628\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0642\u0648\u06cc \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \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 ' ><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\" >\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#1_%D9%85%D8%B9%D8%B1%D9%81%DB%8C\" >1. \u0645\u0639\u0631\u0641\u06cc<\/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\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#2_%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >2. \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/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\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#3_%D8%AF%D8%B1%DA%A9_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C\" >3. \u062f\u0631\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/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\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#4_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Angular\" >4. \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular<\/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\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#5_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%D8%A7%D9%84%D8%AF_%D9%88_%D9%81%D8%B1%D8%B2%D9%86%D8%AF\" >5. \u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\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\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#6_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_ViewChild_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_Child_Component\" >6. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 @ViewChild \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Child Component<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#7_%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%AC%D8%B2%D8%A1_%DA%A9%D9%88%D8%AF%DA%A9\" >7. \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0632\u0621 \u06a9\u0648\u062f\u06a9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#8_%DA%A9%D8%AF_%D9%86%D9%85%D9%88%D9%86%D9%87_%DA%A9%D8%A7%D9%85%D9%84\" >8. \u06a9\u062f \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0645\u0644<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/mastering-parent-child-communication-in-angular-invoking-child-methods-adj\/#Child_Component_%D9%88%D8%A7%D8%B1%D8%AF_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%D9%88%DB%8C%D8%AF_%D8%A7%D8%B2_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D9%88%DB%8C%D8%AF_9_%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >Child Component\n\n\n\n\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f\n    \n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\n  9. \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><\/li><\/ul><\/nav><\/div>\n<h4><span class=\"ez-toc-section\" id=\"%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%D9%85%D8%B7%D8%A7%D9%84%D8%A8\"><\/span>\n<p>  \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ol>\n<li>\u0645\u0639\u0631\u0641\u06cc<\/li>\n<li>\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/li>\n<li>\u062f\u0631\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/li>\n<li>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular<\/li>\n<li>\u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f<\/li>\n<li>\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0643\u0631\u062f\u0646 <code>@ViewChild<\/code> \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Child Component<\/li>\n<li>\u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0632\u0621 \u06a9\u0648\u062f\u06a9<\/li>\n<li>\u06a9\u062f \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0645\u0644<\/li>\n<li>\u0646\u062a\u06cc\u062c\u0647<\/li>\n<\/ol>\n<hr\/>\n<h3><span class=\"ez-toc-section\" id=\"1_%D9%85%D8%B9%D8%B1%D9%81%DB%8C\"><\/span>\n<p>  1. \u0645\u0639\u0631\u0641\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Angular\u060c \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u067e\u0648\u06cc\u0627\u060c \u0631\u0627\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 \u062a\u0639\u0627\u0645\u0644 \u0628\u06cc\u0646 \u0627\u062c\u0632\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0636\u0631\u0648\u0631\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u0648\u0627\u0644\u062f \u0622\u0646 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0627 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0639\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u062a\u0634\u0631\u06cc\u062d \u0645\u0641\u0627\u0647\u06cc\u0645\u060c \u200b\u200b\u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0645\u0631\u0627\u062d\u0644 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u0647\u062f\u0641 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  2. \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u0645\u062b\u0627\u0644 \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<ul>\n<li>\u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 \u0627\u062c\u0632\u0627 \u0648 \u062e\u062f\u0645\u0627\u062a Angular<\/li>\n<li>Angular CLI \u0631\u0648\u06cc \u062f\u0633\u062a\u06af\u0627\u0647 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a<\/li>\n<li>\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular \u062f\u0631 \u062d\u0627\u0644 \u06a9\u0627\u0631<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"3_%D8%AF%D8%B1%DA%A9_%D8%AA%D8%B9%D8%A7%D9%85%D9%84_%D8%A7%D8%AC%D8%B2%D8%A7%DB%8C_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C\"><\/span>\n<p>  3. \u062f\u0631\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0627\u062c\u0632\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 Angular\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0627\u063a\u0644\u0628 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u06cc\u06a9\u062f\u06cc\u06af\u0631 \u062f\u0627\u0631\u0646\u062f.  \u0631\u0627\u0628\u0637\u0647 \u0648\u0627\u0644\u062f-\u0641\u0631\u0632\u0646\u062f \u0631\u0627\u06cc\u062c \u0627\u0633\u062a\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u062f \u0648 \u0628\u0627\u0644\u0639\u06a9\u0633.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0631\u0648\u0634\u200c\u0647\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0646 \u0645\u0631\u0632 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0631\u0648\u06cc\u06a9\u0631\u062f \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0634\u0627\u0645\u0644 Angular \u0627\u0633\u062a <code>@ViewChild<\/code> \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_Angular\"><\/span>\n<p>  4. \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 Angular<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0622\u0646 \u0631\u0627 \u0646\u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Angular \u062c\u062f\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng new parentChildInteraction\n<span class=\"nb\">cd <\/span>parentChildInteraction\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=\"5_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%D8%A7%D9%84%D8%AF_%D9%88_%D9%81%D8%B1%D8%B2%D9%86%D8%AF\"><\/span>\n<p>  5. \u0627\u06cc\u062c\u0627\u062f \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u062c\u0632\u0627\u06cc \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Angular CLI \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>ng generate component parent\nng generate component child\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=\"6_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_ViewChild_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C_%D8%A8%D9%87_Child_Component\"><\/span>\n<p>  6. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>@ViewChild<\/code> \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 Child Component<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 <code>@ViewChild<\/code> \u062f\u06a9\u0648\u0631\u0627\u062a\u0648\u0631 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a.  \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0648 \u0631\u0648\u0634 \u0647\u0627\u06cc \u0645\u0648\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n<ol>\n<li>\n<strong>\u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.ts)<\/strong>: \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <code>@ViewChild<\/code>:\n<\/li>\n<\/ol>\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\">ViewChild<\/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\">ChildComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/child\/child.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/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-parent<\/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\">.\/parent.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\">.\/parent.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=\"nc\">ParentComponent<\/span> <span class=\"p\">{<\/span>\n     <span class=\"p\">@<\/span><span class=\"nd\">ViewChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">ChildComponent<\/span><span class=\"p\">)<\/span> <span class=\"nx\">childComponent<\/span><span class=\"o\">!<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ChildComponent<\/span><span class=\"p\">;<\/span>\n\n     <span class=\"nf\">triggerChildFunction<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n       <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">childComponent<\/span><span class=\"p\">.<\/span><span class=\"nf\">childFunction<\/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<ol>\n<li>\n<strong>Child Component (child.component.ts)<\/strong>: \u062a\u0627\u0628\u0639 \u0631\u0627 \u062f\u0631 \u062c\u0632\u0621 \u0641\u0631\u0632\u0646\u062f \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f:\n<\/li>\n<\/ol>\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=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/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-child<\/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\">.\/child.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\">.\/child.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=\"nc\">ChildComponent<\/span> <span class=\"p\">{<\/span>\n     <span class=\"nf\">childFunction<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n       <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Child function called!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n     <span class=\"p\">}<\/span>\n   <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"7_%D9%81%D8%B1%D8%A7%D8%AE%D9%88%D8%A7%D9%86%DB%8C_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF_%D8%AC%D8%B2%D8%A1_%DA%A9%D9%88%D8%AF%DA%A9\"><\/span>\n<p>  7. \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u062c\u0632\u0621 \u06a9\u0648\u062f\u06a9<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u0644\u06af\u0648\u06cc \u0645\u0624\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u0631\u0627 \u0637\u0648\u0631\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f \u06a9\u0647 \u062f\u06a9\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u062f \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0641\u0631\u0632\u0646\u062f \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n<p><strong>\u0627\u0644\u06af\u0648\u06cc \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.html)<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div>\n  <span class=\"nt\"><h2\/><\/span>Parent Component<span class=\"nt\"\/>\n  <span class=\"nt\"><button> <span class=\"na\">(click)=<\/span><span class=\"s\">\"triggerChildFunction()\"<\/span><span class=\"nt\">&gt;<\/span>Call Child Function<span class=\"nt\"\/><\/button><\/span>\n  <span class=\"nt\"><app-child\/><\/span>\n<span class=\"nt\"\/><\/div><\/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=\"8_%DA%A9%D8%AF_%D9%86%D9%85%D9%88%D9%86%D9%87_%DA%A9%D8%A7%D9%85%D9%84\"><\/span>\n<p>  8. \u06a9\u062f \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0645\u0644<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>\u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.ts)<\/strong>:<\/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\">ViewChild<\/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\">ChildComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/child\/child.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/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-parent<\/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\">.\/parent.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\">.\/parent.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=\"nc\">ParentComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"p\">@<\/span><span class=\"nd\">ViewChild<\/span><span class=\"p\">(<\/span><span class=\"nx\">ChildComponent<\/span><span class=\"p\">)<\/span> <span class=\"nx\">childComponent<\/span><span class=\"o\">!<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ChildComponent<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nf\">triggerChildFunction<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">childComponent<\/span><span class=\"p\">.<\/span><span class=\"nf\">childFunction<\/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><strong>\u0627\u0644\u06af\u0648\u06cc \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f (parent.component.html)<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><div>\n  <span class=\"nt\"><h2\/><\/span>Parent Component<span class=\"nt\"\/>\n  <span class=\"nt\"><button> <span class=\"na\">(click)=<\/span><span class=\"s\">\"triggerChildFunction()\"<\/span><span class=\"nt\">&gt;<\/span>Call Child Function<span class=\"nt\"\/><\/button><\/span>\n  <span class=\"nt\"><app-child\/><\/span>\n<span class=\"nt\"\/><\/div><\/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><strong>Child Component (child.component.ts)<\/strong>:<\/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=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/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-child<\/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\">.\/child.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\">.\/child.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=\"nc\">ChildComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">childFunction<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">Child function called!<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0642\u0627\u0644\u0628 Child Component (child.component.html)<\/strong>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"><p>\n  <span class=\"nt\"><h3\/><span class=\"ez-toc-section\" id=\"Child_Component_%D9%88%D8%A7%D8%B1%D8%AF_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%B4%D9%88%DB%8C%D8%AF_%D8%A7%D8%B2_%D8%AD%D8%A7%D9%84%D8%AA_%D8%AA%D9%85%D8%A7%D9%85_%D8%B5%D9%81%D8%AD%D9%87_%D8%AE%D8%A7%D8%B1%D8%AC_%D8%B4%D9%88%DB%8C%D8%AF_9_%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span><\/span>Child Component<span class=\"nt\"\/>\n<span class=\"nt\"\/><\/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>\n<p>  9. \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0627\u0628\u0639\u06cc \u0631\u0627 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u062f\u0631 Angular \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u0645\u062f\u0648\u0644\u0627\u0631\u062a\u0631 \u0648 \u0642\u0627\u0628\u0644 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0628\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0648\u0627\u0636\u062d \u062a\u0639\u0627\u0645\u0644\u0627\u062a \u0628\u06cc\u0646 \u0627\u062c\u0632\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. <\/p>\n<hr\/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647\u060c \u0645\u0627 \u0628\u0647 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0647\u0627\u06cc \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u0645\u0648\u0644\u0641\u0647 \u0648\u0627\u0644\u062f \u062f\u0631 Angular \u062e\u0648\u0627\u0647\u06cc\u0645 \u067e\u0631\u062f\u0627\u062e\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0645\u062a\u062f\u0627\u0648\u0644 \u062f\u0631 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Angular \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u062a\u0645\u06cc\u0632\u06cc \u0627\u0632 \u0646\u06af\u0631\u0627\u0646\u06cc \u0647\u0627 \u062f\u0627\u0634\u062a\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":67705,"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-67704","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\/67704","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=67704"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/67704\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/67705"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=67704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=67704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=67704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}