{"id":267,"date":"2017-07-30T11:46:00","date_gmt":"2017-07-30T09:46:00","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=267"},"modified":"2020-05-28T12:22:17","modified_gmt":"2020-05-28T10:22:17","slug":"structural-directives-in-angular","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/","title":{"rendered":"Structural Directives in Angular"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">What are structural directives?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Structural directives are responsible for HTML layout. They shape or reshape the DOM&#8217;s structure, typically by adding, removing, or manipulating elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 descendants.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Three of the common, built-in structural directives;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>NgIf<\/li><li>NgFor<\/li><li>NgSwitch<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">What is ngIf directive?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">This directive takes a Boolean expression and makes an entire chunk of the DOM appear or disappear.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;p *ngIf=&quot;true&quot;&gt;\n  Expression is true and ngIf is true. This paragraph is in the DOM.\n&lt;\/p&gt;\n&lt;p *ngIf=&quot;false&quot;&gt;\n  Expression is false and ngIf is false. This paragraph is not in the DOM.\n&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<h1 class=\"wp-block-heading\">What is ngFor directive?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">The NgFor directive is a way of repeating a template by using each item of an iterable as that template&#8217;s context.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:false,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;div *ngFor=&quot;let number of [10,20,30]; let i=index;&quot;&gt;\n  index: {{i}}, value: {{number}}\n&lt;\/div&gt;\n&lt;!-- outputs\n&lt;div&gt;index: 0, value: 10&lt;\/div&gt;\n&lt;div&gt;index: 1, value: 20&lt;\/div&gt;\n&lt;div&gt;index: 2, value: 30&lt;\/div&gt;\n--&gt;<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">NgFor also provides other values that can be aliased to local variables:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>index &#8211; position of the current item in the iterable starting at 0<\/li><li>first &#8211; true if the current item is the first item in the iterable<\/li><li>last &#8211; true if the current item is the last item in the iterable<\/li><li>even &#8211; true if the current index is an even number<\/li><li>odd &#8211; true if the current index is an odd number<\/li><\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">What is ngSwitch directive?<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">The Angular NgSwitch is actually a set of cooperating directives: NgSwitch, NgSwitchCase, and NgSwitchDefault.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">NgSwitch itself is not a structural directive. It&#8217;s an attribute directive that controls the behaviour of the other two switch directives. NgSwitchCase and NgSwitchDefault are structural directives. An NgSwitchCase displays its host element when its value matches the switch value. The NgSwitchDefault displays its host element when no sibling NgSwitchCase matches the switch value.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM&#8217;s structure, typically by adding, removing, or manipulating elements. 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 descendants. Structural [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[7],"tags":[22,4,48,46],"class_list":["post-267","post","type-post","status-publish","format-standard","hentry","category-front-end","tag-angular","tag-javascript","tag-spa","tag-typescript"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM&#039;s structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it&#039;s supposed to do with that host element and its descendants. Structural\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Celilsemi Sam Erkiner\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Celilsemi Sam Erkiner - Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Structural Directives in Angular\" \/>\n\t\t<meta property=\"og:description\" content=\"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM&#039;s structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it&#039;s supposed to do with that host element and its descendants. Structural\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2017-07-30T09:46:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-05-28T10:22:17+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Structural Directives in Angular\" \/>\n\t\t<meta name=\"twitter:description\" content=\"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM&#039;s structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it&#039;s supposed to do with that host element and its descendants. Structural\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#blogposting\",\"name\":\"Structural Directives in Angular\",\"headline\":\"Structural Directives in Angular\",\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#articleImage\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"datePublished\":\"2017-07-30T11:46:00+02:00\",\"dateModified\":\"2020-05-28T12:22:17+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#webpage\"},\"articleSection\":\"Front End Engineering, angular, javascript, spa, typescript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"position\":2,\"name\":\"Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"position\":3,\"name\":\"Software Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/#listItem\",\"name\":\"Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"position\":4,\"name\":\"Front End Engineering\",\"item\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#listItem\",\"name\":\"Structural Directives in Angular\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/#listItem\",\"name\":\"Software Engineering\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#listItem\",\"position\":5,\"name\":\"Structural Directives in Angular\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/category\\\/engineering\\\/software\\\/front-end\\\/#listItem\",\"name\":\"Front End Engineering\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/05\\\/appicon.png\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#organizationLogo\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"image\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#organizationLogo\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#authorImage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866\",\"width\":96,\"height\":96,\"caption\":\"Celilsemi Sam Erkiner\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#webpage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/\",\"name\":\"Structural Directives in Angular\",\"description\":\"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants. Structural\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/structural-directives-in-angular\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/author\\\/cerkiner\\\/#author\"},\"datePublished\":\"2017-07-30T11:46:00+02:00\",\"dateModified\":\"2020-05-28T12:22:17+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/\",\"name\":\"Celilsemi Sam Erkiner\",\"description\":\"Blog\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Structural Directives in Angular","description":"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants. Structural","canonical_url":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#blogposting","name":"Structural Directives in Angular","headline":"Structural Directives in Angular","author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#articleImage","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"datePublished":"2017-07-30T11:46:00+02:00","dateModified":"2020-05-28T12:22:17+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#webpage"},"isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#webpage"},"articleSection":"Front End Engineering, angular, javascript, spa, typescript"},{"@type":"BreadcrumbList","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","position":1,"name":"Home","item":"https:\/\/celilsemi.erkiner.com\/blog\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","position":2,"name":"Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","position":3,"name":"Software Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/#listItem","name":"Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","position":4,"name":"Front End Engineering","item":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/","nextItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#listItem","name":"Structural Directives in Angular"},"previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/#listItem","name":"Software Engineering"}},{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#listItem","position":5,"name":"Structural Directives in Angular","previousItem":{"@type":"ListItem","@id":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/#listItem","name":"Front End Engineering"}}]},{"@type":"Organization","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization","name":"Celilsemi Sam Erkiner","description":"Blog","url":"https:\/\/celilsemi.erkiner.com\/blog\/","logo":{"@type":"ImageObject","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#organizationLogo","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"image":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#organizationLogo"}},{"@type":"Person","@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author","url":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/","name":"Celilsemi Sam Erkiner","image":{"@type":"ImageObject","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#authorImage","url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/litespeed\/avatar\/0c0a56fe50d80138ca959da76bd58688.jpg?ver=1793310866","width":96,"height":96,"caption":"Celilsemi Sam Erkiner"}},{"@type":"WebPage","@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#webpage","url":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/","name":"Structural Directives in Angular","description":"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants. Structural","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/#breadcrumblist"},"author":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"creator":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/author\/cerkiner\/#author"},"datePublished":"2017-07-30T11:46:00+02:00","dateModified":"2020-05-28T12:22:17+02:00"},{"@type":"WebSite","@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website","url":"https:\/\/celilsemi.erkiner.com\/blog\/","name":"Celilsemi Sam Erkiner","description":"Blog","inLanguage":"en-US","publisher":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Celilsemi Sam Erkiner - Blog","og:type":"article","og:title":"Structural Directives in Angular","og:description":"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants. Structural","og:url":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/","og:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","og:image:secure_url":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png","article:published_time":"2017-07-30T09:46:00+00:00","article:modified_time":"2020-05-28T10:22:17+00:00","twitter:card":"summary_large_image","twitter:title":"Structural Directives in Angular","twitter:description":"What are structural directives? Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements. As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants. Structural","twitter:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png"},"aioseo_meta_data":{"post_id":"267","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2023-11-14 19:47:18","updated":"2025-07-29 06:55:30","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/\" title=\"Engineering\">Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/\" title=\"Software Engineering\">Software Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/\" title=\"Front End Engineering\">Front End Engineering<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tStructural Directives in Angular\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/celilsemi.erkiner.com\/blog\/"},{"label":"Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/"},{"label":"Software Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/"},{"label":"Front End Engineering","link":"https:\/\/celilsemi.erkiner.com\/blog\/category\/engineering\/software\/front-end\/"},{"label":"Structural Directives in Angular","link":"https:\/\/celilsemi.erkiner.com\/blog\/structural-directives-in-angular\/"}],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/comments?post=267"}],"version-history":[{"count":1,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/267\/revisions\/268"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}