Skip to main content Skip to docs navigation
Views 41

angular-angular-components

Advertisments

Here, you will learn about the Angular component and how to create a custom component using Angular CLI.

Angular is a SPA framework, and a view is made of one or more component. An Angular component represents a portion of a view.

Generally, an interactive web page is made of HTML, CSS, and JavaScript. Angular component is no different.

Angular Component = HTML Template + Component Class + Component Metadata

HTML Template

HTML template is nothing but a regular HTML code with additional Angular specific syntax to communicate with the component class.

Class

Essentially, a component class is a TypeScript class that includes properties and methods. Properties store data and methods include the logic for the component. Eventually, this class will be compiled into JavaScript.

 Note:

TypeScript is an open-source, object-oriented language developed and maintained by Microsoft. It is a typed superset of JavaScript that compiles to plain JavaScript.

Metadata

Metadata is some extra data for a component used by Angular API to execute the component, such as the location of HTML and CSS files of the component, selector, providers, etc.

Generate Angular Component using Angular CLI

You can create files for a component manually or using the Angular CLI command. Angular CLI reduces the development time. So, let's use Angular CLI to create a new component.

Use the following CLI command to generate a component.

ng generate component <component name>

 

All Angular CLI command starts with ng, generate or g is a command, component is an argument and then the name of the component.

The following executes the ng g command to generate the greet component in VS Code.

Comments