What is a component in Angular | How to work Component

Components are the basic building block of user interface (UI) in Angular applications and it controls views (HTML/CSS). They also communicate with other components and services to provide functionality to your applications. Components are basically, Typescript classes that interact with the component’s HTML files, which are displayed on the browsers. The component is the core functionality of Angular applications, but you need to know how to pass the data to the components to configure them. Angular applications must have a root component that contains all other components.

How to Make dynamic form add and delete rows in table through form in Angular.

Components are created using @Component decorator which is part of the @angular/core module. You can also create your own project using Angular CLI, this command will allow you to quickly create an Angular application such as – generate components, services, pipes, directive, classes, and modules, etc. as per your requirements. Create your own component (login) using the following command line

After executing the above Angular CLI command in the project directory, the output will look like this

how to use Bootstrap with angular

And by default the application login files are created and it looks like this

1 login.component.html

2 login.component.spec.ts

3 login.component.ts

4 login.component.css

5 app.module.ts

In addition, Angular CLI commands also import the Login component in the Angular module. See the example in detail:

login.component.ts:

Above component class shows some of the most useful @Component configuration options:

 · Selector

· TemplateUrl

· Style URLs

The selector – It is a CSS selector that allows Angular to create an instance of this component wherever it finds the corresponding tag in template HTML. For example, it is .

The templateUrl – It is the module-relative address of this component’s HTML template and you can also provide inline HTML template.

The styleUrls – It can be used for CSS rules and will affect the style of the template elements and also provide an inline style CSS. Summary: Components are the fundamental building blocks of UI in Angular applications and communicates with other components and services to provide functionality to applications.

1 It is the core component of Angular applications.

 2  An angular application must have a root component that contains all other components.

3 It contains well-defined selector.

4 It contains well-defined styles and styleUrls.

5 It contains well-defined template and templateUrl.

6 It have well-defined inputs and outputs.

7 It have well-defined encapsulation and animations.

8 It have a well-defined lifecycle. 9 It is a self-describing property