HVPM COET SUB: CSLAB-III

PRACTICAL NO.04
Aim: Creating Component in Angular.
Theory: 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>

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

HVPM COET SUB: CSLAB-III

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.

The above command have create a new "greet" folder and app folder and create four files, as shown
below.

kru.component.css is a CSS file for the component, kru.component.html is an HTML file for the
component where
we will write HTML for a component, kru.component.spec.ts is a test file where we can write unit
tests for a component, and kru.component.ts is the class file for a component.

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

HVPM COET SUB: CSLAB-III

Result : Thus I have studied Creation of Component in Angular.

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19