Components in Angular 7 - Study24x7
Social learning Network
study24x7

Default error msg

Login

New to Study24x7 ? Join Now
Already have an account? Login
googlePlay app_img

Components in Angular 7

Updated on 15 February 2020
study24x7
Angular Programming
7 min read 3 views
Updated on 15 February 2020
Share this article
Copy Link Link Copied
NAT Banner

Components in angular basically are the key features for making the Angular Application. The complete application is built using the components. Simply puts, components is Typescript class Decorated with @Component which is the part of angular. 


When we create a component in angular with the help of angular CLI four files are generated by default 


1. .css file

2. .html file

3. .spec.ts file

4. .ts file 



❖ The first file is used for giving the look and feel for the view.


❖ The second file is used for writing the HTML for the view


❖ The third file is used for the unit testing for a particular component


❖ The fourth file is used writing the main business login in Typescript 


When we create an angular project then one component is automatically generated by the default app component which is the root component of an angular application. The root app component has the following files- 


app.component.html 

app.component.spec.ts 

app.component.ts 

app.module.ts 


And if you select the routing option during the project setup then one more file also generated for handling the routing 


App-routing.module.ts 


Angular CLI has one command for creating the component. However, the app component generated default during the project setup is the parent component and remaining all the components created manually are the child component 

Command for generating the component- 


ng generate component component_name 

OR ng g c component_name 


Example:- 


Now run the command to create the component with the below line of code- 

ng g c demo-cmp 


When you run the above command in the command line, you will get the following result- 


❖ CREATE src/app/demo-cmp/demo-cmp.component.html

❖ CREATE src/app/demo-cmp/demo-cmp.component.spec.ts

❖ CREATE src/app/demo-cmp/demo-cmp.component.ts

❖ CREATE src/app/demo-cmp/demo-cmp.component.css

❖ UPDATE src/app/app.module.ts 


Let us check file structure in demo-cmp -> 


1- demo-cmp.component.ts 


import { Component, OnInit } from '@angular/core'; 

@Component

(

{ 

selector: 'app-demo-cmp', templateUrl: './demo-cmp.component.html', styleUrls: ['./demo-cmp.component.css']

}

)


export class DemoCmpComponent implements OnInit { 


constructor() {

}

ngOnInit() {

}

} 


-A component selector is a css selector that tells how angular finds this particular component in html page 

- templateUrl is path or url of a template file for an angular component 

- StyleUrls one or more path or url for files containing css to use in this component 

- Inside the @component decorator, we can use template instead of templateUrl and style instead of styleUrls 

- A template is an inline html for an angular component 

style is an inline css 


2 - demo-cmp.component.html 


<p> demo-cpm works! 

</p> 


Mainframe Development Software Quality IIT-JEE
Like| 2 Comment
study24x7
Write a comment...
Trending Articles

Best Study timetable for class 8th students

By CBSE CLASS 8

HOW TO WRITE CERTIFICATE SECTION FOR CLASS XII SCHOOL PROJE...

By Edubabble LLP

Best topic ideas for class 7 Science projects

By CBSE CLASS 7

The best daily routine for class 8 students

By CBSE CLASS 8
Featured Courses
Related Posts

Check these related articles on Study24x7

Advantages of BSc Honours over BSc
6 min read 129 views

We know that you are a science buff and want to turn your passion into a full-fledged career. A degree in science such as a Bachelor of Science (BS

Bsc Courses

17 followers

Tokenize your Assets or Create new tokens on Solana
14 min read 3 views

Solana Token Development Services: If you are looking for a Solana Token development company, you have come to the correct place. The top blockcha

steve Johnson

5 followers

Why Startups and Entrepreneurs would like to Prefer ERC721 Tokens?
9 min read 3 views

What is ERC-721 The ERC-721 protocol provides a standard for non-fungible tokens (NFT). Because of its age, rarity, or even something else like its a

steve Johnson

5 followers

Ruby Language
6 min read 2 views

Ruby is a scripting language designed by Yukihiro Matsumoto, also known as Matz. It runs on a variety of platforms, such as Windows, Mac OS, and the v

Ruby Language

3 followers

Use of Drones- Good or Bad?
7 min read 17 views

A drone or a UAV (unmanned aerial vehicle) refers to a pilotless, mini or large aircraft that operates through the combination of various technologies

Bsc Courses

17 followers

Video Editing is an art.
7 min read 5 views

Television Studio Editor: Television studio editors could work at a network in a studio or for a local company as a live programming editor. These pr

Shubham Kumar

88 followers

Confused between BCA and BSc?
7 min read 17 views

BCA stands for Bachelor in Computer Application. It is a degree course that spans for 3-years. Students who are interested in programming and language

Bsc Courses

17 followers

The Fayol's Principle of Management
9 min read 96 views

This article explains the administrative theory and management by Henry Foyal's in a particular way. After reading this you will be able to understand

Lakshmi Sharma

2 followers

Share this article
Copy Link Link Copied