{"id":261,"date":"2017-06-28T11:33:00","date_gmt":"2017-06-28T09:33:00","guid":{"rendered":"https:\/\/celilsemi.erkiner.com\/blog\/?p=261"},"modified":"2020-05-28T11:42:18","modified_gmt":"2020-05-28T09:42:18","slug":"component-directives-in-angular","status":"publish","type":"post","link":"https:\/\/celilsemi.erkiner.com\/blog\/component-directives-in-angular\/","title":{"rendered":"Component Directives in Angular"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A component must belong to an NgModule in order for it to be available to another component or application. To make it a member of an NgModule, list it in the declarations field of the @NgModule metadata.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Components can have child-parent relations with other components. An angular app should be visualized as a tree of components that are composed to make the whole large application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each component of ours typically will have these three files \u2014<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>*.component.ts\u200a\u2014\u200acomponent class file<\/li><li>*.component.html\u200a\u2014\u200acomponent template file<\/li><li>*.component.(s)css\u200a\u2014\u200acomponent styles file<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These files are connected by the @Component decorator in *.component.ts file. @Component decorator gets a configuration object as an argument.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Component Decorator?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.<\/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;javascript&quot;,&quot;mime&quot;:&quot;application\/typescript&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;TypeScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;typescript&quot;}\">@Component({\n  selector: 'my-component',\n  templateUrl: '.\/my.component.html',\n  styleUrls: ['.\/my.component.scss']\n})<\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In addition to these options for configuring a directive, you can control a component&#8217;s runtime behaviour by implementing life-cycle hooks.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are Life-Cycle Hooks?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur. Developers can take advantage of key moments in the life cycle by implementing one or more life cycle connection interfaces in the angular core library.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There are 8 different hooks available in angular;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>ngOnChanges(): Called whenever an input value changes<\/li><li>ngOnInit(): Called once after input values are set when a component is initialized.<\/li><li>ngDoCheck(): Called during all change detection runs<\/li><li>ngAfterContentInit(): Called only once after first ngDoCheck()<\/li><li>ngAfterContentChecked(): Called after every ngDoCheck()<\/li><li>ngAfterViewInit(): Called only once after the view is initialized<\/li><li>ngAfterViewChecked(): Called after all the content is initialized and checked.<\/li><li>ngOnDestroy(): Called only once just before the component is removed from the DOM.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is ViewEncapsulation?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">ViewEncapsulation decides whether the styles defined in a component can affect the entire application or not. There are three ways to do this in Angular:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Emulated: styles from other HTML spread to the component.<\/li><li>Native: styles from other HTML do not spread to the component.<\/li><li>None: styles defined in a component are visible to all components.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Directive vs Component?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Directive&nbsp;is a piece of code that can be&nbsp;attached to another directive.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Component&nbsp;is a piece of&nbsp;view with code&nbsp;attached to it. It\u2019s a&nbsp;special type of directive.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A [&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-261","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=\"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A\" \/>\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\/component-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=\"Component Directives in Angular\" \/>\n\t\t<meta property=\"og:description\" content=\"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/celilsemi.erkiner.com\/blog\/component-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-06-28T09:33:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-05-28T09:42:18+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Component Directives in Angular\" \/>\n\t\t<meta name=\"twitter:description\" content=\"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A\" \/>\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\\\/component-directives-in-angular\\\/#blogposting\",\"name\":\"Component Directives in Angular\",\"headline\":\"Component 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-06-28T11:33:00+02:00\",\"dateModified\":\"2020-05-28T11:42:18+02:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/component-directives-in-angular\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/component-directives-in-angular\\\/#webpage\"},\"articleSection\":\"Front End Engineering, angular, javascript, spa, typescript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/component-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\\\/component-directives-in-angular\\\/#listItem\",\"name\":\"Component 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\\\/component-directives-in-angular\\\/#listItem\",\"position\":5,\"name\":\"Component 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\\\/component-directives-in-angular\\\/#organizationLogo\",\"width\":1024,\"height\":1024,\"caption\":\"Icon of Celilsemi Sam Erkiner\"},\"image\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/component-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\\\/component-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\\\/component-directives-in-angular\\\/#webpage\",\"url\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/component-directives-in-angular\\\/\",\"name\":\"Component Directives in Angular\",\"description\":\"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/celilsemi.erkiner.com\\\/blog\\\/component-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-06-28T11:33:00+02:00\",\"dateModified\":\"2020-05-28T11:42:18+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":"Component Directives in Angular","description":"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A","canonical_url":"https:\/\/celilsemi.erkiner.com\/blog\/component-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\/component-directives-in-angular\/#blogposting","name":"Component Directives in Angular","headline":"Component 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-06-28T11:33:00+02:00","dateModified":"2020-05-28T11:42:18+02:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/component-directives-in-angular\/#webpage"},"isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/component-directives-in-angular\/#webpage"},"articleSection":"Front End Engineering, angular, javascript, spa, typescript"},{"@type":"BreadcrumbList","@id":"https:\/\/celilsemi.erkiner.com\/blog\/component-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\/component-directives-in-angular\/#listItem","name":"Component 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\/component-directives-in-angular\/#listItem","position":5,"name":"Component 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\/component-directives-in-angular\/#organizationLogo","width":1024,"height":1024,"caption":"Icon of Celilsemi Sam Erkiner"},"image":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/component-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\/component-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\/component-directives-in-angular\/#webpage","url":"https:\/\/celilsemi.erkiner.com\/blog\/component-directives-in-angular\/","name":"Component Directives in Angular","description":"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/celilsemi.erkiner.com\/blog\/component-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-06-28T11:33:00+02:00","dateModified":"2020-05-28T11:42:18+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":"Component Directives in Angular","og:description":"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A","og:url":"https:\/\/celilsemi.erkiner.com\/blog\/component-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-06-28T09:33:00+00:00","article:modified_time":"2020-05-28T09:42:18+00:00","twitter:card":"summary_large_image","twitter:title":"Component Directives in Angular","twitter:description":"A Directive modifies the DOM to change appearance, behaviour or layout of DOM elements. Directives are one of the core building blocks Angular uses to build applications. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template. A","twitter:image":"https:\/\/celilsemi.erkiner.com\/blog\/wp-content\/uploads\/2020\/05\/appicon.png"},"aioseo_meta_data":{"post_id":"261","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:46:18","updated":"2025-07-29 06:39:16","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\tComponent 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":"Component Directives in Angular","link":"https:\/\/celilsemi.erkiner.com\/blog\/component-directives-in-angular\/"}],"_links":{"self":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/261","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=261"}],"version-history":[{"count":2,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/posts\/261\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/celilsemi.erkiner.com\/blog\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}