{"id":59809,"date":"2018-05-03T11:21:06","date_gmt":"2018-05-03T05:51:06","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59809"},"modified":"2024-04-12T14:20:47","modified_gmt":"2024-04-12T08:50:47","slug":"angular-structural-directives","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/","title":{"rendered":"Angular Structural Directives"},"content":{"rendered":"<h1>Angular Structural Directives<\/h1>\n<p>There are three kinds of directives in Angular:<\/p>\n<p>Components\u2014directives with a template.<br \/>\nStructural directives\u2014change the DOM layout by adding and removing DOM elements.<br \/>\nAttribute directives\u2014change the appearance or behavior of an element, component, or another directive.<\/p>\n<p>Components are the most common of the three directives. You saw a component for the first time in the QuickStart guide.<\/p>\n<p>Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.<\/p>\n<p>Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.<\/p>\n<p><strong>structural directives<\/strong><br \/>\nStructural directives are responsible for HTML layout. They shape or reshape the DOM&#8217;s structure, typically by adding, removing, or manipulating elements.<\/p>\n<p>As with other directives, you apply a structural directive to a host element. The directive then does whatever it&#8217;s supposed to do with that host element and its descendents.<\/p>\n<p>Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.<br \/>\nsrc\/app\/app.component.html (ngif)<\/p>\n<p>&lt;div *ngIf=&#8221;hero&#8221; &gt;{{hero.name}}&lt;\/div&gt;<\/p>\n<p>No brackets. No parentheses. Just *ngIf set to a string.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"VSKILLbodytext\"><strong>IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.<\/strong><\/p>\n<p><a href=\"https:\/\/www.vskills.in\/certification\/web-development\/angular-4-certification\" rel=\"attachment wp-att-61497\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-61497\" src=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\" sizes=\"auto, (max-width: 1050px) 100vw, 1050px\" srcset=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png 1050w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-300x48.png 300w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-768x124.png 768w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-1024x165.png 1024w, https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4-712x115.png 712w\" alt=\"\" width=\"1050\" height=\"169\" \/><\/a><\/p>\n<ul>\n<li class=\"VSKILLbodytext\"><a href=\"https:\/\/www.vskills.in\/practice\/skills\/Web-Development\/Angular-4\" target=\"_blank\" rel=\"noopener\">Practice Test for Angular4 <\/a><\/li>\n<li class=\"VSKILLbodytext\"><a href=\"https:\/\/www.vskills.in\/certification\/web-development\/angular-4-certification\" target=\"_blank\" rel=\"noopener\">Govt Certification in Angular 4<\/a><\/li>\n<li><a href=\"https:\/\/www.vskills.in\/certification\/blog\/\">Blog posts on Angular 4 and Web Development<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.vskills.in\/certification\/tutorial\/web-development\/angular-4\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-55483 size-full\" src=\"http:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/05\/Back-Arrow.jpg\" alt=\"Angular 4 Tutorial Index\" width=\"47\" height=\"52\" \/>Back to Angular 4 Tutorial Main Page <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular Structural Directives There are three kinds of directives in Angular: Components\u2014directives with a template. Structural directives\u2014change the DOM layout by adding and removing DOM elements. Attribute directives\u2014change the appearance or behavior of an element, component, or another directive. Components are the most common of the three directives. You saw a component for the first&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[7230,7231,5743],"tags":[7221,7227,7235,7236,7226,7234,7351,7350,7232,7223,7233],"class_list":["post-59809","page","type-page","status-publish","hentry","category-angular-2","category-angular-4","category-web-development","tag-angular","tag-angular-4","tag-angular-4-tutorial","tag-angular-cli","tag-angular-js","tag-angular-js-tutorial","tag-angular-structural-directive","tag-angular-structural-directives","tag-angular-tutorial","tag-angularjs","tag-angularjs-tutorial"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Angular Structural Directives - Tutorial<\/title>\n<meta name=\"description\" content=\"Learn and know There are three kinds of directives in Angular-Components, Structural directives and Attribute directives. Click here.\" \/>\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.vskills.in\/certification\/tutorial\/angular-structural-directives\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Structural Directives - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn and know There are three kinds of directives in Angular-Components, Structural directives and Attribute directives. Click here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:50:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/\",\"name\":\"Angular Structural Directives - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"datePublished\":\"2018-05-03T05:51:06+00:00\",\"dateModified\":\"2024-04-12T08:50:47+00:00\",\"description\":\"Learn and know There are three kinds of directives in Angular-Components, Structural directives and Attribute directives. Click here.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#primaryimage\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\",\"width\":1050,\"height\":169},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Structural Directives\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Structural Directives - Tutorial","description":"Learn and know There are three kinds of directives in Angular-Components, Structural directives and Attribute directives. Click here.","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.vskills.in\/certification\/tutorial\/angular-structural-directives\/","og_locale":"en_US","og_type":"article","og_title":"Angular Structural Directives - Tutorial","og_description":"Learn and know There are three kinds of directives in Angular-Components, Structural directives and Attribute directives. Click here.","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:50:47+00:00","og_image":[{"url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","type":"","width":"","height":""}],"twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/","name":"Angular Structural Directives - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#primaryimage"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","datePublished":"2018-05-03T05:51:06+00:00","dateModified":"2024-04-12T08:50:47+00:00","description":"Learn and know There are three kinds of directives in Angular-Components, Structural directives and Attribute directives. Click here.","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#primaryimage","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png","width":1050,"height":169},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-structural-directives\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Angular Structural Directives"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=59809"}],"version-history":[{"count":5,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59809\/revisions"}],"predecessor-version":[{"id":64237,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/59809\/revisions\/64237"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=59809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=59809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=59809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}