Schematics in Angular Tooltip component
4 Apr 20232 minutes to read
Angular schematics is a workflow tool that allows you generate component, modules, and resolve dependency issues. The main goal of the schematics is ease of use and development in angular environment.
EJ2 Tooltip supports Angular schematic’s module injection, component generation, automation dependency installation, styles imports, etc.
Getting started
Note: Angular schematics supports only from the Angular CLI v6. So, check your version by running
ng --version
. If it is below version 6, update your CLI by running the following command:npm install -g @angular/cli
.
In order to work with Angular schematics, create an Angular CLI application. Run the following command to create a CLI application.
ng new angular-application
After running the above command and all the dependency modules installed, we can generate EJ2 Tooltip component using schematics.
Dependency and Module injection using Schematics
Using schematics, we can perform dependency and module injection of the EJ2 Popups package @syncfusion/ej2-angular-popups
automatically. Run the following command in the root of the application.
ng add @syncfusion/ej2-angular-popups --modules=tooltip
The above command will do the following,
- Installs the
@syncfusion/ej2-angular-popups
package, and adds an entry inpackage.json
file. - Imports the
TooltipModule
module in theapp.module.ts
, and adds an entry in theimport
property of the@NgModule
decorator.
Component generation using Schematics
Angular Schematics can be used to generate component, module file, etc. In the same way, we can generate Tooltip components can also be generated.
By using the Schematics to generate EJ2 Tooltip, the time for configuring components is significantly reduced and it is made ready for development immediately. To generate EJ2 Tooltip component with specific features, refer to the following table.
The general syntax for the ng generate command is ng generate @syncfusion/<component-package-name>:<componentName-featureName> --name=<your-desired-name>
Feature Name | Schematics command |
---|---|
Default Tooltip | ng generate @syncfusion/ej2-angular-popups:tooltip-default --name=default-tooltip |
Template Tooltip | ng generate @syncfusion/ej2-angular-popups:tooltip-template --name=template-tooltip |
The above commands will do the following,
- Generate the Tooltip with specific features mentioned in the
src/app
with folder name of thename
property passed. - Import the generated component into the
app.module.ts
file, and add an entry in thedeclarations
array in the@NgModule
decorator.
Note: It is not required to run the above commands only after the
ng add @syncfusion/ej2-angular-popups
, but it is required to have@syncfusion/ej2-angular-popups
installed.