Angular 7 | Components

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)

    OR

    ng g c (component_name)

The commands are written as:

cd app
ng generate component comp1

OR

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 ndOnInit() 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.


My Personal Notes arrow_drop_up

Im a final year MCA student at Panjab University, Chandigarh, one of the most prestigious university of India I am skilled in various aspects related to Web Development and AI I have worked as a freelancer at upwork and thus have knowledge on various aspects related to NLP, image processing and web

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. 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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.