Components in angular are similar to pages in a website. Components are a key feature in angular. They are well optimized as compared to pages because they are lightweight and reusable in nature.
Creating a Component in angular 7:
To create a component in any angular application, the first step is to get in the app directory and then create a new component by ng command on the shell.
The syntax is:
ng generate component (component_name)
ng g c (component_name)
The commands are written as:
cd app ng generate component comp1
cd app ng g c comp1
After the execution of the command, a new folder within the app folder will be formed in the name of the component.
Structure of a new component
Each new component when created consists of 4 files listed as follows (considering comp1 as the name of component):
- comp1/comp1.component.html: This file consists of the HTML code for how the component will look.
- comp1/comp1.component.spec.ts: file is in typescript which is used for testing purpose. The presence of this file is not necessary.
- comp1/comp1.component.ts: This file consists the component class in typescript format with the name Comp1Component which implements the OnInit interface and has a ndOnInit() method by default. The code written within this method executed when the page life-cycle state is Init.
- comp1/comp1.component.css: This file has the CSS linked to the HTML file shown above.
- Adding Angular Material Component to Angular Application
- Angular 7 | Angular Data Services using Observable
- Routing in Angular JS using Angular UI Router
- Angular CLI | Angular Project Setup
- Difference between Angular 4 and Angular 5
- ReactJS | Components - Set 2
- ReactJS | Components
- Presentational vs container components
- ReactJS Pure Components
- ReactJS | Lifecycle of Components
- ReactJS | Functional Components
- ReactJS | Class Based Components
- Angular 4 | Introduction
- How to use bootstrap 4 in angular 2?
- How to use mat-icon in angular?
- Angular 8 | Introduction
- Angular 7 | Observables
- Angular 7 | Directives
- Angular 7 | Architecture
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.