{"id":7037,"date":"2026-09-17T17:00:42","date_gmt":"2026-09-17T13:30:42","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=7037"},"modified":"2026-09-17T17:00:42","modified_gmt":"2026-09-17T13:30:42","slug":"viewchild-%d8%af%d8%b1-angular-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%d8%8c-directive%d9%87%d8%a7-%d9%88-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-dom","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/viewchild-%d8%af%d8%b1-angular-%da%a9%d8%a7%d9%85%d9%be%d9%88%d9%86%d9%86%d8%aa%d9%87%d8%a7%d8%8c-directive%d9%87%d8%a7-%d9%88-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-dom\/","title":{"rendered":"ViewChild \u062f\u0631 Angular: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u060c Directive\u0647\u0627 \u0648 \u0639\u0646\u0627\u0635\u0631 DOM"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u0645\u0642\u062f\u0645\u0647<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@ViewChild<\/code> \u06cc\u06a9 Decorator \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Angular \u0627\u0633\u062a \u06a9\u0647 Template \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 Query \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0627\u0632 Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u060c Instance Directive \u06cc\u0627 \u0639\u0646\u0635\u0631 \u0646\u06cc\u062a\u06cc\u0648 DOM \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. \u0628\u0647 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f\u060c \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 View \u062e\u0648\u062f\u0634 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f\u061b \u0628\u062f\u0648\u0646 \u0627\u062a\u06a9\u0627 \u0628\u0647 Query \u06a9\u0631\u062f\u0646 DOM \u062e\u0627\u0645 \u06cc\u0627 \u067e\u0627\u0633 \u062f\u0627\u062f\u0646 \u062f\u0633\u062a\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f \u0686\u0637\u0648\u0631 \u0628\u0627 <code>@ViewChild<\/code> \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u060c Directive \u0648 \u0639\u0646\u0635\u0631 DOM \u0627\u0632 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f. \u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647 static\u060c \u06af\u0632\u06cc\u0646\u0647 read\u060c <code>@ViewChildren<\/code> \u0628\u0627 QueryList \u0648 View Query\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal\u2014\u0645\u0639\u0631\u0641\u06cc\u200c\u0634\u062f\u0647 \u062f\u0631 Angular 17\u2014\u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>@ViewChild<\/code> \u0627\u0648\u0644\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u060c Directive \u06cc\u0627 \u0639\u0646\u0635\u0631 DOM \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0627\u0632 Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/li>\n\n\n\n<li>\u0646\u062a\u06cc\u062c\u0647 \u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u062f\u0631 <code>ngAfterViewInit<\/code> \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a. \u0627\u0632 <code>static: true<\/code> \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0647\u0631\u06af\u0632 \u062f\u0627\u062e\u0644 Directive \u0633\u0627\u062e\u062a\u0627\u0631\u06cc (Structural Directive) \u0646\u06cc\u0633\u062a\u0646\u062f \u0648 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u062f\u0631 <code>ngOnInit<\/code> \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u0646\u062f.<\/li>\n\n\n\n<li><code>@ViewChildren<\/code> \u06cc\u06a9 QueryList \u0627\u0632 \u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. \u062f\u0631 <code>QueryList.changes<\/code> \u0645\u0634\u062a\u0631\u06a9 \u0634\u0648\u06cc\u062f \u062a\u0627 \u0628\u0647 \u0627\u0641\u0632\u0648\u062f\u0646\u200c\u0647\u0627 \u0648 \u062d\u0630\u0641\u200c\u0647\u0627\u06cc \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f.<\/li>\n\n\n\n<li>\u06af\u0632\u06cc\u0646\u0647 read \u0646\u0648\u0639 \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u0631\u0627 Override \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u06cc\u06a9 ElementRef \u06cc\u0627 Instance Directive \u062e\u0627\u0635\u06cc \u0631\u0627 \u0627\u0632 \u0639\u0646\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u062f.<\/li>\n\n\n\n<li>viewChild() \u0648 viewChildren() \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal\u060c \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u062f\u0631\u0646\u0650 \u0645\u0639\u0631\u0641\u06cc\u200c\u0634\u062f\u0647 \u062f\u0631 Angular 17 \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0647\u062f\u0641 Angular 17 \u06cc\u0627 \u0628\u0639\u062f\u062a\u0631 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/li>\n\n\n\n<li>\u0627\u0632 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 DOM \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>ElementRef.nativeElement<\/code> \u0628\u067e\u0631\u0647\u06cc\u0632\u06cc\u062f\u061b \u0647\u0631 \u062c\u0627 Binding\u0647\u0627\u06cc Angular \u06cc\u0627 Renderer2 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0647\u0645\u0627\u0646 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u0646\u062f.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u067e\u06cc\u0634\u200c\u0646\u06cc\u0627\u0632\u0647\u0627<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0642\u0628\u0644 \u0627\u0632 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u0645\u062d\u06cc\u0637\u200c\u062a\u0627\u0646 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u062f\u0627\u0631\u062f:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js \u0646\u0633\u062e\u0647 18.x \u06cc\u0627 \u062c\u062f\u06cc\u062f\u062a\u0631 \u0648 npm \u0646\u0635\u0628\u200c\u0634\u062f\u0647<\/li>\n\n\n\n<li>Angular CLI \u0646\u0635\u0628\u200c\u0634\u062f\u0647 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0633\u0631\u0627\u0633\u0631\u06cc:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install -g @angular\/cli<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Angular \u0648 Decorator\u0647\u0627\u06cc TypeScript<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0628\u0627 @angular\/core \u0646\u0633\u062e\u0647 17 \u0648 @angular\/cli \u0646\u0633\u062e\u0647 17 \u0627\u0639\u062a\u0628\u0627\u0631\u0633\u0646\u062c\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">@ViewChild \u0686\u06cc\u0633\u062a \u0648 \u0686\u0631\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Angular \u062f\u0631 \u0628\u06cc\u0634\u062a\u0631 \u0645\u0648\u0627\u0631\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 Binding\u0647\u0627\u06cc <code>@Input<\/code> \u0648 <code>@Output<\/code> \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0631\u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f. \u0627\u0645\u0627 \u0628\u0631\u062e\u06cc \u0633\u0646\u0627\u0631\u06cc\u0648\u0647\u0627 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0622\u0646\u0646\u062f \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f\u06cc \u0645\u062a\u062f\u06cc \u0631\u0627 \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0635\u062f\u0627 \u0628\u0632\u0646\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc\u200c\u0627\u06cc \u0631\u0627 \u0627\u0632 Directive\u0627\u06cc \u06a9\u0647 \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 Template \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0647 \u0628\u062e\u0648\u0627\u0646\u062f \u06cc\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 Node \u0646\u06cc\u062a\u06cc\u0648 DOM \u0627\u0631\u062c\u0627\u0639 \u0628\u062f\u0647\u062f. <code>@ViewChild<\/code> \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u062f\u0648\u0646 <code>@ViewChild<\/code>\u060c \u0644\u0627\u0632\u0645 \u0628\u0648\u062f DOM \u0631\u0627 \u0628\u0627 <code>document.querySelector<\/code> \u062c\u0633\u062a\u062c\u0648 \u06a9\u0646\u06cc\u062f\u061b \u06a9\u0647 \u0627\u0632 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 Angular \u0639\u0628\u0648\u0631 \u06a9\u0631\u062f\u0647 \u0648 Server-Side Rendering \u0631\u0627 \u0645\u06cc\u200c\u0634\u06a9\u0646\u062f. <code>@ViewChild<\/code> \u0628\u0627 \u0686\u0631\u062e\u0647 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 View Angular \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0634\u062f\u0647 \u0648 \u0627\u0631\u062c\u0627\u0639 Type-\u0634\u062f\u0647\u200c\u0627\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f\u061b \u06a9\u0647 \u0627\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0646\u0627\u0627\u0645\u0646 DOM \u0627\u062c\u062a\u0646\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0633\u06cc\u0633\u062a\u0645 View Query \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Angular \u0686\u06af\u0648\u0646\u0647 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angular \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0631\u0627 \u062f\u0631 \u062f\u0648 \u0641\u0627\u0632 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u062f\u0631 \u0641\u0627\u0632 \u0627\u0648\u0644\u060c \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 Instantiate \u06a9\u0631\u062f\u0647 \u0648 <code>ngOnInit<\/code> \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0627\u0645\u0627 \u0639\u0646\u0627\u0635\u0631 \u0641\u0631\u0632\u0646\u062f\u0650 \u062a\u0639\u0631\u06cc\u0641\u200c\u0634\u062f\u0647 \u062f\u0631 Template \u0647\u0646\u0648\u0632 \u0633\u0627\u062e\u062a\u0647 \u0646\u0634\u062f\u0647\u200c\u0627\u0646\u062f. \u062f\u0631 \u0641\u0627\u0632 \u062f\u0648\u0645\u060c Angular View \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u06a9\u0631\u062f\u0647\u061b \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f\u060c Directive\u0647\u0627 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u0648 Node\u0647\u0627\u06cc DOM \u0631\u0627 \u062f\u0631\u062c \u0645\u06cc\u200c\u06a9\u0646\u062f. <code>ngAfterViewInit<\/code> \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u06cc\u0646 \u0641\u0627\u0632 \u062f\u0648\u0645 \u0634\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f\u061b \u06a9\u0647 \u062f\u0644\u06cc\u0644\u0634 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0646\u062a\u0627\u06cc\u062c <code>@ViewChild<\/code> \u0622\u0646\u062c\u0627\u2014and \u0646\u0647 \u062f\u0631 <code>ngOnInit<\/code>\u2014\u062f\u0631 \u062f\u0633\u062a\u0631\u0633\u200c\u0627\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0648\u0642\u062a\u06cc <code>static: false<\/code> (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636) \u0627\u0633\u062a\u060c Angular \u0642\u0628\u0644 \u0627\u0632 Resolve \u06a9\u0631\u062f\u0646 Query\u060c \u0645\u0646\u062a\u0638\u0631 \u0627\u06cc\u0646 \u0641\u0627\u0632 \u062f\u0648\u0645 \u0645\u06cc\u200c\u0645\u0627\u0646\u062f. \u0648\u0642\u062a\u06cc <code>static: true<\/code> \u0627\u0633\u062a\u060c Angular Query \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0627\u0648\u0644\u06cc\u0646 \u0627\u062c\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631\u2014\u06a9\u0647 \u0642\u0628\u0644 \u0627\u0632 <code>ngAfterViewInit<\/code> \u0627\u0645\u0627 \u0647\u0645\u0686\u0646\u0627\u0646 \u0628\u0639\u062f \u0627\u0632 \u06a9\u0627\u0645\u067e\u0627\u06cc\u0644 Template \u0627\u0633\u062a\u2014\u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0647\u0645\u06af\u0627\u0645 Resolve \u0645\u06cc\u200c\u06a9\u0646\u062f. \u06af\u0632\u06cc\u0646\u0647 static \u062f\u0631 \u0628\u062e\u0634 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u067e\u0627\u06cc\u06cc\u0646 \u0628\u0627 \u0645\u062b\u0627\u0644\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0646\u0645\u0648\u0646\u0647<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Angular<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u06cc\u06a9 Workspace \u062c\u062f\u06cc\u062f Angular \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng new viewchild-demo --no-standalone --routing=false --style=css<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Output\nCREATE viewchild-demo\/src\/app\/app.component.ts (219 bytes)\nCREATE viewchild-demo\/src\/app\/app.module.ts (314 bytes)\nCREATE viewchild-demo\/src\/app\/app.component.html (23115 bytes)\n...<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd viewchild-demo<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u200c\u0647\u0627<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u06a9\u0647 \u0645\u062b\u0627\u0644\u200c\u0647\u0627 Query\u200c\u0627\u0634 \u06a9\u0646\u0646\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng generate component pup --flat --skip-tests<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>Output\nCREATE src\/app\/pup.component.css (0 bytes)\nCREATE src\/app\/pup.component.html (19 bytes)\nCREATE src\/app\/pup.component.ts (188 bytes)\nUPDATE src\/app\/app.module.ts (467 bytes)<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ViewChild \u0628\u0627 Directive\u0647\u0627<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0648\u0642\u062a\u06cc Directive\u0627\u06cc \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 Template \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0647\u06cc\u0686 \u0627\u0631\u062c\u0627\u0639 \u0645\u0633\u062a\u0642\u06cc\u0645\u06cc \u0628\u0647 \u0622\u0646 Instance Directive \u0646\u062f\u0627\u0631\u062f. <code>@ViewChild<\/code> \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0627 \u0627\u062c\u0627\u0632\u0647 Query \u06a9\u0631\u062f\u0646 \u06a9\u0644\u0627\u0633 Directive \u0648 \u067e\u0633\u200c\u06af\u0631\u0641\u062a\u0646 \u0627\u0631\u062c\u0627\u0639 Type-\u0634\u062f\u0647 \u0628\u0647 Instance\u0650 \u0627\u0639\u0645\u0627\u0644\u200c\u0634\u062f\u0647 \u062f\u0631 View \u0641\u0639\u0644\u06cc \u062d\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 SharkDirective\u0627\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u06a9\u0647 \u0627\u062a\u0631\u06cc\u0628\u06cc\u0648\u062a appShark \u0631\u0627 \u0645\u06cc\u200c\u062e\u0648\u0627\u0646\u062f \u0648 \u06a9\u0644\u0645\u0647 \u00abShark\u00bb \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0645\u062a\u0646 \u0639\u0646\u0635\u0631 Host \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f. \u0633\u067e\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u0628\u0627 <code>@ViewChild<\/code> \u0648\u06cc\u0698\u06af\u06cc\u200c\u0627\u06cc \u0631\u0627 \u0627\u0632 \u0622\u0646 Instance Directive \u0645\u06cc\u200c\u062e\u0648\u0627\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 @angular\/cli \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a Directive \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng generate directive shark --skip-tests<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0641\u0627\u06cc\u0644 shark.directive.ts \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u0648 Directive \u0631\u0627 \u062f\u0631 app.module.ts \u062b\u0628\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.module.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { SharkDirective } from '.\/shark.directive';\n...\n@NgModule({\n  declarations: &#91;\n    AppComponent,\n    SharkDirective\n  ],\n  ...\n})<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633\u060c \u0627\u0632 ElementRef \u0648 Renderer2 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u0646\u0648\u06cc\u0633\u06cc \u0645\u062a\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc shark.directive.ts \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>shark.directive.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n  Directive,\n  ElementRef,\n  Renderer2\n} from '@angular\/core';\n\n@Directive(\n  { selector: '&#91;appShark]' }  \/\/ \u0628\u0627 \u0647\u0631 \u0639\u0646\u0635\u0631\u06cc \u0628\u0627 \u0627\u062a\u0631\u06cc\u0628\u06cc\u0648\u062a appShark \u062a\u0637\u0628\u06cc\u0642 \u0645\u06cc\u200c\u06cc\u0627\u0628\u062f\n)\nexport class SharkDirective {\n  creature = 'Dolphin';  \/\/ \u0645\u062a\u063a\u06cc\u0631 Instance \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 @ViewChild\n\n  constructor(elem: ElementRef, renderer: Renderer2) {\n    let shark = renderer.createText('Shark ');  \/\/ \u0633\u0627\u062e\u062a \u06cc\u06a9 text node\n    renderer.appendChild(elem.nativeElement, shark);  \/\/ \u0627\u0644\u0635\u0627\u0642 \u0628\u0647 \u0639\u0646\u0635\u0631 host\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0639\u062f\u060c \u0627\u062a\u0631\u06cc\u0628\u06cc\u0648\u062a appShark \u0631\u0627 \u0628\u0647 span\u06cc \u062d\u0627\u0648\u06cc \u0645\u062a\u0646 \u062f\u0631 Template \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc app.component.html \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span appShark&gt;Fin!&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0646\u06af\u0627\u0645 \u062f\u06cc\u062f\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u06a9\u0644\u0645\u0647 \u00abShark\u00bb \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u06cc \u0639\u0646\u0635\u0631 \u0631\u0646\u062f\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Output\nShark Fin!<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u062d\u0627\u0644\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 Instance \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 creature \u0627\u0632 SharkDirective \u0647\u0645 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0645\u062a\u063a\u06cc\u0631 Instance\u0650 extraCreature \u0631\u0627 \u0628\u0627 \u0645\u0642\u062f\u0627\u0631\u0634 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc app.component.ts \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n  Component,\n  ViewChild,\n  AfterViewInit\n} from '@angular\/core';\nimport { SharkDirective } from '.\/shark.directive';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css']\n})\nexport class AppComponent implements AfterViewInit {\n  extraCreature!: string;\n\n  @ViewChild(SharkDirective)\n  set appShark(directive: SharkDirective) {\n    \/\/ setter \u0648\u0642\u062a\u06cc Angular \u06a9\u0648\u0626\u0631\u06cc @ViewChild \u0631\u0627 resolve \u0645\u06cc\u200c\u06a9\u0646\u062f \u0634\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f\n    this.extraCreature = directive.creature;\n  };\n\n  ngAfterViewInit() {\n    \/\/ @ViewChild \u0627\u06cc\u0646\u062c\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0634\u062f\u0647 resolve \u0634\u062f\u0647 \u0627\u0633\u062a\n    console.log(this.extraCreature); \/\/ Dolphin\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u06a9\u062f \u0627\u0632 Setter \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u0645\u062a\u063a\u06cc\u0631 extraCreature \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f. \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 \u0645\u0646\u062a\u0638\u0631 Hook \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a AfterViewInit \u0645\u06cc\u200c\u0645\u0627\u0646\u062f\u061b \u0686\u0648\u0646 \u0627\u06cc\u0646 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f \u0648 Directive\u0647\u0627 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u0644\u06af\u0648\u06cc Setter \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647\u200c\u062c\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647\u061b \u0686\u0648\u0646 \u0647\u0631 \u0648\u0642\u062a Angular \u0646\u062a\u06cc\u062c\u0647 Query \u0631\u0627 \u062a\u062e\u0635\u06cc\u0635 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u0647\u0645\u06af\u0627\u0645 \u0634\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f\u2014including \u0627\u06af\u0631 Instance Directive \u062f\u0631 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0634\u0648\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0646\u06af\u0627\u0645 \u062f\u06cc\u062f\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0647\u0645\u0686\u0646\u0627\u0646 \u067e\u06cc\u0627\u0645 \u00abShark Fin!\u00bb \u0631\u0627 \u0645\u06cc\u200c\u0628\u06cc\u0646\u06cc\u062f. \u0627\u0645\u0627 \u062f\u0631 Console Log\u060c \u0627\u06cc\u0646 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Output\nDolphin<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ViewChild \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 DOM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc Query \u06a9\u0631\u062f\u0646 \u0639\u0646\u0635\u0631 \u0646\u06cc\u062a\u06cc\u0648 DOM \u0628\u0627 <code>@ViewChild<\/code>\u060c \u0628\u0627\u06cc\u062f \u0627\u0648\u0644 \u062f\u0631 Template \u0628\u0627 \u0645\u062a\u063a\u06cc\u0631 \u0627\u0631\u062c\u0627\u0639 Template\u2014\u0646\u0627\u0645 \u0645\u062d\u0644\u06cc\u200c\u0627\u06cc \u0628\u0627 \u067e\u06cc\u0634\u0648\u0646\u062f <code>#<\/code>\u2014\u0639\u0644\u0627\u0645\u062a\u0634 \u0628\u0632\u0646\u06cc\u062f. Angular \u0627\u0632 \u0622\u0646 \u0646\u0627\u0645 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 Selector \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0628\u062f\u0648\u0646 \u0622\u0646\u060c <code>@ViewChild<\/code> \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0639\u0646\u0635\u0631 \u0627\u0632 Template \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0634\u0648\u062f \u0646\u062f\u0627\u0631\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 <code>&lt;input&gt;<\/code>\u0627\u06cc \u0631\u0627 \u0628\u0627 <code>#someInput<\/code> \u0639\u0644\u0627\u0645\u062a \u0645\u06cc\u200c\u0632\u0646\u062f\u061b \u0633\u067e\u0633 \u0627\u0632 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f\u0634 \u0645\u06cc\u200c\u062e\u0648\u0627\u0646\u062f\u0634 \u062a\u0627 \u0645\u0642\u062f\u0627\u0631\u0634 \u0631\u0627 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input #someInput placeholder=\"Your favorite sea creature\"&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u062d\u0627\u0644\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 <code>&lt;input&gt;<\/code> \u0628\u0627 ViewChild \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0645\u0642\u062f\u0627\u0631\u0634 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc app.component.ts \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n  Component,\n  ViewChild,\n  AfterViewInit,\n  ElementRef\n} from '@angular\/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css']\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild('someInput') someInput!: ElementRef&lt;HTMLInputElement&gt;;\n\n\n  ngAfterViewInit() {\n    \/\/ nativeElement \u0639\u0646\u0635\u0631 HTMLInputElement \u0632\u06cc\u0631\u06cc\u0646 \u0631\u0627 \u0627\u0641\u0634\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f\n    this.someInput.nativeElement.value = 'Whale!';\n  }\n}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>\u0646\u06a9\u062a\u0647:<\/strong> \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 nativeElement \u0627\u0632 \u0645\u062f\u0644 \u0627\u0645\u0646\u06cc\u062a\u06cc Angular \u0639\u0628\u0648\u0631 \u06a9\u0631\u062f\u0647 \u0648 Server-Side Rendering \u0631\u0627 \u0645\u06cc\u200c\u0634\u06a9\u0646\u062f. \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u200c\u0647\u0627\u06cc DOM \u067e\u0631\u0648\u062f\u0627\u06a9\u0634\u0646\u060c Renderer2 \u0631\u0627 Inject \u0648 \u0627\u0632 \u0645\u062a\u062f\u0647\u0627\u06cc\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc Binding \u0648\u06cc\u0698\u06af\u06cc \u0633\u0627\u062f\u0647\u060c Binding\u0647\u0627\u06cc Template Angular \u0645\u0627\u0646\u0646\u062f <code>[value]<\/code> \u06cc\u0627 <code>[style]<\/code> \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\u0648\u0642\u062a\u06cc ngAfterViewInit \u0634\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u0642\u062f\u0627\u0631 <code>&lt;input&gt;<\/code> \u0631\u0648\u06cc \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Output\nWhale!<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 ViewChild \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0632\u0646\u062f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@ViewChild<\/code> \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u0627\u0631\u062c\u0627\u0639 Type-\u0634\u062f\u0647\u200c\u0627\u06cc \u0628\u0647 Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0645\u06cc\u200c\u062f\u0647\u062f. \u0627\u06cc\u0646 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0645\u062a\u062f\u0647\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc \u0631\u0627 \u0631\u0648\u06cc \u0641\u0631\u0632\u0646\u062f \u0635\u062f\u0627 \u0628\u0632\u0646\u06cc\u062f \u06cc\u0627 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627\u06cc \u0639\u0645\u0648\u0645\u06cc\u200c\u0627\u0634 \u0631\u0627 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0627\u0632 \u06a9\u0644\u0627\u0633 \u0648\u0627\u0644\u062f \u0628\u062e\u0648\u0627\u0646\u06cc\u062f\u061b \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 Event Emitter \u06cc\u0627 \u0633\u0631\u0648\u06cc\u0633 \u0645\u0634\u062a\u0631\u06a9. \u0627\u0632 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648 \u0648\u0642\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0645\u0644\u0627\u064b \u0648\u0627\u0644\u062f-\u0628\u0647-\u0641\u0631\u0632\u0646\u062f \u0648 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc Trigger \u0645\u06cc\u200c\u0634\u0648\u062f\u061b \u0646\u0647 \u062a\u0648\u0633\u0637 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0627\u0631\u0628\u0631.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0628\u062e\u0634 \u0627\u0632 PupComponent \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0628\u062e\u0634 \u00ab\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0646\u0645\u0648\u0646\u0647\u00bb \u0633\u0627\u062e\u062a\u0647 \u0634\u062f. \u0627\u06af\u0631 \u0622\u0646 \u0628\u062e\u0634 \u0631\u0627 \u0631\u062f \u06a9\u0631\u062f\u06cc\u062f\u060c \u0627\u0644\u0627\u0646 \u0628\u0633\u0627\u0632\u06cc\u062f\u0634:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ng generate component pup --flat --skip-tests<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0633\u062a\u0648\u0631 pup.component.ts\u060c pup.component.css \u0648 pup.component.html \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f \u0648 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u062f\u0631 app.module.ts \u062b\u0628\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.module.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { PupComponent } from '.\/pup.component';\n...\n@NgModule({\n  declarations: &#91;\n    AppComponent,\n    PupComponent\n  ],\n  ...\n})<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633\u060c \u0645\u062a\u062f whoAmI \u0631\u0627 \u0628\u0647 PupComponent \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u067e\u06cc\u0627\u0645\u06cc \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>pup.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'app-pup',\n  templateUrl: '.\/pup.component.html',\n  styleUrls: &#91;'.\/pup.component.css']\n})\nexport class PupComponent implements OnInit {\n\n  constructor() { }\n\n  whoAmI() {\n    return 'I am a pup component!';\n  }\n\n  ngOnInit(): void {\n  }\n\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0639\u062f\u060c \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u062f\u0631 Template \u0627\u067e \u0627\u0631\u062c\u0627\u0639 \u0628\u062f\u0647\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc app.component.html \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;app-pup&gt;pup works!&lt;\/app-pup&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u062d\u0627\u0644\u0627\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0645\u062a\u062f whoAmI \u0631\u0627 \u0627\u0632 \u062f\u0631\u0648\u0646 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u0628\u0627 ViewChild \u0635\u062f\u0627 \u0628\u0632\u0646\u06cc\u062f. \u0645\u062d\u062a\u0648\u0627\u06cc app.component.ts \u0631\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n  Component,\n  ViewChild,\n  AfterViewInit\n} from '@angular\/core';\nimport { PupComponent } from '.\/pup.component';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css'],\n})\nexport class AppComponent implements AfterViewInit {\n  \/\/ \u0627\u0631\u062c\u0627\u0639 type-\u0634\u062f\u0647 \u0628\u0647 Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\n  @ViewChild(PupComponent) pup!: PupComponent;\n\n  ngAfterViewInit() {\n    \/\/ \u0635\u062f\u0627 \u0632\u062f\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0645\u062a\u062f \u0631\u0648\u06cc Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\n    console.log(this.pup.whoAmI()); \/\/ I am a pup component!\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0647\u0646\u06af\u0627\u0645 \u062f\u06cc\u062f\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u060c Console Log \u0627\u06cc\u0646 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Output\nI am a pup component!<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u062f\u0631\u06a9 \u06af\u0632\u06cc\u0646\u0647 static<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">static: true \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 static: false<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u06af\u0632\u06cc\u0646\u0647 static \u06a9\u0646\u062a\u0631\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f Angular \u06a9\u0648\u0626\u0631\u06cc <code>@ViewChild<\/code> \u0631\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0650\u06cc Resolve \u06a9\u0646\u062f:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u06af\u0632\u06cc\u0646\u0647<\/th><th>Resolve \u0645\u06cc\u200c\u0634\u0648\u062f<\/th><th>\u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u062f\u0631<\/th><th>\u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/th><\/tr><\/thead><tbody><tr><td>static: false (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636)<\/td><td>\u0628\u0639\u062f \u0627\u0632 \u0627\u0648\u0644\u06cc\u0646 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631<\/td><td>ngAfterViewInit<\/td><td>\u0639\u0646\u0635\u0631 \u062f\u0627\u062e\u0644 *ngIf\u060c *ngFor \u06cc\u0627 \u0647\u0631 Directive \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0627\u0633\u062a<\/td><\/tr><tr><td>static: true<\/td><td>\u0642\u0628\u0644 \u0627\u0632 \u0627\u0648\u0644\u06cc\u0646 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631<\/td><td>ngOnInit<\/td><td>\u0639\u0646\u0635\u0631 \u0647\u0645\u06cc\u0634\u0647 \u0645\u0648\u062c\u0648\u062f \u0648 \u0647\u0631\u06af\u0632 \u062f\u0627\u062e\u0644 Directive \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0646\u06cc\u0633\u062a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u062b\u0627\u0644 \u0639\u0645\u0644\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062a\u0641\u0627\u0648\u062a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0627 <code>static: false<\/code> (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636)\u060c \u0628\u0647 \u0646\u062a\u06cc\u062c\u0647 Query \u062f\u0631 ngAfterViewInit \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n@ViewChild('myElement') myElement!: ElementRef;  \/\/ static: false \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0627\u0633\u062a\n\nngOnInit() {\n  console.log(this.myElement); \/\/ undefined: \u06a9\u0648\u0626\u0631\u06cc \u0647\u0646\u0648\u0632 resolve \u0646\u0634\u062f\u0647\n}\n\nngAfterViewInit() {\n  console.log(this.myElement); \/\/ ElementRef: \u0628\u0639\u062f \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 view resolve \u0634\u062f\u0647\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0627 <code>static: true<\/code>\u060c \u0646\u062a\u06cc\u062c\u0647 \u062f\u0631 ngOnInit \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0627\u0633\u062a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n@ViewChild('myElement', { static: true }) myElement!: ElementRef;\n\nngOnInit() {\n  console.log(this.myElement); \/\/ ElementRef: \u0642\u0628\u0644 \u0627\u0632 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 resolve \u0634\u062f\u0647\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 <code>static: true<\/code> \u0631\u0648\u06cc \u0639\u0646\u0635\u0631\u06cc \u062f\u0627\u062e\u0644 Directive \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u06a9\u0646\u06cc\u062f. Angular \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f Query \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 Resolve \u06a9\u0646\u062f \u0627\u06af\u0631 \u0639\u0646\u0635\u0631 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0647\u0646\u0648\u0632 \u062f\u0631 DOM \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06af\u0632\u06cc\u0646\u0647 read \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0646\u0648\u0639 \u0628\u0627\u0632\u06af\u0634\u062a\u06cc<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0646\u0648\u0639 \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u06a9\u0648\u0626\u0631\u06cc <code>@ViewChild<\/code> \u062a\u0648\u0633\u0637 \u0686\u06cc\u0632\u06cc \u06a9\u0647 Angular \u062f\u0631 \u0639\u0646\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u067e\u06cc\u062f\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0639\u06cc\u06cc\u0646 \u0645\u06cc\u200c\u0634\u0648\u062f: Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06af\u0631 Selector \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u062a\u0637\u0628\u06cc\u0642 \u06cc\u0627\u0628\u062f\u061b Instance Directive \u0627\u06af\u0631 \u0628\u0627 Directive\u0627\u06cc \u062a\u0637\u0628\u06cc\u0642 \u06cc\u0627\u0628\u062f. \u06af\u0632\u06cc\u0646\u0647 read \u0627\u06cc\u0646 \u0631\u0627 Override \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0645\u0648\u0627\u0631\u062f \u0631\u0627\u06cc\u062c\u06cc \u06a9\u0647 \u0644\u0627\u0632\u0645\u0634 \u062f\u0627\u0631\u06cc\u062f \u0627\u06cc\u0646\u200c\u0647\u0627\u0633\u062a: \u06af\u0631\u0641\u062a\u0646 ElementRef \u062e\u0627\u0645 \u0628\u0631\u0627\u06cc \u0639\u0646\u0635\u0631 Host \u062d\u062a\u06cc \u0648\u0642\u062a\u06cc \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u0631\u0648\u06cc\u0634 \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0647\u061b \u06cc\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 Directive \u062e\u0627\u0635\u06cc \u0627\u0632 \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u06cc\u06a9 Directive \u0631\u0648\u06cc\u0634 \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0647.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u062e\u0648\u0627\u0646\u062f\u0646 ElementRef \u0627\u0632 Selector \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 \u0627\u06cc\u0646 \u0648\u0642\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0639\u0646\u0635\u0631 DOM \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Host\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u06cc\u062f\u061b \u0646\u0647 \u062e\u0648\u062f Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627\u2014\u0645\u062b\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0627\u0646\u062f\u0627\u0632\u0647\u200c\u06af\u06cc\u0631\u06cc \u0627\u0628\u0639\u0627\u062f\u0634 \u06cc\u0627 \u067e\u0627\u0633 \u062f\u0627\u062f\u0646\u0634 \u0628\u0647 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0634\u062e\u0635 \u062b\u0627\u0644\u062b\u06cc \u06a9\u0647 Node \u062e\u0627\u0645 DOM \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0631\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n\/\/ \u0628\u062f\u0648\u0646 read\u060c \u0627\u06cc\u0646 \u06cc\u06a9 Instance \u0627\u0632 PupComponent \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.\n\/\/ \u0628\u0627 read: ElementRef\u060c \u0628\u0647\u200c\u062c\u0627\u06cc\u0634 \u0639\u0646\u0635\u0631 DOM \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 host \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.\n@ViewChild(PupComponent, { read: ElementRef }) pupElement!: ElementRef;\n\nngAfterViewInit() {\n  console.log(this.pupElement.nativeElement.tagName); \/\/ APP-PUP\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u062e\u0648\u0627\u0646\u062f\u0646 Directive \u0627\u0632 \u06cc\u06a9 \u0639\u0646\u0635\u0631<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06af\u0631 \u0686\u0646\u062f Directive \u0631\u0648\u06cc \u0647\u0645\u0627\u0646 \u0639\u0646\u0635\u0631 \u0627\u0639\u0645\u0627\u0644 \u0634\u062f\u0647\u200c\u0627\u0646\u062f\u060c \u0627\u0632 read \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0628\u0631\u06af\u0631\u062f\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>#myRef<\/code> \u0648 appShark \u0631\u0627 \u0628\u0647 \u0647\u0645\u0627\u0646 \u0639\u0646\u0635\u0631 \u062f\u0631 app.component.html \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span #myRef appShark&gt;Fin!&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u067e\u0633 Instance \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 SharkDirective \u0627\u0639\u0645\u0627\u0644\u200c\u0634\u062f\u0647 \u0631\u0648\u06cc \u0622\u0646 \u0639\u0646\u0635\u0631 \u0631\u0627 Query \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n@ViewChild('myRef', { read: SharkDirective }) sharkDir!: SharkDirective;\n\nngAfterViewInit() {\n  console.log(this.sharkDir.creature); \/\/ Dolphin\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0628\u0627 @ViewChildren \u0648 QueryList<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@ViewChild<\/code> \u0641\u0642\u0637 \u0627\u0648\u0644\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. \u0627\u0632 <code>@ViewChildren<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648\u0642\u062a\u06cc \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0647\u0645\u0627\u0646 Selector \u0631\u0627 \u0634\u0631\u06cc\u06a9\u200c\u0627\u0646\u062f \u0648 \u0628\u0647 \u0627\u0631\u062c\u0627\u0639 \u0647\u0645\u0647\u200c\u0634\u0627\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u062a\u0639\u0631\u06cc\u0641 \u06a9\u0648\u0626\u0631\u06cc @ViewChildren<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0648 Instance \u0627\u0632 <code>&lt;app-pup&gt;<\/code> \u0628\u0647 Template \u0627\u0636\u0627\u0641\u0647 \u0648 \u0622\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0647\u0645 Query \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.html<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;app-pup&gt;&lt;\/app-pup&gt;\n&lt;app-pup&gt;&lt;\/app-pup&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n  Component,\n  ViewChildren,\n  AfterViewInit,\n  QueryList\n} from '@angular\/core';\nimport { PupComponent } from '.\/pup.component';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: &#91;'.\/app.component.css']\n})\nexport class AppComponent implements AfterViewInit {\n  \/\/ \u0647\u0645\u0647 Instance\u0647\u0627\u06cc PupComponent \u062f\u0631 Template \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f\n  @ViewChildren(PupComponent) pups!: QueryList&lt;PupComponent&gt;;\n\n  ngAfterViewInit() {\n    console.log(this.pups.length); \/\/ 2\n  }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Iterate \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc QueryList<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 <code>.forEach()<\/code> \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0647\u0645\u06af\u0627\u0645 \u0628\u0647 \u0647\u0631 Instance \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u062f\u0631 \u0646\u0642\u0637\u0647 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061b \u0645\u062b\u0644\u0627\u064b \u0628\u0631\u0627\u06cc \u0635\u062f\u0627 \u0632\u062f\u0646 \u0645\u062a\u062f Setup \u06cc\u0627 \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0642\u062f\u0627\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0627\u0632 \u0647\u0631 \u0641\u0631\u0632\u0646\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ngAfterViewInit() {\n  this.pups.forEach((pup, index) =&gt; {\n    console.log(`Pup ${index}:`, pup.whoAmI());\n  });\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0634\u062a\u0631\u0627\u06a9 \u062f\u0631 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a QueryList<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">QueryList \u06cc\u06a9 Observable \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 changes \u0631\u0627 \u0627\u0641\u0634\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0647\u0631 \u0648\u0642\u062a \u0639\u0646\u0627\u0635\u0631\u06cc \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u0627\u0632 \u0622\u0646 \u062d\u0630\u0641 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\u2014\u0645\u062b\u0644\u0627\u064b \u0648\u0642\u062a\u06cc \u0634\u0631\u0637 *ngIf \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u06cc \u0631\u0627 \u0628\u0647 \u062f\u0627\u062e\u0644 \u06cc\u0627 \u062e\u0627\u0631\u062c View \u0645\u06cc\u200c\u0628\u0631\u062f\u2014QueryList \u062c\u062f\u06cc\u062f\u06cc \u0645\u0646\u062a\u0634\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0631\u0646\u062f\u0631 \u0627\u0648\u0644\u06cc\u0647 changes \u0631\u0627 Trigger \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0641\u0642\u0637 \u062f\u0631 \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0634\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ngAfterViewInit() {\n  \/\/ \u0647\u0631 \u0648\u0642\u062a PupComponent\u0627\u06cc \u0628\u0647 view \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u0627\u0632 \u0622\u0646 \u062d\u0630\u0641 \u0634\u0648\u062f \u0634\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u0634\u0648\u062f\n  this.pups.changes.subscribe((list: QueryList&lt;PupComponent&gt;) =&gt; {\n    console.log('Pup count:', list.length);\n  });\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06af\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062d\u06cc\u0646 \u0641\u0639\u0627\u0644 \u0628\u0648\u062f\u0646 \u0627\u0634\u062a\u0631\u0627\u06a9 Destroy \u0634\u0648\u062f\u060c \u0627\u0634\u062a\u0631\u0627\u06a9 \u0631\u0627 \u0630\u062e\u06cc\u0631\u0647 \u0648 \u062f\u0631 ngOnDestroy \u0627\u0632 \u0627\u0634\u062a\u0631\u0627\u06a9 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f \u062a\u0627 \u0627\u0632 \u0646\u0634\u062a \u062d\u0627\u0641\u0638\u0647 \u0627\u062c\u062a\u0646\u0627\u0628 \u0634\u0648\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Subscription } from 'rxjs';\n\nprivate pupSub!: Subscription;\n\nngAfterViewInit() {\n  this.pupSub = this.pups.changes.subscribe((list: QueryList&lt;PupComponent&gt;) =&gt; {\n    console.log('Pup count:', list.length);\n  });\n}\n\nngOnDestroy() {\n  this.pupSub.unsubscribe();\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">View Query\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u062f\u0631 Angular 17+<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angular 17 \u062a\u0648\u0627\u0628\u0639 viewChild() \u0648 viewChildren() \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u200c\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u0628\u0631\u0627\u06cc <code>@ViewChild<\/code> \u0648 <code>@ViewChildren<\/code> \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">viewChild() \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 @ViewChild<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0648\u06cc\u0698\u06af\u06cc<\/th><th>@ViewChild<\/th><th>viewChild()<\/th><\/tr><\/thead><tbody><tr><td>\u0646\u0648\u0639 \u0628\u0627\u0632\u06af\u0634\u062a\u06cc<\/td><td>\u0627\u0631\u062c\u0627\u0639 \u0645\u0633\u062a\u0642\u06cc\u0645<\/td><td>Signal&lt;T | undefined&gt;<\/td><\/tr><tr><td>ngAfterViewInit \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u062f<\/td><td>\u0628\u0644\u0647<\/td><td>\u062e\u06cc\u0631<\/td><\/tr><tr><td>\u0628\u0627 \u0627\u067e\u200c\u0647\u0627\u06cc Zoneless \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f<\/td><td>\u0645\u062d\u062f\u0648\u062f<\/td><td>\u0628\u0644\u0647<\/td><\/tr><tr><td>\u0645\u0648\u062c\u0648\u062f \u0627\u0632<\/td><td>Angular 2<\/td><td>Angular 17<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@ViewChild<\/code> \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u200c\u0647\u0627\u06cc Zoneless \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u0627\u0645\u0627 \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0627\u0639\u0644\u0627\u0646 \u062f\u0633\u062a\u06cc \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>ChangeDetectorRef.markForCheck()<\/code> \u0627\u0633\u062a \u0648\u0642\u062a\u06cc \u0627\u0631\u062c\u0627\u0639 Query-\u0634\u062f\u0647 \u0628\u0647\u200c\u0631\u0648\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f\u061b \u0686\u0648\u0646 Zone.js\u0627\u06cc \u0646\u06cc\u0633\u062a \u06a9\u0647 \u062a\u0634\u062e\u06cc\u0635 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0631\u0627 Trigger \u06a9\u0646\u062f. viewChild() \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0628\u0627 \u06af\u0631\u0627\u0641 Reactive Angular \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0634\u062f\u0647 \u0648 \u0628\u062f\u0648\u0646 \u0645\u062f\u0627\u062e\u0644\u0647 \u062f\u0633\u062a\u06cc \u0628\u0647\u200c\u0631\u0648\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u062b\u0627\u0644 \u06a9\u0648\u0626\u0631\u06cc Signal \u067e\u0627\u06cc\u0647<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u062b\u0627\u0644 \u0632\u06cc\u0631 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Standalone \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f. API \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u0628\u0631\u0627\u06cc \u0645\u062f\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Standalone \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0648 \u0646\u0628\u0627\u06cc\u062f \u062f\u0631 app.module.ts \u062a\u0639\u0631\u06cc\u0641 \u0634\u0648\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u062b\u0627\u0644 \u0627\u0632 afterNextRender \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u062a\u0627\u0628\u0639 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a\u06cc \u06a9\u0647 \u062f\u0631 Angular 17 \u0645\u0639\u0631\u0641\u06cc \u0634\u062f \u0648 Callback\u0627\u06cc \u0631\u0627 \u06cc\u06a9\u200c\u0628\u0627\u0631 \u0628\u0639\u062f \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0686\u0631\u062e\u0647 \u0631\u0646\u062f\u0631 DOM \u0628\u0639\u062f\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0686\u0631\u062e\u0647 \u062d\u06cc\u0627\u062a \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0644\u0627\u0633 \u0646\u06cc\u0633\u062a\u2014\u0645\u0627\u0646\u0646\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Standalone \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal\u2014\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 ngAfterViewInit \u0645\u06cc\u200c\u0634\u0648\u062f. \u0627\u0632 afterNextRender \u0648\u0642\u062a\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631 \u0627\u0648\u0644\u06cc\u0647 \u06cc\u06a9\u200c\u0628\u0627\u0631 \u0627\u0632 DOM \u0628\u062e\u0648\u0627\u0646\u06cc\u062f \u06cc\u0627 \u062f\u0631 \u0622\u0646 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f. \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u062d\u06cc\u0646 Server-Side Rendering \u0627\u062c\u0631\u0627 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, viewChild, ElementRef, afterNextRender } from '@angular\/core';\n\n@Component({\n  selector: 'app-root',\n  template: `&lt;input #nameInput placeholder=\"Enter name\"&gt;`,\n  standalone: true\n})\nexport class AppComponent {\n  \/\/ viewChild() \u0645\u0642\u062f\u0627\u0631 Signal&lt;ElementRef | undefined&gt; \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f\n  nameInput = viewChild&lt;ElementRef&gt;('nameInput');\n\n  constructor() {\n    afterNextRender(() =&gt; {\n      \/\/ \u0645\u0642\u062f\u0627\u0631 signal \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0631\u0646\u062f\u0631 view \u0628\u062e\u0648\u0627\u0646\n      console.log(this.nameInput()?.nativeElement.value);\n    });\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u0639\u0646\u0635\u0631\u06cc \u06a9\u0647 \u0647\u0645\u06cc\u0634\u0647 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a\u060c \u0627\u0632 <code>viewChild.required()<\/code> \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 Union \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 undefined \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Signal&lt;ElementRef&gt;: \u0627\u06af\u0631 \u06a9\u0648\u0626\u0631\u06cc \u0645\u0648\u0631\u062f\u06cc \u067e\u06cc\u062f\u0627 \u0646\u06a9\u0646\u062f \u067e\u0631\u062a\u0627\u0628 \u0645\u06cc\u200c\u06a9\u0646\u062f\nnameInput = viewChild.required&lt;ElementRef&gt;('nameInput');<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627\u06cc Signal \u0631\u0627 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u0645<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 viewChild() \u0648 viewChildren() \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0647\u062f\u0641 Angular 17 \u06cc\u0627 \u0628\u0639\u062f\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061b \u0628\u0647\u200c\u0648\u06cc\u0698\u0647 \u0647\u0646\u06af\u0627\u0645 \u067e\u0630\u06cc\u0631\u0634 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 Zoneless \u06cc\u0627 \u0645\u062f\u0644 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Standalone. \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0631\u0648\u06cc Angular 16 \u06cc\u0627 \u0642\u062f\u06cc\u0645\u06cc\u200c\u062a\u0631\u060c \u0627\u0632 <code>@ViewChild<\/code> \u0648 <code>@ViewChildren<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0628\u0648\u062f\u0646\u060c \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0628\u0627\u0632\u06af\u0631\u062f\u0627\u0646\u062f\u0646 viewChildren() \u0633\u06cc\u06af\u0646\u0627\u0644\u06cc \u0631\u0648\u06cc \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0622\u0645\u062f\u0647. \u0627\u06cc\u0646 \u062f\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 <code>@ViewChildren<\/code> \u0645\u06cc\u200c\u0634\u0648\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u06a9\u062f \u06cc\u06a9 ChildComponent \u0628\u0627 <code>ng generate component child --flat --skip-tests --standalone<\/code> \u0628\u0633\u0627\u0632\u06cc\u062f:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>app.component.ts<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, viewChildren, afterNextRender } from '@angular\/core';\nimport { ChildComponent } from '.\/child.component';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    &lt;app-child&gt;&lt;\/app-child&gt;\n    &lt;app-child&gt;&lt;\/app-child&gt;\n  `,\n  standalone: true,\n  imports: &#91;ChildComponent]\n})\nexport class AppComponent {\n  \/\/ viewChildren() \u0645\u0642\u062f\u0627\u0631 Signal&lt;ReadonlyArray&lt;ChildComponent&gt;&gt; \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f\n  children = viewChildren(ChildComponent);\n\n  constructor() {\n    afterNextRender(() =&gt; {\n      console.log(this.children().length); \/\/ 2\n    });\n  }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">@ViewChild \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 @ContentChild \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 @ViewChildren<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Decorator \/ \u062a\u0627\u0628\u0639<\/th><th>Query \u0645\u06cc\u200c\u06a9\u0646\u062f<\/th><th>\u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f<\/th><th>\u0686\u0646\u062f\u06af\u0627\u0646\u06af\u06cc<\/th><th>\u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u062f\u0631<\/th><\/tr><\/thead><tbody><tr><td>@ViewChild<\/td><td>Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/td><td>\u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f<\/td><td>\u0645\u0646\u0641\u0631\u062f<\/td><td>ngAfterViewInit (\u06cc\u0627 ngOnInit \u0628\u0627 static: true)<\/td><\/tr><tr><td>@ViewChildren<\/td><td>Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/td><td>QueryList<\/td><td>\u0686\u0646\u062f\u062a\u0627\u06cc\u06cc<\/td><td>ngAfterViewInit<\/td><\/tr><tr><td>@ContentChild<\/td><td>\u0645\u062d\u062a\u0648\u0627\u06cc Project-\u0634\u062f\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642<\/td><td>\u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f<\/td><td>\u0645\u0646\u0641\u0631\u062f<\/td><td>ngAfterContentInit<\/td><\/tr><tr><td>viewChild()<\/td><td>Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/td><td>Signal<\/td><td>\u0645\u0646\u0641\u0631\u062f<\/td><td>\u0647\u0646\u06af\u0627\u0645 \u062e\u0648\u0627\u0646\u062f\u0646 (Angular 17+)<\/td><\/tr><tr><td>viewChildren()<\/td><td>Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a<\/td><td>Signal&lt;ReadonlyArray&gt;<\/td><td>\u0686\u0646\u062f\u062a\u0627\u06cc\u06cc<\/td><td>\u0647\u0646\u06af\u0627\u0645 \u062e\u0648\u0627\u0646\u062f\u0646 (Angular 17+)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0632 <code>@ContentChild<\/code> \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Wrapper \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc Project-\u0634\u062f\u0647 \u0645\u06cc\u200c\u067e\u0630\u06cc\u0631\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0632 <code>@ViewChild<\/code> \u06cc\u0627 viewChild() \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u062f\u0631 Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0634\u062a\u0628\u0627\u0647\u0627\u062a \u0631\u0627\u06cc\u062c \u0648 \u0646\u062d\u0648\u0647 \u0627\u062c\u062a\u0646\u0627\u0628 \u0627\u0632 \u0622\u0646\u200c\u0647\u0627<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 @ViewChild \u0642\u0628\u0644 \u0627\u0632 ngAfterViewInit<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc <code>@ViewChild<\/code> \u062f\u0631 ngOnInit \u0645\u0642\u062f\u0627\u0631 undefined \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f\u061b \u0686\u0648\u0646 Angular \u0647\u0646\u0648\u0632 View \u0631\u0627 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0646\u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0646\u0627\u062f\u0631\u0633\u062a:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\nngOnInit() {\n  \/\/ TypeError: cannot read properties of undefined\n  console.log(this.someInput.nativeElement.value);\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631\u0633\u062a:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\nngAfterViewInit() {\n  console.log(this.someInput.nativeElement.value); \/\/ \u0637\u0628\u0642 \u0627\u0646\u062a\u0638\u0627\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u0646\u0637\u0642 \u062f\u0633\u062a\u0631\u0633\u06cc \u0631\u0627 \u0628\u0647 ngAfterViewInit \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f\u061b \u062c\u0627\u06cc\u06cc \u06a9\u0647 Angular \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f View \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0634\u062f\u0647 \u0648 Query Resolve \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Query \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u062f\u0627\u062e\u0644 *ngIf \u06cc\u0627 *ngFor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u062a\u0646\u0638\u06cc\u0645 <code>static: true<\/code> \u0631\u0648\u06cc \u06a9\u0648\u0626\u0631\u06cc\u0650 \u0647\u062f\u0641\u200c\u06af\u06cc\u0631\u0646\u062f\u0647 \u0639\u0646\u0635\u0631\u06cc \u062f\u0627\u062e\u0644 Directive \u0633\u0627\u062e\u062a\u0627\u0631\u06cc\u060c \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f Angular \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0639\u0646\u0635\u0631 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u062a\u0644\u0627\u0634 \u0628\u0647 Resolve \u06a9\u0646\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0646\u0627\u062f\u0631\u0633\u062a:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n@ViewChild('conditionalEl', { static: true }) el!: ElementRef;\n\/\/ static: true \u0646\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0639\u0646\u0635\u0631\u06cc \u0631\u0627 resolve \u06a9\u0646\u062f \u06a9\u0647 *ngIf \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0647\u0646\u0648\u0632 \u0631\u0646\u062f\u0631\u0634 \u0646\u06a9\u0631\u062f\u0647 \u0628\u0627\u0634\u062f<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631\u0633\u062a:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n@ViewChild('conditionalEl') el: ElementRef | undefined;\n\/\/ static: false (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636) \u0628\u0639\u062f \u0627\u0632 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 resolve \u0645\u06cc\u200c\u0634\u0648\u062f\n\nngAfterViewInit() {\n  if (this.el) {\n    this.el.nativeElement.focus();\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>static: false<\/code> \u0648 Guard \u06a9\u0631\u062f\u0646 \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 undefined \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0648\u0626\u0631\u06cc \u0641\u0642\u0637 \u0648\u0642\u062a\u06cc \u0627\u062c\u0631\u0627 \u0634\u0648\u062f \u06a9\u0647 \u0639\u0646\u0635\u0631 \u062f\u0631 DOM \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0632 ElementRef \u0628\u0631\u0627\u06cc \u0686\u06cc\u0632\u06cc \u06a9\u0647 @Input\/@Output \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u062f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0646\u0641\u0648\u0630 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>read: ElementRef<\/code> \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0638\u0627\u0647\u0631\u0634\u060c \u0648\u0642\u062a\u06cc Binding @Input \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0647\u0645\u0627\u0646 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u060c \u063a\u06cc\u0631\u0636\u0631\u0648\u0631\u06cc \u0627\u0633\u062a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0646\u0627\u062f\u0631\u0633\u062a:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ app.component.ts\n\/\/ \u0627\u0632 read: ElementRef \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0639\u0646\u0635\u0631 host \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n@ViewChild(PupComponent, { read: ElementRef }) pupEl!: ElementRef;\n\nngAfterViewInit() {\n  this.pupEl.nativeElement.style.color = 'red';\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062f\u0631\u0633\u062a:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ pup.component.ts\nimport { Input } from '@angular\/core';\n\nexport class PupComponent {\n\n  @Input() highlightColor: string = '';\n\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ pup.component.html\n\/\/ &lt;span &#91;style.color]=\"highlightColor\"&gt;{{ message }}&lt;\/span&gt;\n\n&lt;!-- app.component.html --&gt;\n&lt;app-pup &#91;highlightColor]=\"'red'\"&gt;&lt;\/app-pup&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u067e\u0627\u0633 \u062f\u0627\u062f\u0646 \u062f\u0627\u062f\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 @Input \u0648\u0627\u0644\u062f \u0648 \u0641\u0631\u0632\u0646\u062f \u0631\u0627 \u063a\u06cc\u0631\u0632\u0648\u062c\u200c\u0634\u062f\u0647 \u0646\u06af\u0647 \u0645\u06cc\u200c\u062f\u0627\u0631\u062f \u0648 \u0645\u062f\u0644 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 \u0648 \u0627\u0645\u0646\u06cc\u062a Angular \u0631\u0627 \u062d\u0641\u0638 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062a\u0641\u0627\u0648\u062a @ViewChild \u0648 @ContentChild \u062f\u0631 Angular \u0686\u06cc\u0633\u062a\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@ViewChild<\/code> \u0639\u0646\u0627\u0635\u0631 \u062a\u0639\u0631\u06cc\u0641\u200c\u0634\u062f\u0647 \u062f\u0631 Template \u062e\u0648\u062f\u0650 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 Query \u0645\u06cc\u200c\u06a9\u0646\u062f. <code>@ContentChild<\/code> \u0639\u0646\u0627\u0635\u0631 Project-\u0634\u062f\u0647 \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>&lt;ng-content&gt;<\/code> \u0631\u0627 Query \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u0632 <code>@ContentChild<\/code> \u0647\u0646\u06af\u0627\u0645 \u0633\u0627\u062e\u062a \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u200c\u0647\u0627\u06cc Wrapper \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc Project-\u0634\u062f\u0647 \u0627\u0632 \u0648\u0627\u0644\u062f\u06cc \u0645\u06cc\u200c\u067e\u0630\u06cc\u0631\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0631\u0627 \u0648\u06cc\u0698\u06af\u06cc @ViewChild \u0645\u0646 \u062f\u0631 ngOnInit \u0645\u0642\u062f\u0627\u0631 undefined \u062f\u0627\u0631\u062f\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0647\u200c\u0637\u0648\u0631 \u067e\u06cc\u0634\u200c\u0641\u0631\u0636\u060c <code>@ViewChild<\/code> \u0628\u0639\u062f \u0627\u0632 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 View\u2014which \u0628\u0639\u062f \u0627\u0632 ngOnInit \u0631\u062e \u0645\u06cc\u200c\u062f\u0647\u062f\u2014Resolve \u0645\u06cc\u200c\u0634\u0648\u062f. \u0645\u0646\u0637\u0642 \u062f\u0633\u062a\u0631\u0633\u06cc\u200c\u062a\u0627\u0646 \u0631\u0627 \u0628\u0647 ngAfterViewInit \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u062f. \u0627\u06af\u0631 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0631 ngOnInit \u0644\u0627\u0632\u0645 \u062f\u0627\u0631\u06cc\u062f\u060c <code>static: true<\/code> \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f\u061b \u0627\u0645\u0627 \u0641\u0642\u0637 \u0648\u0642\u062a\u06cc \u0639\u0646\u0635\u0631 Query-\u0634\u062f\u0647 \u062f\u0627\u062e\u0644 Directive \u0633\u0627\u062e\u062a\u0627\u0631\u06cc \u0646\u06cc\u0633\u062a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u06af\u0632\u06cc\u0646\u0647 static \u062f\u0631 @ViewChild \u0686\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>static: true<\/code> \u0628\u0647 Angular \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f Query \u0631\u0627 \u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 Resolve \u06a9\u0646\u062f\u061b \u06a9\u0647 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u062f\u0631 ngOnInit \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. <code>static: false<\/code> (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636) Query \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u062a\u0634\u062e\u06cc\u0635 \u062a\u063a\u06cc\u06cc\u0631 Resolve \u0645\u06cc\u200c\u06a9\u0646\u062f\u061b \u06a9\u0647 \u062f\u0631 ngAfterViewInit \u062f\u0631 \u062f\u0633\u062a\u0631\u0633\u0634 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f. \u0627\u0632 <code>static: false<\/code> \u0628\u0631\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 \u062f\u0627\u062e\u0644 *ngIf \u06cc\u0627 *ngFor \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0686\u0637\u0648\u0631 \u0628\u0647 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0641\u0631\u0632\u0646\u062f \u0628\u0627 \u0647\u0645\u0627\u0646 Selector \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0647\u200c\u062c\u0627\u06cc <code>@ViewChild<\/code> \u0627\u0632 <code>@ViewChildren<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. QueryList\u0627\u06cc \u062d\u0627\u0648\u06cc \u0647\u0645\u0647 \u0639\u0646\u0627\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. \u0628\u0627 <code>.forEach()<\/code> Iterate \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u062f\u0631 <code>.changes<\/code> \u0645\u0634\u062a\u0631\u06a9 \u0634\u0648\u06cc\u062f \u062a\u0627 \u0648\u0642\u062a\u06cc \u0641\u0647\u0631\u0633\u062a \u0628\u0647\u200c\u0631\u0648\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f \u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u0622\u06cc\u0627 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 DOM \u0628\u0627 ElementRef \u0627\u0632 @ViewChild \u0627\u0645\u0646 \u0627\u0633\u062a\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 DOM \u0627\u0632 \u0637\u0631\u06cc\u0642 <code>ElementRef.nativeElement<\/code> \u0627\u0632 \u0645\u062f\u0644 \u0627\u0645\u0646\u06cc\u062a\u06cc Angular \u0639\u0628\u0648\u0631 \u06a9\u0631\u062f\u0647 \u0648 Server-Side Rendering \u0631\u0627 \u0645\u06cc\u200c\u0634\u06a9\u0646\u062f. \u0627\u0632 \u0633\u0631\u0648\u06cc\u0633 Renderer2 Angular \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u200c\u0647\u0627\u06cc DOM \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u061b \u06cc\u0627 Binding\u0647\u0627\u06cc Angular \u0645\u0627\u0646\u0646\u062f [style]\u060c [class] \u06cc\u0627 @HostBinding \u0631\u0627 \u062a\u0627 \u062c\u0627\u06cc \u0645\u0645\u06a9\u0646 \u062a\u0631\u062c\u06cc\u062d \u062f\u0647\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u0628\u0631\u0627\u06cc @ViewChild \u062f\u0631 Angular 17+ \u0686\u06cc\u0633\u062a\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Angular 17 \u062a\u0627\u0628\u0639 viewChild() \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 Reactive \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f. \u0633\u06cc\u06af\u0646\u0627\u0644\u06cc \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0639\u0646\u0635\u0631 Query-\u0634\u062f\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647\u200c\u0631\u0648\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f\u061b \u0648 \u0628\u0627 \u0645\u062f\u0644 Reactivity \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal Angular \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0627\u0633\u062a. \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0628\u0627 \u0647\u062f\u0641 Angular 17 \u06cc\u0627 \u0628\u0639\u062f\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647\u200c\u0627\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">*<em>\u0622\u06cc\u0627 @ViewChild \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0639\u0646\u0635\u0631\u06cc \u062f\u0627\u062e\u0644 \u0628\u0644\u0627\u06a9 ngIf \u0631\u0627 Query \u06a9\u0646\u062f\u061f<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0644\u0647\u061b \u0627\u0645\u0627 \u0641\u0642\u0637 \u0628\u0627 <code>static: false<\/code> (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636). \u0648\u0642\u062a\u06cc \u0634\u0631\u0637 *ngIf \u0646\u0627\u062f\u0631\u0633\u062a \u0627\u0633\u062a \u0648 \u0639\u0646\u0635\u0631 \u0631\u0646\u062f\u0631 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc @ViewChild \u0645\u0642\u062f\u0627\u0631 undefined \u062f\u0627\u0631\u062f. \u0647\u0645\u06cc\u0634\u0647 \u0642\u0628\u0644 \u0627\u0632 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0627\u0631\u062c\u0627\u0639 Query-\u0634\u062f\u0647\u060c undefined \u0631\u0627 \u0686\u06a9 \u06a9\u0646\u06cc\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u06af\u0632\u06cc\u0646\u0647 read \u062f\u0631 @ViewChild \u0628\u0631\u0627\u06cc \u0686\u06cc\u0633\u062a\u061f<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u06af\u0632\u06cc\u0646\u0647 read \u0628\u0647 Angular \u0645\u06cc\u200c\u06af\u0648\u06cc\u062f \u0686\u0647 \u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0639\u0646\u0635\u0631 \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 Inject \u0634\u0648\u062f. \u0645\u062b\u0644\u0627\u064b <code>@ViewChild('myRef', { read: ElementRef })<\/code> \u062d\u062a\u06cc \u0627\u06af\u0631 Selector \u0628\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u06cc \u062a\u0637\u0628\u06cc\u0642 \u06cc\u0627\u0628\u062f\u060c ElementRef \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. <code>@ViewChild('myRef', { read: MyDirective })<\/code> Instance Directive\u0650 \u0627\u0639\u0645\u0627\u0644\u200c\u0634\u062f\u0647 \u0631\u0648\u06cc \u0622\u0646 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0646\u062a\u06cc\u062c\u0647\u200c\u06af\u06cc\u0631\u06cc<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f \u0686\u0637\u0648\u0631 \u0628\u0627 <code>@ViewChild<\/code> \u0628\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u060c Directive \u0648 \u0639\u0646\u0635\u0631 \u0646\u06cc\u062a\u06cc\u0648 DOM \u0627\u0632 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f. \u0647\u0645\u200c\u0686\u0646\u06cc\u0646 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc static \u0648 read\u060c Query \u06a9\u0631\u062f\u0646 \u0686\u0646\u062f \u0639\u0646\u0635\u0631 \u0628\u0627 <code>@ViewChildren<\/code> \u0648 QueryList \u0648 API \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u06cc\u0639\u0646\u06cc viewChild() \u0645\u0648\u062c\u0648\u062f \u062f\u0631 Angular 17 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u062d\u0627\u0644\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0631\u062c\u0627\u0639\u200c\u0647\u0627\u06cc Type-\u0634\u062f\u0647 \u0628\u0647 \u0647\u0631 \u0639\u0646\u0635\u0631\u06cc \u062f\u0631 Template \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 Query \u06a9\u0646\u06cc\u062f\u060c \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0648\u0626\u0631\u06cc\u200c\u0647\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u0686\u0631\u062e\u0647 \u0645\u0642\u062f\u0627\u0631\u062f\u0647\u06cc \u0627\u0648\u0644\u06cc\u0647 Angular \u06a9\u0650\u06cc Resolve \u0634\u0648\u0646\u062f\u061b \u0648 \u0628\u06cc\u0646 API\u0647\u0627\u06cc Query \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Decorator \u0648 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Signal \u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u0633\u062e\u0647 Angular \u067e\u0631\u0648\u0698\u0647\u200c\u062a\u0627\u0646 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 @ViewChild \u06cc\u06a9 Decorator \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 Angular \u0627\u0633\u062a \u06a9\u0647 Template \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0631\u0627 Query \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u0645\u0637\u0627\u0628\u0642\u062a\u200c\u06cc\u0627\u0641\u062a\u0647 \u0627\u0632 Instance \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0641\u0631\u0632\u0646\u062f\u060c Instance Directive \u06cc\u0627 \u0639\u0646\u0635\u0631 \u0646\u06cc\u062a\u06cc\u0648 DOM \u0631\u0627 \u0628\u0631\u0645\u06cc\u200c\u06af\u0631\u062f\u0627\u0646\u062f. \u0628\u0647 \u06a9\u0644\u0627\u0633 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0648\u0627\u0644\u062f\u060c \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0641\u0631\u0632\u0646\u062f\u0627\u0646 View \u062e\u0648\u062f\u0634 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f\u061b \u0628\u062f\u0648\u0646 \u0627\u062a\u06a9\u0627 \u0628\u0647 Query \u06a9\u0631\u062f\u0646 DOM \u062e\u0627\u0645 \u06cc\u0627 \u067e\u0627\u0633 \u062f\u0627\u062f\u0646 \u062f\u0633\u062a\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627. &hellip;<\/p>\n","protected":false},"author":9,"featured_media":7038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[190,2183],"tags":[],"class_list":["post-7037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming","category-2183"],"_links":{"self":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/7037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/comments?post=7037"}],"version-history":[{"count":1,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/7037\/revisions"}],"predecessor-version":[{"id":7039,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/posts\/7037\/revisions\/7039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media\/7038"}],"wp:attachment":[{"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/media?parent=7037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/categories?post=7037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/parmin.cloud\/blog\/wp-json\/wp\/v2\/tags?post=7037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}