{"id":81463,"date":"2020-09-14T09:00:33","date_gmt":"2020-09-14T03:30:33","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=81463"},"modified":"2021-08-25T13:47:07","modified_gmt":"2021-08-25T08:17:07","slug":"angular-components","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angular-components\/","title":{"rendered":"Angular Components and Their Types"},"content":{"rendered":"<p>In Angular, components play a very important role. The whole structure of the application is built using different components. Components help in maintaining the modularity of the application as they are reusable. Components control the view, i.e. components are the classes that interact with the HTML file and ultimately resulting in controlling what is displayed in the browser. In this article, you will get to know about all the various components present in the angular application by default and how you can add or remove components.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82148\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg\" alt=\"Angular Components\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><\/p>\n<h3>Default Angular Components<\/h3>\n<ul>\n<li>\u00a7 app.component.css<\/li>\n<li>\u00a7 app.component.html<\/li>\n<li>\u00a7 app.component.spec.ts<\/li>\n<li>\u00a7 app.component.ts<\/li>\n<li>\u00a7 app.module.ts<\/li>\n<\/ul>\n<p>These are the component files that get created by default when you create an application in Angular. When you create an Angular Application using Node Package Manager(npm), an App.module.ts file is created in the Application which has \u201cimport libraries\u201d statements, and also, there are declarations where AppComponent is assigned.<\/p>\n<p><strong>For example:<\/strong><\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82149\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5.png\" alt=\"Angular Components Example\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/1-5-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<h4>Types of Components in Angular<\/h4>\n<p>Now, there are two types of component in Angular:<\/p>\n<ul>\n<li>Parent<\/li>\n<li>Child<\/li>\n<\/ul>\n<p>The <strong>Parent<\/strong> Component is the one that is predefined and imported when you create the App. The<strong> Child<\/strong> component, however, is the one that you can create according to your needs and demand.<\/p>\n<h3>Metadata of Angular Component<\/h3>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82150\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5.png\" alt=\"Metadata of ANgular Components\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/2-5-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>As you can see in the image, there are three configuration options in Component which are most useful:<\/p>\n<ul>\n<li><strong>Selector:<\/strong> This tells angular where to create and insert the instance of this component. It is a CSS selector. The selector inserts the instance in the HTML wherever it finds the tag of the component. In this case &lt;app-root&gt; &lt;\/app-root&gt;<\/li>\n<li><strong>templateURL:<\/strong> There are two ways to declare this.<br \/>\n&#8211; You can provide the module relative address of the components HTML template.<br \/>\n<strong>OR<\/strong><br \/>\n&#8211; You can also provide the HTML template directly inline. It can be provided as the value of the template property.<br \/>\nThis template is responsible for defining the view of the host of the component.<\/li>\n<li><strong>Providers:<\/strong> It contains an array of providers\u00ad1. They are all the services which a component needs. (** provider1 : It is an object that implements the interface of one of the providers. The object defines how you can obtain an injectable dependency with a DI token)<\/li>\n<li><strong>Template:<\/strong> A template is a combination of regular HTML and Angular. i.e. HTML and typescript. It contains both, the &lt;html&gt; tags and {angular} scripts.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82151\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5.png\" alt=\"\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/3-5-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>The angular Template Syntax augments the app logic which you have used in your HTML and also alters the data of DOM.<br \/>\nThe template uses the property of Data binding to link and connects your app to the DOM data. It uses pipes to decide the view of the data when it is being displayed. Also, the template uses directives to control what gets displayed using the app logic.<\/p>\n<p>You will learn about Data binding, Pipes and directives in upcoming articles.<\/p>\n<h3>How to Create an Angular Component<\/h3>\n<p>To create a new component, type the following command in the terminal:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">ng g component cmp-one<\/pre>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82152\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6.png\" alt=\"Components of Angular\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/4-6-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>After this command executes successfully, cmp-one folder creates and four files are present in it.<\/p>\n<ul>\n<li>cmp-one.component.css<\/li>\n<li>Cmp-one.component.html<\/li>\n<li>Cmp-one.component.specs.ts<\/li>\n<li>Cmp-one.component.ts<\/li>\n<\/ul>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82153\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1.png\" alt=\"\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/5-1-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>In the app.module.ts, the reference of the cmp-one adds automatically.<\/p>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82154\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1.png\" alt=\"\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/6-1-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>To see the component you just created using GUI, type ng serve in the terminal.<\/p>\n<p>A browser window will open. Now to actually see the changes here, navigate to your app.component.html file. Here, before the ending of &lt;\/div&gt; tag, add the reference of your component. The reference in my case is :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;app-cmp-one&gt;&lt;\/app-cmp-one&gt;\r\n<\/pre>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82155\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1.png\" alt=\"\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/7-1-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>Now, go to the new cmp-one folder created. Here, you will find the file cmp-one.component.html. In this file, write the content you want to display on your application. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;h1&gt;Hey!!. Our new Component Works \ud83d\udd25\u2714 &lt;\/h1&gt;<\/pre>\n<p><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-82156\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1.png\" alt=\"Create angular components\" width=\"1360\" height=\"768\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1.png 1360w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1-300x169.png 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1-1024x578.png 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1-150x85.png 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1-768x434.png 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/8-1-520x294.png 520w\" sizes=\"auto, (max-width: 1360px) 100vw, 1360px\" \/><\/a><\/p>\n<p>When you finish editing it, Save the file by pressing ctrl\/cmd + s. Now in the browser, navigate to the bottom of the page. Here, you can see that the content you wrote in the cmp-one.component.html is displayed.<\/p>\n<p>This is how you create a component in Angular.<\/p>\n<h2>Summary<\/h2>\n<p>Finally, we saw Components play a vital role in your Angular application. Components and modules work hand in hand to make your application work. There are parent and child components in angular, and both have their unique roles and properties. A template is a combination of both HTML and Agular\u2019s typescript. It plays a role in defining how the content you have provided in the application will look like. Creating a component in Angular is easy as it only requires a single command and the rest of the work Angular does itself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Angular, components play a very important role. The whole structure of the application is built using different components. Components help in maintaining the modularity of the application as they are reusable. Components control&#46;&#46;&#46;<\/p>\n","protected":false},"author":10,"featured_media":82148,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19424],"tags":[23120,23261,23260],"class_list":["post-81463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular-components","tag-create-angular-components","tag-types-of-angular-components"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular Components and Their Types - DataFlair<\/title>\n<meta name=\"description\" content=\"Components are the basic building block in an Angular application. Learn various components present in angular application &amp; how to add or remove components\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angular-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Components and Their Types - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Components are the basic building block in an Angular application. Learn various components present in angular application &amp; how to add or remove components\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angular-components\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-14T03:30:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-25T08:17:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular Components and Their Types - DataFlair","description":"Components are the basic building block in an Angular application. Learn various components present in angular application & how to add or remove components","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:\/\/data-flair.training\/blogs\/angular-components\/","og_locale":"en_US","og_type":"article","og_title":"Angular Components and Their Types - DataFlair","og_description":"Components are the basic building block in an Angular application. Learn various components present in angular application & how to add or remove components","og_url":"https:\/\/data-flair.training\/blogs\/angular-components\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-09-14T03:30:33+00:00","article_modified_time":"2021-08-25T08:17:07+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angular-components\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"Angular Components and Their Types","datePublished":"2020-09-14T03:30:33+00:00","dateModified":"2021-08-25T08:17:07+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angular-components\/"},"wordCount":777,"commentCount":1,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg","keywords":["angular components","Create angular components","types of angular components"],"articleSection":["Angular Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angular-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angular-components\/","url":"https:\/\/data-flair.training\/blogs\/angular-components\/","name":"Angular Components and Their Types - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg","datePublished":"2020-09-14T03:30:33+00:00","dateModified":"2021-08-25T08:17:07+00:00","description":"Components are the basic building block in an Angular application. Learn various components present in angular application & how to add or remove components","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angular-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/09\/Angular-Components.jpg","width":1200,"height":628,"caption":"Angular Components"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angular-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"Angular Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angular\/"},{"@type":"ListItem","position":3,"name":"Angular Components and Their Types"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/81463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=81463"}],"version-history":[{"count":3,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/81463\/revisions"}],"predecessor-version":[{"id":82157,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/81463\/revisions\/82157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/82148"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=81463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=81463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=81463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}