{"id":17578,"date":"2024-03-15T15:16:42","date_gmt":"2024-03-15T15:16:42","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/"},"modified":"2024-03-21T11:14:29","modified_gmt":"2024-03-21T11:14:29","slug":"how-to-access-dom-elements-in-angular","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/","title":{"rendered":"How to access DOM elements in Angular?"},"content":{"rendered":"<p>In Angular, you can use the ViewChild decorator to access DOM elements.<\/p>\n<p>Firstly, import ViewChild and ElementRef in the class of the component.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> { <span class=\"hljs-title class_\">ViewChild<\/span>, <span class=\"hljs-title class_\">ElementRef<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@angular\/core'<\/span>;\r\n<\/code><\/pre>\n<p>Next, declare a ViewChild property in the component class and annotate it with the ElementRef type.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-meta\">@ViewChild<\/span>(<span class=\"hljs-string\">'myElement'<\/span>, {<span class=\"hljs-attr\">static<\/span>: <span class=\"hljs-literal\">false<\/span>}) <span class=\"hljs-attr\">myElement<\/span>: <span class=\"hljs-title class_\">ElementRef<\/span>;\r\n<\/code><\/pre>\n<p>In the template, define a reference variable using the # symbol and pass it to the ViewChild property.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> #<span class=\"hljs-attr\">myElement<\/span>&gt;<\/span>\u8fd9\u662f\u4e00\u4e2a DOM \u5143\u7d20<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>Next, in the component class, the myElement property can be used to access the DOM element. The actual object of the DOM element can be obtained through the nativeElement property.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-title function_\">ngAfterViewInit<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-property\">myElement<\/span>.<span class=\"hljs-property\">nativeElement<\/span>);\r\n}\r\n<\/code><\/pre>\n<p>Note: ViewChild retrieves a reference to a DOM element, so it is important to ensure that the DOM element has been rendered before accessing it. The ngAfterViewInit lifecycle hook can be used to guarantee that the DOM element has been rendered.<\/p>\n<p>In addition, you can also access DOM elements using directives, such as @ViewChild(MyDirective), where MyDirective is a custom directive.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Angular, you can use the ViewChild decorator to access DOM elements. Firstly, import ViewChild and ElementRef in the class of the component. import { ViewChild, ElementRef } from &#8216;@angular\/core&#8217;; Next, declare a ViewChild property in the component class and annotate it with the ElementRef type. @ViewChild(&#8216;myElement&#8217;, {static: false}) myElement: ElementRef; In the template, define [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17578","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to access DOM elements in Angular? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to access DOM elements in Angular?\" \/>\n<meta property=\"og:description\" content=\"In Angular, you can use the ViewChild decorator to access DOM elements. Firstly, import ViewChild and ElementRef in the class of the component. import { ViewChild, ElementRef } from &#039;@angular\/core&#039;; Next, declare a ViewChild property in the component class and annotate it with the ElementRef type. @ViewChild(&#039;myElement&#039;, {static: false}) myElement: ElementRef; In the template, define [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:16:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:14:29+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"How to access DOM elements in Angular?\",\"datePublished\":\"2024-03-15T15:16:42+00:00\",\"dateModified\":\"2024-03-21T11:14:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\"},\"wordCount\":154,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\",\"name\":\"How to access DOM elements in Angular? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:16:42+00:00\",\"dateModified\":\"2024-03-21T11:14:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to access DOM elements in Angular?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to access DOM elements in Angular? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/","og_locale":"en_US","og_type":"article","og_title":"How to access DOM elements in Angular?","og_description":"In Angular, you can use the ViewChild decorator to access DOM elements. Firstly, import ViewChild and ElementRef in the class of the component. import { ViewChild, ElementRef } from '@angular\/core'; Next, declare a ViewChild property in the component class and annotate it with the ElementRef type. @ViewChild('myElement', {static: false}) myElement: ElementRef; In the template, define [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:16:42+00:00","article_modified_time":"2024-03-21T11:14:29+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"How to access DOM elements in Angular?","datePublished":"2024-03-15T15:16:42+00:00","dateModified":"2024-03-21T11:14:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/"},"wordCount":154,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/","name":"How to access DOM elements in Angular? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:16:42+00:00","dateModified":"2024-03-21T11:14:29+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-access-dom-elements-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to access DOM elements in Angular?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17578"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17578\/revisions"}],"predecessor-version":[{"id":51199,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17578\/revisions\/51199"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}