Open In App
Related Articles

Angular 7 | Components

Improve Article
Save Article
Like Article

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: 

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): 

  1. comp1/comp1.component.html: This file consists of the HTML code for how the component will look.
  2. comp1/comp1.component.spec.ts: file is in typescript which is used for testing purpose. The presence of this file is not necessary.
  3. 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 ngOnInit() method by default. The code written within this method executed when the page life-cycle state is Init.
  4. comp1/comp1.component.css: This file has the CSS linked to the HTML file shown above.


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 25 Sep, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials