Angular CLI - ng add Command

Quiz

This chapter will discuss the Angular CLI ng add command, including its syntax, argument, options, and a suitable example, which helps you use this command in your real-time project.

The 'ng add' Command

The "ng add" command provided by the Angular CLI (Command Line Interface) is used to add a new Angular package or library to your existing Angular project.

This command not only installs the package but also performs necessary configuration changes, such as updating angular.json and adding required dependencies to package.json.

Syntax

Following is the syntax of the Angular CLI ng add command −

ng add ng <collection> [options]

Here,

collection: This is the name of the Angular package or library that you want to add to your project.
options: These are optional flags (options) or parameters you can use to customize the behavior of the command.

Arguments

The argument for ng add command is as follows −

Sr.No.	Argument & Description
1	<collection> The name of the package to be added.

Options

Options are optional parameters. A few commonly used options are listed below:

Sr.No.	Option & Description
1	--defaults=true\|false When true, disables interactive input prompts for options with a default.
2	--help=true\|false\|json\|JSON Shows a help message for this command in the console. Default: false
3	--registry=registry The NPM registry to use.
4	--verbose=true\|false Display additional details about internal operations during execution. Default: false

Adding Angular Material

Angular Material is UI libray specific designed for the Angular applications, it is provide vaiours ready-to-use "UI componets" such as Input, Button, Card, ect.

In the example below, you will see how to add the Angular Material library to your existing or new Angular project using the 'ng add' command.

Example

The following is an example of using the 'ng add' command to add the "Angular Material" library to your existing Angular project −

Step 1: Use the following command to add Angular Material Library to your Angular project:

ng add @angular/material

Once you run the above command, the following confirmation message will be displayed, indicating that the library was installed successfully:

UPDATE package.json (1558 bytes)
â Packages installed successfully.
UPDATE angular.json (4533 bytes)
UPDATE src/index.html (527 bytes)
UPDATE src/styles.css (182 bytes)

Adding Bootstrap

Bootstrap is a CSS library that provides ready-to-use UI components or elements, such as paginators, navigation bars, buttons, tables, lists, and more.

In the following example, we will use the ng add command to add Bootstrap to our Angular project:

Example

This example will guide you on how to add Bootstrap to your Angular project −

Step 1: Use the following command to add Bootstrap:

ng add @ng-bootstrap/ng-bootstrap

Once you run the above command, the following confirmation message will be displayed, indicating that the library was installed successfully:

â Determining Package Manager
  âº Using package manager: npm
â Searching for compatible package version
  âº Found compatible package version: @ng-bootstrap/ng-bootstrap@18.0.0.
â Loading package information from registry
â Confirming installation
â Packages installed successfully.

Print Page