<div ng-app=”myApp”>Default Components<\/b><\/p>\n\n\n\n\n\u00a7 app.component.css<\/span><\/li>\n\n\n\n\u00a7 app.component.html<\/span><\/li>\n\n\n\n\u00a7 app.component.spec.ts<\/span><\/li>\n\n\n\n\u00a7 app.component.ts<\/span><\/li>\n\n\n\n\u00a7 app.module.ts<\/span><\/li>\n<\/ul>\n\n\n\nThese are the component files that get created by default when you create an application in Angular.<\/span><\/p>\n\n\n\n<\/span>Types of Components in Angular<\/span><\/h3>\n\n\n\nNow, there are two types of components in Angular:<\/span><\/p>\n\n\n\n\nParent<\/span><\/li>\n\n\n\nChild<\/span><\/li>\n<\/ol>\n\n\n\nThe Parent Component is the one that is predefined and imported when you create the App. However, the Child component is the one that you can design according to your needs and demand.<\/span><\/p>\n\n\n\n<\/span>Metadata of Angular Component<\/span><\/h3>\n\n\n\nThere is three-component configuration<\/span><\/p>\n\n\n\nimport<\/span> {Component} from <\/span>‘@angular\/core’<\/span>;<\/span>@Component<\/span>({<\/span> <\/span>Selector:<\/span> ‘app-root’<\/span>,<\/span> <\/span>templateUrl:<\/span> ‘.\/app.component.html’<\/span>,<\/span> <\/span>providers:<\/span> [<\/span>”<\/span>]<\/span>})<\/span>export <\/span>class<\/span> AppComponent<\/span> {<\/span> title=<\/span>‘ExternLabs’<\/span>;<\/span>}<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n\nSelector: 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 <\/span><app-root> <\/app-root><\/li>\n\n\n\ntemplate URL: There are two ways to declare this.<\/span>\u2013 You can provide the module relative address of the components HTML template.<\/span><\/li>\n\n\n\nProviders: It includes an array of providers\u00ad1. They provide everything that a component might require. (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)<\/span><\/li>\n\n\n\nTemplate: A template is a combination of regular HTML and Angular. i.e. HTML and typescript. It contains both, the <html> tags and {angular} scripts.<\/span><\/li>\n<\/ul>\n\n\n\nThe Angular Template Syntax augments the app logic which you have used in your HTML and also alters the data of DOM.<\/span><\/p>\n\n\n\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. <\/span><\/p>\n\n\n\nWe discussed Components play a requisite role in Angular applications. Components and modules work together to secure your application and development work. We can divide them into parent and child components; They both have their roles and characteristics. For example, a template is a combination of both HTML and Agular\u2019s typescript. It defines how the content you have developed will look like. Creating a component in Angular is effortless with a single command, and Angular itself will do all others.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"Components are one of the major components when it comes to Angular. Components help to build the structure for applications. Angular components can maintain the modularity of developments and keep them reusable. They control the view, and they have the responsibility and control over HTML files which makes it controller for displayed content in the…<\/p>\n","protected":false},"author":2,"featured_media":3783,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[42],"tags":[243,244,149],"class_list":["post-1064","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-angularjs-components","tag-angularjs-controller","tag-javascript-libraries"],"_links":{"self":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts\/1064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/comments?post=1064"}],"version-history":[{"count":0,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/posts\/1064\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/media\/3783"}],"wp:attachment":[{"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/media?parent=1064"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/categories?post=1064"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/externlabs.com\/blogs\/wp-json\/wp\/v2\/tags?post=1064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}