{"flag":true,"single":true,"pageTitle":"@ViewChild in Angular | get data, methods, elements from child components | Angular 15+","post":{"id":62,"user_id":"1","slug":"-viewchild-in-angular-data-binding-angular-15--t818","title":"@ViewChild in Angular | get data, methods, elements from child components | Angular 15+","body":"<p>In Angular, <strong>@ViewChild<\/strong> is a decorator that allows a <strong>component <\/strong>to access a <strong>child component or element<\/strong> in the template. It is used to obtain a reference to a child component, element or directive from a parent component.<\/p>\r\n<p>This can be useful when you want to perform some actions or get data from child components or elements without relying on event emitters or other mechanisms. Here's a step-by-step explanation of using @ViewChild:<\/p>\r\n<p>The <strong>@ViewChild<\/strong> decorator takes one or two arguments. The first argument is the selector of the child element, component, or directive that you want to access. The second argument is an options object that specifies whether to query for the first matching element or all matching elements.<\/p>\r\n<ul>\r\n<li>When <strong>used with a component or directive<\/strong>, @ViewChild returns an <strong>instance of the child component or directive<\/strong>.<\/li>\r\n<li>When&nbsp;<strong>used with a DOM<\/strong> element, @ViewChild returns an <strong>instance of the ElementRef <\/strong>class, which provides access to the underlying native DOM element.<\/li>\r\n<\/ul>\r\n<p>Here is an example of using @ViewChild to access a child component in Angular:<\/p>\r\n<p><strong>Step 1:<\/strong> <strong>Import ViewChild and ElementRef<\/strong><br>First, import the ViewChild decorator and ElementRef class (if you need to access a DOM element) in your parent component. Add the following lines at the top of your parent component's TypeScript file:<\/p>\r\n<pre class=\"language-markup\"><code>import { ViewChild, ElementRef } from '@angular\/core';<\/code><\/pre>\r\n<p><strong>Step 2: Add the ViewChild decorator in the parent component<\/strong><br>In the parent component, add the ViewChild decorator and specify the selector or the type of the child component, directive, or element you want to access. Then, create a property to hold the reference. For example:<\/p>\r\n<pre class=\"language-markup\"><code>\/\/ parent.component.ts\r\nimport { ViewChild } from '@angular\/core';\r\nimport { ChildComponent } from '.\/child.component';\r\n@Component({...})\r\nexport class ParentComponent {\r\n  @ViewChild(ChildComponent) childComponent: ChildComponent;\r\n}\r\n<\/code><\/pre>\r\n<p><strong>Step 3: Use the ViewChild reference<\/strong><br>Now you can use the ViewChild reference to access properties or methods in the child component. However, you should wait until the ngAfterViewInit lifecycle hook to access the ViewChild reference, as the child component may not be available before that.<\/p>\r\n<pre class=\"language-markup\"><code>import { Component, AfterViewInit, ViewChild } from '@angular\/core';\r\nimport { ChildComponent } from '.\/child.component';\r\n\r\n@Component({...})\r\nexport class ParentComponent implements AfterViewInit {\r\n  @ViewChild(ChildComponent) childComponent: ChildComponent;\r\n\r\n  ngAfterViewInit() {\r\n    \/\/ Now you can access the child component's properties and methods\r\n    console.log(this.childComponent);\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p><strong>Step 4: Access DOM elements with ElementRef of parent<\/strong><br>If you want to access a DOM element directly, use ElementRef. First, add a template reference variable in your parent component's template:<\/p>\r\n<pre class=\"language-markup\"><code>&lt;!-- parent.component.html --&gt;\r\n&lt;input #inputElement type=\"text\" \/&gt;<\/code><\/pre>\r\n<pre class=\"language-markup\"><code>\/\/ parent.component.ts\r\nimport { ViewChild, ElementRef } from '@angular\/core';\r\n\r\n@Component({...})\r\nexport class ParentComponent implements AfterViewInit {\r\n  @ViewChild('inputElement') inputElement: ElementRef;\r\n\r\n  ngAfterViewInit() {\r\n    \/\/ Access the native DOM element\r\n    console.log(this.inputElement.nativeElement);\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p>To access element of child component<\/p>\r\n<p>1.add element in child component<\/p>\r\n<pre class=\"language-markup\"><code>&lt;!-- child.component.html --&gt;\r\n&lt;div #childElement&gt;Hello from ChildComponent&lt;\/div&gt;<\/code><\/pre>\r\n<p>2.Expose the ElementRef in the child component<\/p>\r\n<pre class=\"language-markup\"><code>\/\/ child.component.ts\r\nimport { Component, ViewChild, ElementRef } from '@angular\/core';\r\n\r\n@Component({\r\n  \/\/\/\/\r\n})\r\nexport class ChildComponent {\r\n  @ViewChild('childElement') childElement: ElementRef;\r\n}\r\n<\/code><\/pre>\r\n<p>3.Use the ViewChild decorator in the parent component<\/p>\r\n<pre class=\"language-markup\"><code>import { Component, AfterViewInit, ViewChild } from '@angular\/core';\r\nimport { ChildComponent } from '.\/child.component';\r\n\r\n@Component({...})\r\nexport class ParentComponent implements AfterViewInit {\r\n  @ViewChild(ChildComponent) childComponent: ChildComponent;\r\n\r\n  ngAfterViewInit() {\r\n    \/\/ Access the child component's ElementRef\r\n    console.log(this.childComponent.childElement.nativeElement);\r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p>Here you can access child component elements<\/p>\r\n<p>&nbsp;<\/p>","category_id":"13","is_private":"0","created_at":"2023-03-28T00:25:39.000000Z","updated_at":"2023-03-31T05:36:56.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"In Angular, @ViewChild is a decorator that allows a component to access a child component or element in the template. It is used to obtain a - @ViewChild in Angular | get data, methods, elements from child components | Angular 15+ (Updated: March 31, 2023) - Read more about @ViewChild in Angular | get data, methods, elements from child components | Angular 15+ at my programming site [SITE]","categories":[]}